diff options
Diffstat (limited to 'files/nl/web')
144 files changed, 31374 insertions, 0 deletions
diff --git a/files/nl/web/api/canvas_api/index.html b/files/nl/web/api/canvas_api/index.html new file mode 100644 index 0000000000..3d4bbddd27 --- /dev/null +++ b/files/nl/web/api/canvas_api/index.html @@ -0,0 +1,163 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/API/Canvas_API +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary">Added in <a href="/en-US/docs/HTML/HTML5">HTML5</a>, the <strong>HTML {{HTMLElement("canvas")}} element</strong> can be used to draw graphics via scripting in <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.</p> + +<p>Mozilla applications gained support for <code><canvas></code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code><canvas></code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code><canvas></code> by including a script from Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code><canvas></code>.</p> + +<p>The <code><canvas></code> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to do hardware-accelerated 3D graphics on web pages.</p> + +<h2 id="Example">Example</h2> + +<p>This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Edit the code below and see your changes update live in the canvas:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Reference">Reference</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}</li> +</ul> +</div> + +<p>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<h2 id="Guides_and_tutorials">Guides and tutorials</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> + <dd>A comprehensive tutorial covering both the basic usage of <code><canvas></code> and its advanced features.</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt> + <dd>Some extension developer-oriented code snippets involving <code><canvas></code>.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> + <dd>A demo of ray-tracing animation using canvas.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt> + <dd>How to draw DOM content, such as HTML elements, into a canvas.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt> + <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd> +</dl> + +<h2 id="Resources">Resources</h2> + +<h3 id="Generic">Generic</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> +</ul> + +<h3 id="Libraries">Libraries</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> + <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> + <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/nl/web/api/canvas_api/tutorial/index.html b/files/nl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..8e020ae096 --- /dev/null +++ b/files/nl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,53 @@ +--- +title: Canvas-handleiding +slug: Web/API/Canvas_API/Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p> + +<div class="summary"> +<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> is een HTML element wat gebruikt kan worden om graphics te tekenen met behulp van een script (meestal JavaScript). Op deze manier is het mogelijk om bijvoorbeeld grafieken te tekenen, foto composities te maken, of simpele (en niet simpele) animaties te maken. De afbeeldingen op deze pagina zijn voorbeelden can <canvas> implementaties die in deze tutorial zullen worden gemaakt.</p> +</div> + +<p><span class="seoSummary">Deze tutorial beschrijft hoe je met basis <canvas> elementen 2D graphics kunt maken. De voorbeelden op deze pagina zouden je een goed idee moeten geven van wat er mogelijk is met canvas. Ook kan je de stukjes code gebruiken om zelf te beginnen met het bouwen van je eigen content.</span></p> + +<p><code><canvas></code> werd voor het eerst geintroduceerd in Webkit van Apple voor OS X Dashboard. Sindsdien is het geimplementeerd in alle grote browsers.</p> + +<h2 id="Before_you_start" name="Before_you_start">Om te beginnen</h2> + +<p>Het <code><canvas></code> element gebruiken is niet heel ingewikkeld, maar het is wel nodig om de basis van <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> en <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a> te kennen. Er zijn enkele oudere browsers die het <code><canvas> </code>element nog niet ondersteunen, maar het wordt wel ondersteund in alle recente versies van de grote browsers. Het standaard formaat van een canvas is 300 px x 150 px (breedte x hoogte). Het formaat kan worden aangepast met behulp van de HTML 'height' en 'width' eigenschappen. Om graphics te kunnen tekenen op het canvas gebruiken we een JavaScript context object.</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">In deze tutorial</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Standaard gebruik</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Vormen tekenen</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Stylen en kleuren toepassen</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Tekst tekenen</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Afbeeldingen gebruiken</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformaties</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositie</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Simpele animaties</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Gevorderde animaties</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulatie</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Het canvas optimaliseren</a></li> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li> +</ul> + +<h2 id="See_also" name="See_also">Bekijk ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas onderwerp pagina</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator naar Canvas plug-in</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 dagen aan canvas tutorials</a></li> +</ul> + +<h2 id="Een_boodschap_aan_onze_bijdragers">Een boodschap aan onze bijdragers</h2> + +<p>Vanwege een ongelukkige technische fout in de week van 17 juni, 2013, zijn we de geschiedenis van deze tutorial verloren. Inclusief alle bijdrages uit het verleden. Wij verontschuldigen ons hiervoor en hopen dat jullie deze vervelende ongeval kunnen vergeven.</p> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html new file mode 100644 index 0000000000..40813af9a2 --- /dev/null +++ b/files/nl/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -0,0 +1,219 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +tags: + - API + - Blending + - Canvas + - CanvasRenderingContext2D + - Compositie + - Onderdeel + - Referentie +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +<div>{{APIRef}}</div> + +<p>De <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong>onderdeel van de Canvas 2D API verandert het type van renderen van nieuwe figuren. Hierbij is type een string die de nieuwe rendermodus geeft.</p> + +<p>Bekijk ook het hoofdstuk <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositing</a> in de <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.globalCompositeOperation = type;</var></pre> + +<h3 id="Types">Types</h3> + +<p>{{EmbedLiveSample("Compositing_example", 750, 7300, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property"><code>globalCompositeOperation</code> gebruiken</h3> + +<p>Dit is maar een klein stukje code die de <code>globalCompositeOperation</code> property gebruikt om twee rechthoeken te tekenen die elkaar erbuiten houden waar ze overlappen.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.globalCompositeOperation = 'xor'; + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = 'red'; +ctx.fillRect(50, 50, 100, 100); +</pre> + +<p>Bewerk de code hieronder en zie de veranderingen:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Speelcode</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:120px;"> +ctx.globalCompositeOperation = 'xor'; + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = 'red'; +ctx.fillRect(50, 50, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Compositing')}}</td> + <td>{{Spec2('Compositing')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserondersteuning">Browserondersteuning</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Standaard</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Blendmodus</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("20") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Standaard</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Blendmodus</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("20") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="WebKitBlink-specifieke_opmerkingen">WebKit/Blink-specifieke opmerkingen</h2> + +<ul> + <li>In WebKit- and Blink-gebaseerde Browsers, is een niet-standaard en afgewezen functie <code>ctx.setCompositeOperation()</code> gebruikt voor deze operatie.</li> + <li>Ondersteuning "plus-darker" en "darker" zijn verwijderd in Chrome 48. Ontwikkelaars zoeken een vervanging die "darken" moet gebruiken.</li> +</ul> + +<h2 id="Gecko-specifieke_opmerkingen">Gecko-specifieke opmerkingen</h2> + +<ul> + <li>Een vroege Canvas-specificatie draft heeft de waarde "darker", maar Firefox verwijderde ondersteuning voor "darker" in versie 4 ({{bug(571532)}}). Bekijk ook <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">deze blogpost</a> die de <code>difference</code> value aanraad om een gelijk effect als "darker" te maken.</li> +</ul> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>De interface die het definieert: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> +</ul> diff --git a/files/nl/web/api/canvasrenderingcontext2d/index.html b/files/nl/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..08ac6e9fb8 --- /dev/null +++ b/files/nl/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,450 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +<div>{{APIRef}}</div> + +<div>De <strong>CanvasRenderingContext2D-</strong>interface wordt gebruikt om rechthoeken, tekst, afbeeldingen en andere objecten op het canvasobject te tekenen. Het verstrekt een 2D rendercontext voor het tekenoppervlak van een {{ HTMLElement("canvas") }}-element.</div> + +<div> </div> + +<p>Roep, om een object van deze interface te verkrijgen, {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} aan op een <code><canvas>-element</code>, met "2d" als argument:</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); // in your HTML this element appears as <canvas id="myCanvas"></canvas> +var ctx = canvas.getContext('2d'); +</pre> + +<p>Zodra u een 2D-rendercontext hebt, kunt u hiermee tekenen. Bijvoorbeeld:</p> + +<pre class="brush: js">ctx.fillStyle = 'rgb(200,0,0)'; // sets the color to fill in the rectangle with +ctx.fillRect(10, 10, 55, 50); // draws the rectangle at position 10, 10 with a width of 55 and a height of 50 +</pre> + +<p>Zie de properties en methods in de zijbalk en hieronder. Hiernaast heeft de <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">canvas-tutorial</a> ook meer informatie, voorbeelden en hulpbronnen.</p> + +<h2 id="Drawing_rectangles">Drawing rectangles</h2> + +<p>There are three methods that immediately draw rectangles to the bitmap.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd> +</dl> + +<h2 id="Drawing_text">Drawing text</h2> + +<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Draws (fills) a given text at the given (x,y) position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object.</dd> +</dl> + +<h2 id="Line_styles">Line styles</h2> + +<p>The following methods and properties control how lines are drawn.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Width of lines. Default <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Miter limit ratio. Default <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Sets the current line dash pattern.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Specifies where to start a dash array on a line.</dd> +</dl> + +<h2 id="Text_styles">Text styles</h2> + +<p>The following properties control how text is laid out.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Font setting. Default value <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd> +</dl> + +<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> + +<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> +</dl> + +<h2 id="Gradients_and_patterns">Gradients and patterns</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h2 id="Shadows">Shadows</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Specifies the blurring effect. Default <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Color of the shadow. Default fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontal distance the shadow will be offset. Default 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertical distance the shadow will be offset. Default 0.</dd> +</dl> + +<h2 id="Paths">Paths</h2> + +<p>The following methods can be used to manipulate paths of objects.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Adds a quadratic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> +</dl> + +<h2 id="Drawing_paths">Drawing paths</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Fills the subpaths with the current fill style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Strokes the subpaths with the current stroke style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrolls the current path or a given path into the view.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Reports whether or not the specified point is contained in the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> +</dl> + +<h2 id="Transformations">Transformations</h2> + +<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt> + <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Resets the current transform by the identity matrix.</dd> +</dl> + +<h2 id="Compositing">Compositing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> +</dl> + +<h2 id="Drawing_images">Drawing images</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> +</dl> + +<h2 id="Pixel_manipulation">Pixel manipulation</h2> + +<p>See also the {{domxref("ImageData")}} object.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> +</dl> + +<h2 id="Image_smoothing">Image smoothing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<h2 id="The_canvas_state">The canvas state</h2> + +<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h2 id="Hit_regions">Hit regions</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h2 id="Non-standard_APIs">Non-standard APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<ul> + <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<ul> + <li>In Gecko, when you set a system font as the value of a canvas 2D context's {{domxref("CanvasRenderingContext2D.font", "font")}} (e.g. <code>menu</code>), getting the font value fails to return the expected font (it returns nothing). This is fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57) ({{bug(1374885)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/nl/web/api/comment/index.html b/files/nl/web/api/comment/index.html new file mode 100644 index 0000000000..432fbd60d0 --- /dev/null +++ b/files/nl/web/api/comment/index.html @@ -0,0 +1,137 @@ +--- +title: Comment +slug: Web/API/Comment +translation_of: Web/API/Comment +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>De <code><strong>Comment</strong></code> interface is een text notitie binnen de markup; hoewel ze niet zichtbaar op de pagina zijn, zijn ze wel te lezen in de sourceview. Comments zijn er in HTML en XML door het tussen '<code><!--</code>' en '<code>--></code>' te zetten. In XML, kan je '<code>--</code>' niet in een comment gebruiken.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<p><em>Deze interface heeft geen specifieke eigenschap, maar neemt die van zijn parent over, {{domxref("CharacterData")}}, en indirect die van {{domxref("Node")}}. </em></p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt> + <dd>Retourneert een <code>Comment</code> object met de parameter als tekstinhoud.</dd> +</dl> + +<h2 id="Methoden">Methoden</h2> + +<p><em>Deze interface heeft geen specifieke methode, maar neemt die van zijn parent over, {{domxref("CharacterData")}}, en indirect die van {{domxref("Node")}}.</em></p> + +<h2 id="Specification" name="Specification">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Constructor toegevoegd.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Geen veranderingen aan {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Geen veranderingen aan{{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Eerste verschijning</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compabiliteit">Browser compabiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Normale support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>Comment()</code> constructor {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Normale support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>Comment()</code> constructor {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("24.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> + +<p> </p> diff --git a/files/nl/web/api/css/index.html b/files/nl/web/api/css/index.html new file mode 100644 index 0000000000..f7197a5afa --- /dev/null +++ b/files/nl/web/api/css/index.html @@ -0,0 +1,134 @@ +--- +title: CSS +slug: Web/API/CSS +translation_of: Web/API/CSS +--- +<div>{{APIRef("CSSOM")}}</div> + +<p>The <code><strong>CSS</strong></code> interface holds useful CSS-related methods. No object with this interface are implemented: it contains only static methods and therefore is a utilitarian interface.</p> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<p><em>The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.</em></p> + +<h2 id="Methoden">Methoden</h2> + +<p><em>The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.</em></p> + +<h2 id="Statische_methoden">Statische methoden</h2> + +<p><em>No inherited static methods</em>.</p> + +<dl> + <dt>{{domxref("CSS.supports()")}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the pair <em>property-value</em>, or the condition, given in parameter is supported.</dd> +</dl> + +<dl> + <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt> + <dd>Can be used to escape a string mostly for use as part of a CSS selector.</dd> +</dl> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Adds the <code>escape()</code> static method.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compabiliteit">Browser compabiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>28.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}} [1]</td> + <td>6.0</td> + <td>12.1</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>escape()</code>{{experimental_inline}}</td> + <td>46.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("31.0")}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12.1</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>escape()</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("31.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Was available behind the <code>layout.css.supports-rule.enabled</code> preference since Gecko 20.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/nl/web/api/cssstylesheet/index.html b/files/nl/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..1c034ed417 --- /dev/null +++ b/files/nl/web/api/cssstylesheet/index.html @@ -0,0 +1,183 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +tags: + - API + - CSSOM + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSStyleSheet +--- +<div>{{APIRef("CSSOM")}}</div> + +<p>The <strong><code>CSSStyleSheet</code></strong> interface represents a single <a href="/en-US/docs/Web/CSS">CSS</a> style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.</p> + +<p>A style sheet consists of <em>{{domxref("CSSRule", "rules", "", 1)}}</em>, such as <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>), various <em>at-rules</em> (<code>@import</code>, <code>@media</code>, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.</p> + +<p>See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("Stylesheet")}}.</em></p> + +<dl> + <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt> + <dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br> + This is normally used to access individual rules like this:<br> + <code> styleSheet.cssRules[i] // where i = 0..cssRules.length</code><br> + To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd> + <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt> + <dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p> + +<dl> + <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule")}}</dt> + <dd>Deletes a rule at the specified position from the style sheet.</dd> + <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule")}}</dt> + <dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p> + +<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p> + +<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="http://tabatkins.github.io/specs/construct-stylesheets/">Constructable Stylesheet Objects</a> might get added to the Web APIs at some point). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p> + +<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Reason for the style sheet to be associated with the document</th> + <th scope="col">Appears in <code>document.<br> + styleSheets</code> list</th> + <th scope="col">Getting the owner element/rule given the style sheet object</th> + <th scope="col">The interface for the owner object</th> + <th scope="col">Getting the CSSStyleSheet object from the owner</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td> + <td>Yes</td> + <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td> + <td>{{domxref("HTMLLinkElement")}},<br> + {{domxref("HTMLStyleElement")}},<br> + or {{domxref("SVGStyleElement")}}</td> + <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td> + </tr> + <tr> + <td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td> + <td>Yes</td> + <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td> + <td>{{domxref("CSSImportRule")}}</td> + <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td> + </tr> + <tr> + <td><code><?xml-stylesheet ?></code> processing instruction in the (non-HTML) document</td> + <td>Yes</td> + <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td> + <td>{{domxref("ProcessingInstruction")}}</td> + <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td> + </tr> + <tr> + <td>HTTP Link Header</td> + <td>Yes</td> + <td><em>N/A</em></td> + <td>N/A</td> + <td>N/A</td> + </tr> + <tr> + <td>User agent (default) style sheets</td> + <td>No</td> + <td>N/A</td> + <td>N/A</td> + <td>N/A</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>{{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="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li> +</ul> diff --git a/files/nl/web/api/document/createtextnode/index.html b/files/nl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..f786a5bb70 --- /dev/null +++ b/files/nl/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Maakt een nieuwe Text node aan.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><code>text</code> is een Text node.</li> + <li><code>data</code> is een string met daarin de data bestemd voor de text node.</li> +</ul> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode voorbeeld</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('WIJ KUNNEN HET! ');">WIJ KUNNEN HET!</button> + <button onclick="addTextNode('WERKELIJK! ');">WERKELIJK!</button> + <button onclick="addTextNode('GEENSZINS! ');">GEENSZINS!</button> + + <hr /> + + <p id="p1">Eerste regel van de paragraaf.</p> +</body> +</html> +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</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>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/api/document/currentscript/index.html b/files/nl/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..fd86f2f38e --- /dev/null +++ b/files/nl/web/api/document/currentscript/index.html @@ -0,0 +1,117 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Property + - Reference +translation_of: Web/API/Document/currentScript +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Geeft het {{HTMLElement("script")}} element wiens script op dit moment wordt uitgevoerd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript; +</pre> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Dit voorbeeld controleert of het script asynchroon wordt uitgevoerd:</p> + +<pre class="brush:js">if (document.currentScript.async) { + console.log("Wordt asynchroon uitgevoerd"); +} else { + console.log("Wordt synchroon uitgevoerd"); +}</pre> + +<p><a href="/samples/html/currentScript.html">View Live Examples</a></p> + +<h2 id="Opmerkingen">Opmerkingen</h2> + +<p>Het is belangrijk om te weten dat dit geen referentie naar het script-element geeft als de code in het script wordt aangeroepen als een callback of event handler; het refereert alleen naar het element wanneer dit initieel wordt verwerkt.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initiële definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>16</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{HTMLElement("script")}}</li> + <li>{{domxref("document.onafterscriptexecute")}}</li> + <li>{{domxref("document.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/nl/web/api/document/getelementbyid/index.html b/files/nl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..e399258187 --- /dev/null +++ b/files/nl/web/api/document/getelementbyid/index.html @@ -0,0 +1,202 @@ +--- +title: document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementen + - Method + - Reference + - Web + - getElementById + - id +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<p>Returnt een DOM-referentie naar een element aan de hand van de <a href="/en-US/docs/DOM/element.id">ID</a>; de ID is een string die gebruikt kan worden om een element de identificeren, door middel van het HTML-attribuut <code>id</code>.</p> + +<p>Als je toegang wil krijgen tot een element, dat geen ID heeft, kan je gebruik maken van {{domxref("Document.querySelector", "querySelector()")}} om eender welk element te vinden gebruik makend van {{Glossary("CSS selector", "selector")}}.</p> + +<p><strong><span style="">Syntax</span></strong></p> + +<pre class="eval notranslate"><em>var element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><strong><code>id</code></strong></dt> + <dd>is een hoofdlettergevoelige string die overeenkomt met de unieke ID van het element dat gezocht wordt.</dd> +</dl> + +<h3 id="Return_Value">Return Value</h3> + +<dl> + <dt><strong><code>element</code></strong></dt> + <dd>is een DOM-referentie naar een {{domxref("Element")}}-object, of <code>null</code> als het element met het gespecificeerde ID niet in het document voorkomt.</dd> +</dl> + +<h2 id="Example1" name="Example1">Voorbeeld</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"><html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> + +<h2 id="Notes" name="Notes">Notities</h2> + +<p>Let op dat "Id" in "getElementById" hoofdlettergevoelig is, en correct geschreven <em>moet</em> zijn om te werken. "getElementByID" zal niet werken, hoewel deze manier van schrijven natuurlijk lijkt.</p> + +<p>In tegenstelling tot andere methods die erop lijken, is <code>getElementById</code> alleen beschikbaar als method op het globale <code>document</code>-object, en <em>niet</em> beschikbaar als method op alle elementen in de DOM. Omdat ID-waarden uniek moeten zijn in HTML documenten is er geen behoefte aan "lokale" versies van deze functie.</p> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<pre class="notranslate"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1=parentDOM.getElementById('test1'); + //throw error + //Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>Als er geen element bestaat met de gespecificiëerde <code>id</code>, geeft deze functie <code>null</code>. Let op: de id-parameter is hoofdlettergevoelig, dus <code>document.getElementById("<strong>M</strong>ain")</code> zal <code>null</code> geven, in plaats van het element <code><div id="main"></code>, omdat "M" en "m" verschillend zijn in deze method.</p> + +<p><strong>Elementen die niet in het document staan</strong>, zullen niet gezocht worden door <code>getElementById()</code>. Wanneer je een element creëert en het een id toewijst, moet je het element van te voren aan de document tree toevoegen door middel van {{domxref("Node.insertBefore()")}} — of een andere erop lijkende method — vóórdat <code>getElementById()</code> er toegang toe heeft.</p> + +<pre class="brush: js notranslate">var element = document.createElement('div'); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el will be null! +</pre> + +<p><strong>Niet-HTML documenten.</strong> De DOM-implementatie moet informatie bevatten over welke attributes het type ID dragen. Attributen met de naam "id" zijn niet per se van het type ID, tenzij dat expliciet gedefiniëerd staat in de DTD van het document. Het attribuut <code>id</code> is gedefiniëerd als type ID in de gevallen van onder andere <a href="/en-US/docs/Glossary/XHTML">XHTML</a> en <a href="/en-US/docs/XUL">XUL</a>. Implementaties die niet als type ID gedefiniëerd zijn, returnen <code>null</code>.</p> + +<h2 id="Specification" name="Specification">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("Document")}} referentie voor andere methods en properties die je kunt gebruiken om naar elementen te refereren.</li> + <li>{{domxref("Document.querySelector()")}} voor selectors via queries als <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - heeft een utility method om <code>getElementById()</code> 'xml:id' in XML documenten te laten ontvangen (zoals gereturned door Ajax calls)</li> +</ul> diff --git a/files/nl/web/api/document/index.html b/files/nl/web/api/document/index.html new file mode 100644 index 0000000000..a64e97a986 --- /dev/null +++ b/files/nl/web/api/document/index.html @@ -0,0 +1,447 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<div>{{APIRef}}</div> + +<div> </div> + +<p>The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality global to the document, like how to obtain the page's URL and create new elements in the document.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>text/html</code> content type, also implement the {{domxref("HTMLDocument")}} interface, wherease SVG documents implement the {{domxref("SVGDocument")}} interface.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an <code>id</code>. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.URL")}} {{readonlyinline}}</dt> + <dd>Returns ...</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd> + <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p> + </dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_document">Extension for HTML document</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}} {{readonlyinline}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("Document.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns the topmost element at the specified coordinates. </dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd>Registers a web component.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<p> </p> diff --git a/files/nl/web/api/document/queryselector/index.html b/files/nl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..66a6a87148 --- /dev/null +++ b/files/nl/web/api/document/queryselector/index.html @@ -0,0 +1,162 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Elementen + - Méthode + - Referentie + - selectoren +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p class="brush: js">Geeft het eerste <a href="/nl/docs/DOM/element">element</a> in het document dat overeenkomt met de opgegeven selector, of groep van selectors, of <code>null</code><strong> </strong>als er geen overeenkomsten zijn gevonden.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Bij het doorzoeken van het document wordt er gebruik gemaakt van een depth-first pre-order zoekmethode, waarbij wordt begonnen bij de eerste knoop/het eerste element in het document, en waarna er vervolgens geïtereerd wordt door verdere knopen/elementen geordend op basis van het aantal kindknopen/-elementen.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxis</h2> + +<pre class="brush: js">element = document.querySelector(selectors); +</pre> + +<p>waarbij</p> + +<ul> + <li><code>element</code> een <a href="/nl/docs/DOM/element" title="en-US/docs/DOM/element">element</a>-object is.</li> + <li><code>selectors</code> een string is met een of meerdere <a href="/nl/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS-selectoren</a>, gescheiden door komma's.</li> +</ul> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<p>In dit voorbeeld wordt het eerste element in het document met de klasse "<code>mijnklasse</code>" teruggestuurd:</p> + +<pre class="brush: js">var el = document.querySelector(".mijnklasse"); +</pre> + +<h2 id="ExamplePowerful" name="ExamplePowerful">Voorbeeld: Complexe selectoren</h2> + +<p><em>Selectoren</em> kunnen ook erg complex zijn, zoals gedemonstreerd in het volgende voorbeeld. Hier wordt het eerste element <code><input name="login"/></code> binnen <code><div class="gebruikerspaneel hoofd"></code> in het document teruggestuurd:</p> + +<pre class="brush: js">var el = document.querySelector("div.gebruikerspaneel.hoofd input[name='login']"); +</pre> + +<h2 id="Notes" name="Notes">Opmerkingen</h2> + +<p>Stuurt <code>null</code> terug wanneer er geen overeenkomstig element wordt gevonden; anders wordt het eerste element dat overeenkomt teruggestuurd.</p> + +<p>Als de selector overeenkomt met een ID, en dit ID is foutief meerdere malen gebruikt in het document, wordt het eerste element dat overeenkomt teruggestuurd.</p> + +<p>Geeft een <code>SYNTAX_ERR</code>-uitzondering als de opgegeven groep van selectoren ongeldig is.</p> + +<p><code>querySelector()</code> werd geïntroduceerd in de Selectors-API.</p> + +<p>Het string-argument dat aan <code>querySelector</code> wordt gegeven volgt de syntaxix van CSS.</p> + +<p>CSS Pseudo-elementen zullen nooit een element als resultaat geven, zoals gespecificeerd in de <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors-API</a>.</p> + +<p><span style="line-height: 1.572;">Om een ID of selectoren te vinden die niet de CSS-syntaxis volgen (bijvoorbeeld met een dubble punt of spatie erin), moet voor het verboden karakter een schuine streep naar achteren (escaping) worden geplaatst. Omdat de schuine streep naar achteren een escapekarakter is in JavaScript, is het noodzakelijk, wanneer de ID of selectoren een schuine streep naar achteren bevatten, om <em>twee</em> extra schuine strepen naar achteren hieraan toe te voegen </span>(één keer voor de JavaScript-string, en één keer voor querySelector):</p> + +<pre class="brush: html"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar'); // "#fooar" (\b is het karakter voor een backspace) + document.querySelector('#foo\bar'); // Komt nergens mee overeen + + console.log('#foo\\bar'); // "#foo\bar" + console.log('#foo\\\\bar'); // "#foo\\bar" + document.querySelector('#foo\\\\bar'); // Komt overeen met de eerste div + + document.querySelector('#foo:bar'); // Komt nergens mee overeen + document.querySelector('#foo\\:bar'); // Komt overeen met de tweede div +</script> +</pre> + +<h2 id="Specificatie">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Oorspronkelijke definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browsercompatibiliteit</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functionaliteit</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functionaliteit</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zie ook:</h2> + +<ul> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Codesnippets voor querySelector</a></li> +</ul> diff --git a/files/nl/web/api/document_object_model/index.html b/files/nl/web/api/document_object_model/index.html new file mode 100644 index 0000000000..6b39acb065 --- /dev/null +++ b/files/nl/web/api/document_object_model/index.html @@ -0,0 +1,412 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Referentie + - Intermediate + - WebAPI +translation_of: Web/API/Document_Object_Model +--- +<p>Het <strong>Document Object Model (<em>DOM</em>)</strong> is een programmeerinterface voor HTML, XML en SVG documenten. Het zorgt voor een structurele representatie van het document, wat het mogelijk maakt de inhoud en visuele presentatie te veranderen.Het DOM geeft een weergave van een document als een gestructureerde groep van knooppunten en objecten die methoden en eigenschappen bevatten. Knooppunten kunnen eventueel gekoppeld worden met event handlers. Zodra dit event geactiveerd is, worden de event handlers uitgevoerd. Het verbindt eigenlijk scripts en webpagina's met programmeertalen.</p> + +<p>Hoewel vaak benaderd met behulp van JavaScript, is de DOM zelf geen onderdeel van de taal JavaScript, en het kan worden gebruikt in andere talen, hoewel dit niet gewoonlijk is.</p> + +<p>Een <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introductie</a> van DOM is beschikbaar.</p> + +<h2 id="DOM_interfaces">DOM interfaces</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Promise")}} {{experimental_inline}}</li> + <li>{{domxref("PromiseResolver")}} {{experimental_inline}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Verouderde_DOM_interfaces">Verouderde DOM interfaces</h2> + +<p>Het Document Object Model is vereenvoudigd. <span id="result_box" lang="nl"><span class="hps">Om</span> <span class="hps">dit te bereiken zijn</span> <span class="hps">de</span> <span class="hps">volgende</span> <span class="hps">interfaces, die</span> <span class="hps">in de</span> <span class="hps">verschillende</span> <span class="hps">DOM</span> <span class="hps">level</span> <span class="hps">3</span> <span class="hps">of</span> <span class="hps">minder</span> <span class="hps">kwaliteit te bereiken</span> <span class="hps">zijn, verwijderd</span><span>.</span> <span class="hps">Het is nog</span> <span class="hps">onduidelijk of</span> <span class="hps">sommige kunnen</span> <span class="hps">worden ingesteld,</span> <span class="hps">maar voor dit</span> <span class="hps">moment dat ze</span> <span class="hps">moeten worden beschouwd</span> <span class="hps">als</span> <span class="hps">achterhaald</span> <span class="hps">en worden vermeden</span><span>:</span></span></p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li> </li> +</ul> +</div> + +<h2 id="HTML_interfaces">HTML interfaces</h2> + +<p><span id="result_box" lang="nl"><span class="hps">Een</span> <span class="hps">document met</span> <span class="hps">HTML</span> <span class="hps">wordt</span> <span class="hps">beschreven</span> <span class="hps">met behulp van</span> </span>{{domxref("HTMLDocument")}}<span lang="nl"> <span class="hps">interface.</span> <span class="hps">Merk op dat de</span> <span class="hps">HTML-specificatie</span> ook het </span>{{domxref("Document")}}<span lang="nl"> <span class="hps">interface verlengt.</span><br> + <br> + <span class="hps">Een</span> <span class="hps">HTMLDocument</span> <span class="hps">object</span> <span class="hps">geeft ook toegang tot</span> <span class="hps">de browser</span> <span class="hps">functies</span><span>:</span> <span class="hps">het tabblad</span> <span class="hps">of</span> <span class="hps">venster</span><span>,</span> <span class="hps">waarin een</span> <span class="hps">pagina</span> <span class="hps">wordt</span> <span class="hps">getoond</span> <span class="hps">met behulp van de</span> </span>{{domxref("Window")}}<span lang="nl"><span> </span><span>interface</span><span>,</span> <span class="hps">de</span> </span>{{domxref("window.style", "Style")}}<span lang="nl"> <span class="hps">verbonden</span> <span class="hps">met </span><span class="atn hps">(</span><span>meestal</span> <span class="hps">CSS</span><span>)</span><span>,</span> <span class="hps">de geschiedenis van</span> <span class="hps">de</span> <span class="hps">browser</span> <span class="hps">ten opzichte van de</span> <span class="hps">context</span><span>,</span> </span>{{domxref("window.history", "History")}}<span lang="nl"><span> </span><span>,</span> <span class="hps">uiteindelijk</span> <span class="hps">een</span> </span>{{domxref("Selection")}}<span lang="nl"> <span class="hps">gedaan</span> <span class="hps">op het document</span><span>.</span></span></p> + +<h3 id="HTML_element_interfaces">HTML element interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Andere_interfaces">Andere interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Verouderde_HTML_interfaces">Verouderde HTML interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_interfaces">SVG interfaces</h2> + +<h3 id="SVG_element_interfaces">SVG element interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="SVG_datatype_interfaces">SVG datatype interfaces</h3> + +<p>Hier is de DOM API voor datatypes gebruikt in de definities van SVG eigenschappen en attributen.</p> + +<div class="note"> +<p><strong>Opmerking:</strong> Vanaf {{Gecko("5.0")}} vertegenwoordigen de volgende SVG-gerelateerde DOM objectlijsten die te indexeren zijn en kunnen worden geraadpleegd. Zoals arrays, deze hebben als toevoeging een lengte-eigenschap met vermelding van het aantal items in de lijsten: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} en {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type">Static type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type">Animated type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SVG_Path_segment_interfaces">SVG Path segment interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGPathSegList")}}</li> + <li>{{domxref("SVGPathSeg")}}</li> + <li>{{domxref("SVGPathSegArcAbs")}}</li> + <li>{{domxref("SVGPathSegArcRel")}}</li> + <li>{{domxref("SVGPathSegClosePath")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}}</li> + <li>{{domxref("SVGPathSegLinetoAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalRel")}}</li> + <li>{{domxref("SVGPathSegLinetoRel")}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalRel")}}</li> + <li>{{domxref("SVGPathSegMovetoAbs")}}</li> + <li>{{domxref("SVGPathSegMovetoRel")}}</li> +</ul> +</div> + +<h3 id="SMIL_gerelateerde_interfaces">SMIL gerelateerde interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Andere_SVG_interfaces">Andere SVG interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Voorbeelden</a></li> +</ul> diff --git a/files/nl/web/api/element/index.html b/files/nl/web/api/element/index.html new file mode 100644 index 0000000000..a8a8ff5b40 --- /dev/null +++ b/files/nl/web/api/element/index.html @@ -0,0 +1,484 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from <code>Element</code>.</span> For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.</p> + +<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p> + +<dl> + <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd> + <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd> + <dt>{{DOMxRef("Element.className")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd> + <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd> + <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd> + <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd> + <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd> + <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd> + <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd> + <dt>{{DOMxRef("Element.id")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd> + <dt>{{DOMxRef("Element.innerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd> + <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd> + <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dd>The namespace URI of the element, or <code>null</code> if it is no namespace. + <div class="note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd> + <dt>{{DOMxRef("Element.outerHTML")}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd> + <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt> + <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> + <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd> + <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd> + <dt>{{DOMxRef("Element.scrollLeft")}}</dt> + <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd> + <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollTop")}}</dt> + <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd> + <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd> + <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd> + <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt> + <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd> + <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt> + <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd> + <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd> + <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt> + <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd> + <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd> + <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p> + +<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p> +</div> + +<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3> + +<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p> + +<dl> + <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt> + <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd> +</dl> + +<h3 id="Handlers" name="Handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Element.onfullscreenchange")}}</dt> + <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.</dd> + <dt>{{domxref("Element.onfullscreenerror")}}</dt> + <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p> + +<dl> + <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt> + <dd>Registers an event handler to a specific event type on the element.</dd> + <dt>{{DOMxRef("Element.attachShadow()")}}</dt> + <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt> + <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd> + <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt> + <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd> + <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd> + <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd> + <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd> + <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of Animation objects currently active on the element.</dd> + <dt>{{DOMxRef("Element.getAttribute()")}}</dt> + <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt> + <dd>Returns an array of attribute names from the current element.</dd> + <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt> + <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd> + <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt> + <dd>Returns the size of an element and its position relative to the viewport.</dd> + <dt>{{DOMxRef("Element.getClientRects()")}}</dt> + <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd> + <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd> + <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd> + <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt> + <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd> + <dt>{{DOMxRef("Element.hasAttribute()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd> + <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd> + <dt>{{DOMxRef("Element.hasAttributes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd> + <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> + <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd> + <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt> + <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt> + <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd> + <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt> + <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd> + <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd> + <dt>{{DOMxRef("Element.querySelector()")}}</dt> + <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt> + <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd> + <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt> + <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd> + <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt> + <dd>Removes the element from the children list of its parent.</dd> + <dt>{{DOMxRef("Element.removeAttribute()")}}</dt> + <dd>Removes the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt> + <dd>Removes the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Removes the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the element.</dd> + <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt> + <dd>Asynchronously asks the browser to make the element full-screen.</dd> + <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd> +</dl> + +<dl> + <dt>{{domxref("Element.scroll()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{domxref("Element.scrollBy()")}}</dt> + <dd>Scrolls an element by the given amount.</dd> + <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt> + <dd>Scrolls the page until the element gets into the view.</dd> + <dt>{{domxref("Element.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates inside a given element.</dd> + <dt>{{DOMxRef("Element.setAttribute()")}}</dt> + <dd>Sets the value of a named attribute of the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt> + <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the named attribute from the current node.</dd> + <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt> + <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd> + <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt> + <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd> + <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt> + <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd> + <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br> + Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd> + <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt> + <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> + Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> + <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> + <dd>Fired when the document view or an element has been scrolled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd> + <dt>{{domxref("Element/select_event", "select")}}</dt> + <dd>Fired when some text has been selected.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd> + <dt>{{domxref("Element/show_event", "show")}}</dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd> + <dt>{{domxref("Element/wheel_event","wheel")}}</dt> + <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt>{{domxref("Element/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd> + <dt>{{domxref("Element/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd> + <dt>{{domxref("Element/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd> +</dl> + +<h3 id="Composition_events">Composition events</h3> + +<dl> + <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd> + <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> + <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd> + <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt>{{domxref("Element/blur_event", "blur")}}</dt> + <dd>Fired when an element has lost focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd> + <dt>{{domxref("Element/focus_event", "focus")}}</dt> + <dd>Fired when an element has gained focus.<br> + Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd> + <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> + <dd>Fired when an element is about to gain focus.</dd> + <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> + <dd>Fired when an element is about to lose focus.</dd> +</dl> + +<h3 id="Fullscreen_events">Fullscreen events</h3> + +<dl> + <dt><code>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt> + <dd>Sent to an {{domxref("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd> + <dt><code>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt> + <dd>Sent to a<code>n</code> <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd> +</dl> + +<h3 id="Keyboard_events">Keyboard events</h3> + +<dl> + <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> + <dd>Fired when a key is pressed.<br> + Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd> + <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> + <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br> + Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd> + <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> + <dd>Fired when a key is released.<br> + Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd> +</dl> + +<h3 id="Mouse_events">Mouse events</h3> + +<dl> + <dt>{{domxref("Element/Activate_event", "Activate")}}</dt> + <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.<br> + Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.</dd> + <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> + <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd> + <dt>{{domxref("Element/click_event", "click")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br> + Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd> + <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> + <dd>Fired when the user attempts to open a context menu.<br> + Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd> + <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> + <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br> + Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd> + <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> + <dd>Fired when a pointing device button is pressed on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd> + <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd> + <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> + <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd> + <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd> + <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> + <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd> + <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> + <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd> + <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> + <dd>Fired when a pointing device button is released on an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd> + <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd> + <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd> + <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> + <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd> + <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> + <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd> +</dl> + +<h3 id="Touch_events">Touch events</h3> + +<dl> + <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> + <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd> + <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> + <dd>Fired when one or more touch points are removed from the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> + <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> + <dd>Fired when one or more touch points are moved along the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> + <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> + <dd>Fired when one or more touch points are placed on the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> +</dl> + +<dl> + <dt> </dt> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Web Animations", '', '')}}</td> + <td>{{Spec2("Web Animations")}}</td> + <td>Added the <code>getAnimations()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Undo Manager', '', 'Element')}}</td> + <td>{{Spec2('Undo Manager')}}</td> + <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br> + Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Added the <code>requestPointerLock()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Added the <code>requestFullscreen()</code> method.</td> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br> + Added the following method: <code>insertAdjacentHTML()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br> + Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br> + Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br> + Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br> + Removed the <code>schemaTypeInfo</code> property.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br> + Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/nl/web/api/eventsource/index.html b/files/nl/web/api/eventsource/index.html new file mode 100644 index 0000000000..0c5bf3828b --- /dev/null +++ b/files/nl/web/api/eventsource/index.html @@ -0,0 +1,121 @@ +--- +title: EventSource +slug: Web/API/EventSource +translation_of: Web/API/EventSource +--- +<p>{{APIRef("Websockets API")}}</p> + +<p>De <strong><code>EventSource</code></strong> interface wordt gebruikt om door de server afgeschoten events te ontvangen. Het verbind met de server via HTTP, en ontvangt events in het <code>text/event-stream format, zonder de verbinding te sluiten.</code></p> + +<dl> +</dl> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<p><em>Deze interface ontvant ook de eigenschappen van zijn parent, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("EventSource.onerror")}}</dt> + <dd>Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer er een fout voorkomt, en een {{event("error")}} event wordt afgeschoten op dit object.</dd> + <dt>{{domxref("EventSource.onmessage")}}</dt> + <dd>Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer er een {{event("message")}} event wordt ontvangen, wanneer deze van de bron komt.</dd> + <dt>{{domxref("EventSource.onopen")}}</dt> + <dd>Is een {{domxref("EventHandler")}} die afgevuurd wordt wanneer een {{event("open")}} event wordt ontvangen. Enkel wanneer de connectie net wordt geopend.</dd> + <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt> + <dd>Een <code>unsigned short</code> die de status van de verbinding aan geeft. Mogelijke waardes zijn <font face="Consolas, Liberation Mono, Courier, monospace">VERBINDEN </font>(<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>GESLOTEN</code> (<code>2</code>).</dd> + <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt> + <dd>Een {{domxref("DOMString")}} die de URL van de bron weergeeft.</dd> +</dl> + +<h2 id="Methodes">Methodes</h2> + +<p><em>Deze interface ontvant ook de methodes van zijn parent, {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("EventSource.close()")}}</dt> + <dd>Sluit de verbinding, mits er een actieve verbinding is, en zet het <code>readyState</code> attribuut op <code>GESLOTEN</code>. Als de verbinding al gesloten is, doet deze methode niks.</dd> +</dl> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<h2 id="Browser_compabiliteit">Browser compabiliteit</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</th> + </tr> + <tr> + <td> Basic support</td> + <td>9</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>11</td> + <td>5</td> + </tr> + <tr> + <td>CORS support</td> + <td>26</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>{{CompatUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>{{ CompatAndroid("4.4") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Server aangestuurde events gebruiken</a></li> +</ul> diff --git a/files/nl/web/api/index.html b/files/nl/web/api/index.html new file mode 100644 index 0000000000..2bd3df4f5a --- /dev/null +++ b/files/nl/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web API Interfaces +slug: Web/API +tags: + - API + - JavaScript + - Referentie + - Web +translation_of: Web/API +--- +<p><span id="result_box" lang="nl"><span class="hps">Bij het schrijven van</span> <span class="hps">code</span> <span class="hps">voor het web</span> <span class="hps">met behulp van JavaScript</span><span>, is er</span> <span class="hps">een groot aantal</span> <span class="hps">API's</span> <span class="hps">beschikbaar</span><span>.</span> <span class="hps">Hieronder is een lijst</span> <span class="hps">van</span> <span class="hps">alle</span> <span class="hps">interfaces</span> <span class="atn hps">(</span><span>dat wil zeggen</span> <span class="hps">soorten objecten</span><span>) die u</span> <span class="hps">kunt</span><span class="hps"> gebruiken tijdens het</span> <span class="hps">ontwikkelen van uw</span> <span class="hps">web</span><span class="hps">app</span> <span class="hps">of website.</span></span><br> + </p> + +<div>{{APIListAlpha}}</div> diff --git a/files/nl/web/api/indexeddb_api/index.html b/files/nl/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..06840865f2 --- /dev/null +++ b/files/nl/web/api/indexeddb_api/index.html @@ -0,0 +1,143 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +<div> + IndexedDB is een API voor het opslaan van significante hoeveelheden van gestructureerde</div> +<div> + data op de cliënt en voor hoogperformante opzoekingen van deze data door het gebruik van indexen.</div> +<div> + Terwijl <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> handig is voor het opslaan van kleinere hoeveelheden van data is het minder bruikbaar voor de </div> +<div> + opslag van grotere hoeveelheden van gestructureerde data.</div> +<div> + IndexedDB levert hiervoor de oplossing.</div> +<div> + </div> +<div> + <div> + Deze pagina is het startpunt voor de technische omschrijving van de API objecten.</div> + <div> + Als je een basis nodig hebt kan je <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" style="line-height: inherit;" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Basic Concepts About IndexedDB</a> consulteren<span style="line-height: inherit;">. Voor meer details kan je </span><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" style="line-height: inherit;" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> raadplegen.</div> + <div> + </div> + <div> + IndexedDB voorziet aparte APIs voor synchrone en asynchrone toegang.</div> + <div> + De synchrone API is bedoeld voor het gebruik in <a href="/en-US/docs/DOM/Worker" style="line-height: inherit;" title="Worker">Web Workers</a>, maar is nog door geen enkele browser geimplementeerd.</div> + <div> + <span style="line-height: inherit;">De asynchrone API werkt zowel met als zonder Web Workers, maar Firefox heeft dit nog niet geïmplementeerd.</span></div> +</div> +<h2 id="Asynchrone_API"><br> + Asynchrone API</h2> +<p>De asynchrone API methoden geven feedback zonder de oproepende thread te blokkeren.<br> + Om asynchrone toegang tot een database te verkrijgen roep je <code style="font-size: 14px; line-height: inherit;"><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a>()</code><span style="line-height: inherit;"> op het </span><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" style="line-height: inherit;" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB"><code>indexedDB</code></a><span style="line-height: inherit;"> attribuut van een </span><a href="/en-US/docs/DOM/window" style="line-height: inherit;" title="en-US/docs/DOM/window">window</a><span style="line-height: inherit;"> object. Deze methode stuurt een IDBRequest object (IDBOpenDBRequest); asynchrone operaties communiceren met de oproepende applicatie door events uit te voeren op IDBRequest objecten.</span></p> +<div class="note"> + <p>Notitie: Het <code>indexedDB</code> object heeft een prefix in oudere browserversies (eigendom <code>mozIndexedDB</code> in Gecko < 16, <code>webkitIndexedDB</code> in Chrome, en <code>msIndexedDB</code> in IE 10).</p> +</div> +<ul> + <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> voorziet toegang tot een database. Dit is de interface die geïmplementeerd is door het globale object <code>indexedDB</code> en het is daarom het startpunt van de API.</li> + <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itereert over object stores en indexen.</li> + <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> Itereert over object stores en indexen en stuurt de huidige waarde van de cursor terug.</li> + <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> stelt een connectie naar de database voor, het is de enige manier om een transactie te verkrijgen op de database.</li> + <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> voorziet toegang tot een client gebaseerde database. Het is geïmplementeerd door <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a> objecten.</li> + <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> voorziet toegang tot de metadata van een index.</li> + <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> definieert een bereik van sleutels.</li> + <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> stelt een object store voor.</li> + <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> stelt een aanvraag voor om de database te openen.</li> + <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> voorziet toegang tot resultaten van asynchrone aanvragen naar databases en database objecten. Je verkrijgt dit wanneer je een asynchrone methode oproept.</li> + <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> stelt een transactie voor. Je maakt een transactie op de database, specifieert de omvang (zoals welke object stores je toegang toe wil verkrijgen), en bepaal de soort van toegang die je wil (enkel lezen of schrijven).</li> + <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> duidt aan dat de versie van de database is veranderd.</li> +</ul> +<p>Een vroege versie van de specificatie definieert ook deze nu verwijderde interfaces. Ze zijn nog steeds gedocumenteerd in geval u oudere code moet aanpassen:</p> +<ul> + <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> stelt een aanvraag voor om de versie van een database te veranderen. De manier om de database aan te passen is sindsdien veranderd (door <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> op te roepen zonder ook <code><a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()">IDBDatabase.setVersion()</a></code>op te roepen), en de interface <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> heeft nu de functionaliteit van het verwijderde <code>IDBVersionChangeRequest</code>.</li> + <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} stelt uitzonderingcondities voor die kunnen voorkomen bij het uitvoeren van database operaties.</li> +</ul> +<p>Er is ook een <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">synchronone versie van de API</a>. De synchrone API is nog in geen enkele browser geïmplementeerd. Het is bedoeld om te werken met <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p> +<h2 id="Opslaglimieten">Opslaglimieten</h2> +<p>Er is geen limiet op een enkel database item qua omvang.<br> + Echter kan er wel een limiet zijn op elke indexedDB database omvang.<br> + Deze limiet (en hoe de gebruikerinterface deze zal verklaren) kan variëren per browser.</p> +<ul> + <li> + <p>Firefox: geen limiet op de IndexedDB database omvang. De gebruikersinterface zal enkel permissie vragen om blobs groter dan 50MB op te slaan. Deze quota kan aangepast worden via de <code>dom.indexedDB.warningQuota</code> instelling (dewelke gedefinieerd is in <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p> + </li> + <li>Google Chrome: zie <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li> +</ul> +<h2 id="Example" name="Example">Voorbeeld</h2> +<p>Een krachtig voorbeeld waarvoor indexedDB gebruikt kan worden op het web is een voorbeeld door Marco Castelluccio, winnaar van de IndexedDB Mozilla DevDerby. De winnende demo was <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, een bibliotheek en eBook lezer applicatie.</p> +<h2 id="Browser_compatibility" name="Browser_compatibility">Browsercompatibiliteit</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>Asynchronous API</td> + <td> + <p>24.0<br> + 11.0 {{ property_prefix("webkit") }}</p> + </td> + <td>{{ CompatGeckoDesktop("16.0") }}<br> + {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</td> + <td>10</td> + <td>15.0</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Synchronous API<br> + (used with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}<br> + See {{ bug(701634) }}</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>Asynchronous API</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<p>Er is ook de mogelijkheid om IndexedDB te gebruiken op oudere browsers die <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">WebSQL</a> ondersteunen door gebruik te maken van <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p> +<h2 id="Zie_ook">Zie ook</h2> +<ul> + <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a></li> + <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Using IndexedDB</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> + <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a>. {{ Note("Deze zelfstudie is gebaseerd op een oude versie van de specificatie en werkt niet met up-to-date browsers: bijvoorbeeld: Het gebruikt nog steeds deverwijderde <code>setVersion()</code> methode.") }}</li> + <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API specification </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> + <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Examples</a></li> + <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> voor browsers die enkel WebSQL ondersteunen (vb. mobile WebKit)</li> + <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li> +</ul> diff --git a/files/nl/web/api/midiaccess/index.html b/files/nl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..2bc42f75fa --- /dev/null +++ b/files/nl/web/api/midiaccess/index.html @@ -0,0 +1,63 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +translation_of: Web/API/MIDIAccess +--- +<p>{{SeeCompatTable}}{{APIRef("Web MIDI API")}} </p> + +<p>The <strong><code>MIDIAccess</code></strong> interface van de <a href="/en-US/docs/Web/API/Web_MIDI_API">Web MIDI API</a> geeft u methodes om aangesloten MIDI in- en uitgangen weer te geven en te ondervragen.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}</dt> + <dd>Geeft een instance van {{domxref("MIDIInputMap")}} voor toegang voor een aangesloten MIDI ingang.</dd> + <dt>{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}</dt> + <dd>Geeft een instance van {{domxref("MIDIOutputMap")}} voor toegang voor een aangesloten MIDI uitgang.</dd> + <dt>{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}</dt> + <dd>Een boolean attribuut waaruit men kan aflezen of er een MIDI toegang is met System Exclusive mogelijkheden.</dd> +</dl> + +<h3 id="Event_Handlers">Event Handlers</h3> + +<dl> + <dt>{{domxref("MIDIAccess.onstatechange")}}</dt> + <dd>Wordt aangeroepen als er een verandering is in de lijst van aangesloten MIDI apparaten (of er een nieuw MIDI apparaat is toegevoegd of verwijderd).</dd> +</dl> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: js">navigator.requestMIDIAccess() + .then(function(access) { + + // Geef een lijst van aangesloten MIDI controllers + const inputs = access.inputs.values(); + const outputs = access.outputs.values(); + + access.onstatechange = function(e) { + + // Print information about the (dis)connected MIDI controller + console.log(e.port.name, e.port.manufacturer, e.port.state); + }; + });</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebMIDI API','#midiaccess-interface')}}</td> + <td>{{Spec2('WebMIDI API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{Compat("api.MIDIAccess")}}</p> diff --git a/files/nl/web/api/mutationobserver/index.html b/files/nl/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..3b2fcf7a72 --- /dev/null +++ b/files/nl/web/api/mutationobserver/index.html @@ -0,0 +1,248 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - DOM + - DOM Referentie + - Geavanceerd + - NeedsContent + - NeedsUpdate + - Referentie +translation_of: Web/API/MutationObserver +--- +<p>{{APIRef("DOM")}}</p> + +<p><code>MutationObserver</code> biedt ontwikkelaars een manier om te reageren op veranderingen in een <a href="/en-US/docs/DOM">DOM</a>. Het is ontworpen als een vervanging voor <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, gedefinieerd in de DOM3 Events specificatie.</p> + +<h2 id="Constructor">Constructor</h2> + +<h3 id="MutationObserver"><code>MutationObserver()</code></h3> + +<p>Constructor om nieuwe DOM mutation observer instances mee aan te maken.</p> + +<pre class="syntaxbox notranslate">new MutationObserver( + function callback +); +</pre> + +<h6 id="Parameters">Parameters</h6> + +<dl> + <dt><code>callback</code></dt> + <dd>De functie die aangeroepen wordt bij elke DOM mutatie. De observer roept deze functie aan met twee argumenten: een array van objecten - waarvan elk object van het type {{domxref("MutationRecord")}} is - en de MutationObserver instantie zelf.</dd> +</dl> + +<h2 id="Instantiemethodes">Instantiemethodes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td> + </tr> + <tr> + <td><code>void <a href="#disconnect()">disconnect</a>();</code></td> + </tr> + <tr> + <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota bene</strong>: {{domxref("Node")}} target moet niet verward worden met <a href="https://nodejs.org/en/">NodeJS</a>.</p> +</div> + +<h3 id="observe"><code>observe()</code></h3> + +<p>Registreert de MutationObserver instance om notifcaties te ontvangen wanneer er DOM mutaties op de gespecificeerde node worden uitgevoerd.</p> + +<pre class="syntaxbox notranslate">void observe( + {{domxref("Node")}} target, + <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options +); +</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>target</code></dt> + <dd>De {{domxref("Node")}} die wordt geobserveerd voor DOM mutaties.</dd> + <dt><code>options</code></dt> + <dd>Een <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> object specificeert welke DOM mutaties gerapporteerd zouden moeten worden.</dd> +</dl> + +<div class="note"><strong>Nota bene</strong>: een observer toevoegen aan een element is net zoals addEventListener: als je het element meerdere keren observeert maakt het geen verschil. Dit betekent dat als je het element twee keer observeert, de observe callback functie niet twee keer wordt aangeroepen en je ook niet twee keer disconnect() hoeft aan te roepen. In andere woorden: zodra een element wordt geobserveerd, doet het opnieuw observeren met dezelfde observer instantie niets. Als het callback object echter anders is, voegt het uiteraard wel een tweede observer toe.</div> + +<h3 id="disconnect"><code>disconnect()</code></h3> + +<p>Zorgt ervoor dat de <code>MutationObserver</code> instantie geen notificaties van DOM mutaties ontvangt. Totdat <a href="#observe()"><code>observe()</code></a> weer is aangeroepen, wordt de callback van de observer niet aangeroepen.</p> + +<pre class="syntaxbox notranslate">void disconnect(); +</pre> + +<h3 id="takeRecords"><code>takeRecords()</code></h3> + +<p>Leegt de record queue van de <code>MutationObserver</code> instantie en returnt wat daarin zat vóór het legen.</p> + +<pre class="syntaxbox notranslate">Array takeRecords(); +</pre> + +<h6 id="Return_value">Return value</h6> + +<p>Returnt een Array van {{domxref("MutationRecord")}}s.</p> + +<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2> + +<p><code>MutationObserverInit</code> is een object waarin de volgende properties gespecificeerd kunnen worden:</p> + +<div class="note"><strong>Nota bene</strong>: als absoluut minimum moet of <code>childList</code>, of <code>attributes</code>, of <code>characterData</code> <code>true</code> zijn. Anders wordt er een error teruggegeven met de melding: "An invalid or illegal string was specified".</div> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>childList</code></td> + <td><code>true</code> als toevoegingen en verwijdering van kinderen van de target node (inclusief text nodes) geobserveerd moeten worden.</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td><code>true</code> als mutaties van de attributen van de target node geobserveerd moeten worden.</td> + </tr> + <tr> + <td><code>characterData</code></td> + <td><code>true</code> als mutaties van de data van de target node geobserveerd moeten worden.</td> + </tr> + <tr> + <td><code>subtree</code></td> + <td><code>true</code> als mutaties van niet alleen de target node, maar ook de kinderen van de target node geobserveerd moeten worden.</td> + </tr> + <tr> + <td><code>attributeOldValue</code></td> + <td><code>true</code> als <code>attributes</code> op <code>true</code> is gezet en de attribuutwaarde van de target node voordat de mutatie plaatsvond opgeslagen moet worden.</td> + </tr> + <tr> + <td><code>characterDataOldValue</code></td> + <td><code>true</code> als <code>characterData</code> op <code>true</code> is gezet en de data van de target node voordat de mutatie plaatsvond opgeslagen moet worden.</td> + </tr> + <tr> + <td><code>attributeFilter</code></td> + <td>Is een array van lokale attribuutnamen (zonder namespace) als niet alle attribuutmutaties geobserveerd hoeven te worden.</td> + </tr> + </tbody> +</table> + +<h2 id="Voorbeeldgebruik">Voorbeeldgebruik</h2> + +<p>Het volgende voorbeeld is overgenomen van <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">deze blogpost</a>.</p> + +<pre class="brush: js notranslate">// selecteer de target node +var target = document.querySelector('#some-id'); + +// creëer een observer instantie +var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + console.log(mutation.type); + }); +}); + +// configuratie van de observer instantie +var config = { attributes: true, childList: true, characterData: true }; + +// roep observe() aan op de observer instantie, en stuur de target node en de observer configuratie mee +observer.observe(target, config); + +// wanneer je wilt, kun je weer stoppen met observeren +observer.disconnect(); +</pre> + +<h2 id="Aanvullend_leesmateriaal">Aanvullend leesmateriaal</h2> + +<ul> + <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Een kort overzicht</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Een diepgaandere discussie</a></li> + <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Een screencast van Chromium ontwikkelaar Rafael Weinstein</a></li> + <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">De mutatie samenvatting bibliotheek</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td> + <td>{{ Spec2('DOM4') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>18 {{property_prefix("-webkit")}}<br> + 26</td> + <td>{{CompatGeckoDesktop(14)}}</td> + <td>11</td> + <td>15</td> + <td>6.0 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatUnknown}}</td> + <td>18 {{property_prefix("-webkit")}}<br> + 26</td> + <td>{{CompatGeckoMobile(14)}}</td> + <td>11 (8.1)</td> + <td>15</td> + <td>6 {{property_prefix("-webkit")}}<br> + 7</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/api/webgl_api/index.html b/files/nl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..ee3c5d779f --- /dev/null +++ b/files/nl/web/api/webgl_api/index.html @@ -0,0 +1,268 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +<div> +<p>{{WebGLSidebar}}</p> + +<p>WebGL (Web Graphics Library) is een JavaScript API voor het renderen van interactieve 3D en 2D graphics binnen elke compatibele webbrowser zonder het gebruik van plug-ins. WebGL daartoe worden een API die nauw overeenkomt met OpenGL ES 2.0 die kunnen worden gebruikt in HTML5 {{HTMLElement ("canvas")}} elementen.</p> + +<p>Ondersteuning voor WebGL is aanwezig in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ en Internet Explorer 11+; echter, moet het apparaat van de gebruiker ook hardware hebben die deze functies ondersteunt.</p> +</div> + +<p>Het {{HTMLElement("canvas")}} element wordt ook gebruikt door <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> om 2D graphics te tonen op webpagina's.</p> + +<h2 id="Referenties">Referenties</h2> + +<div class="index"> +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGLObject")}}</li> + <li>{{domxref("WebGLBuffer")}}</li> + <li>{{domxref("WebGLFrameBuffer")}}</li> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLRenderBuffer")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLTexture")}}</li> + <li> </li> +</ul> +</div> + +<h2 id="Handleidingen_en_Tutorials">Handleidingen en Tutorials</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>: Een beginners gids naar WebGL kern concepten. Een goede plek om te beginnen wanneer je nog geen WebGL ervaring hebt.</li> + <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a>: Tips and suggestions to improve your WebGL content.</li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a>: How to use extensions that are available in WebGL.</li> +</ul> + +<h3 id="Advanced_tutorials">Advanced tutorials</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</li> +</ul> + +<h2 id="Resources">Resources</h2> + +<ul> + <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li> + <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li> + <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> A site with tutorials on how to use WebGL.</li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li> + <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> + <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li> +</ul> + +<h3 id="Libraries">Libraries</h3> + +<ul> + <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript Matrix and Vector library for High Performance WebGL apps</li> + <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebGL')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('WebGL2')}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9</td> + <td>11</td> + <td>12<sup>[1]</sup></td> + <td>5.1<sup>[1]</sup></td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Chrome for Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>25<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12<sup>[1]</sup></td> + <td>8.1</td> + </tr> + <tr> + <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_element_index_uint</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>OES_vertex_array_object</code></td> + <td>{{CompatUnknown}}</td> + <td>25</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>25{{property_prefix("WEBKIT_")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The implementation of this feature is experimental.</p> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name <code>experimental-webgl2</code> in the future for testing.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> + +<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> + <dt><code>webgl.disable_extensions</code></dt> + <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li> +</ul> diff --git a/files/nl/web/api/webgl_api/tutorial/index.html b/files/nl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..e11eac7320 --- /dev/null +++ b/files/nl/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - NeedsTranslation + - TopicStub + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> +</div> + +<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p> + +<h2 id="Before_you_start">Before you start</h2> + +<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> + +<h2 id="In_this_tutorial">In this tutorial</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt> + <dd>How to set up a WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt> + <dd>How to render simple flat shapes using WebGL.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt> + <dd>Demonstrates how to add color to shapes using shaders.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt> + <dd>Shows how to rotate and translate objects to create simple animations.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt> + <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt> + <dd>Demonstrates how to map textures onto the faces of an object.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt> + <dd>How to simulate lighting effects in your WebGL context.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt> + <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd> +</dl> diff --git a/files/nl/web/api/window.crypto.getrandomvalues/index.html b/files/nl/web/api/window.crypto.getrandomvalues/index.html new file mode 100644 index 0000000000..c91a691be9 --- /dev/null +++ b/files/nl/web/api/window.crypto.getrandomvalues/index.html @@ -0,0 +1,97 @@ +--- +title: window.crypto.getRandomValues +slug: Web/API/window.crypto.getRandomValues +translation_of: Web/API/Crypto/getRandomValues +--- +<p>{{ ApiRef() }}</p> +<p>{{ SeeCompatTable() }}</p> +<p>Met deze functie kunt u cryptografisch willekeurige getallen verkrijgen.</p> +<h2 id="Syntax">Syntax</h2> +<pre class="syntaxbox">window.crypto.getRandomValues(typedArray);</pre> +<h2 id="Parameters">Parameters</h2> +<table class="standard-table" style=""> + <thead> + <tr> + <th scope="col">Parameter</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>typedArray</code></td> + <td>Integer-gebaseerde <a href="/en/JavaScript_typed_arrays" title="JavaScript typed arrays">TypedArray</a>. Alle elementen in de array zullen worden overschreven door willekeurige getallen.</td> + </tr> + </tbody> +</table> +<h2 id="Beschrijving">Beschrijving</h2> +<p>Als u een integer-gebaseerde <a href="/en/JavaScript_typed_arrays" title="JavaScript typed arrays">TypedArray</a> (d.w.z. een <a href="/en/JavaScript_typed_arrays/Int8Array" title="Int8Array"><code>Int8Array</code></a>, <a href="/en/JavaScript_typed_arrays/Uint8Array" title="Uint8Array"><code>Uint8Array</code></a>, <a href="/en/JavaScript_typed_arrays/Int16Array" title="Int16Array"><code>Int16Array</code></a>, <a href="/en/JavaScript_typed_arrays/Uint16Array" title="Uint16Array"><code>Uint16Array</code></a>, <a href="/en/JavaScript_typed_arrays/Int32Array" title="Int32Array"><code>Int32Array</code></a>, of <a href="/en/JavaScript_typed_arrays/Uint32Array" title="Uint32Array"><code>Uint32Array</code></a>) meegeeft, zal de functie de array vullen met cryptografisch willekeurige getallen. Het is de bedoeling dat de browser een sterke (pseudo)willekeurige getalsgenerator gebruikt. Omdat de browser waarschijnlijk slechts een beperkte hoeveelheid entropie heeft, mag de methode een <code>QuotaExceededError</code> geven, als teveel entropie wordt gebruikt.</p> +<h2 id="Voorbeeld">Voorbeeld</h2> +<pre class="brush: js">/* ervanuit gaande dat that window.crypto.getRandomValues beschikbaar is */ + +var array = new Uint32Array(10); +window.crypto.getRandomValues(array); + +console.log("Uw geluksnummers:"); +for (var i = 0; i < array.length; i++) { + console.log(array[i]); +} +</pre> +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>11.0 {{ webkitbug("22049") }}</td> + <td>21.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Browser</th> + <th>Chrome (as App)</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>23</td> + <td>21.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>iOS 6</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">Specificatie</h2> +<ul> + <li><a class="external" href="http://wiki.whatwg.org/wiki/Crypto" title="http://wiki.whatwg.org/wiki/Crypto">WHATWG window.crypto proposal</a></li> + <li><a href="http://www.w3.org/TR/WebCryptoAPI/" title="http://www.w3.org/TR/WebCryptoAPI/">Web Cryptography API</a></li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ domxref("Window.crypto") }}</li> + <li><a href="/en/JavaScript_crypto" title="JavaScript crypto">JavaScript crypto</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Math/random" title="random">Math.random</a></li> +</ul> diff --git a/files/nl/web/api/window/alert/index.html b/files/nl/web/api/window/alert/index.html new file mode 100644 index 0000000000..e14d121352 --- /dev/null +++ b/files/nl/web/api/window/alert/index.html @@ -0,0 +1,66 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +<p>{{ APIRef }}</p> + +<p>De methode <code><strong>Window.alert()</strong></code> geeft een waarschuwingsvenster weer met optionele gespecificeerde inhoud en een OK-knop.</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Gebruik</strong></span></font></p> + +<p> + </p><pre class="syntaxbox">window.alert(<em>bericht</em>);</pre> + Om inhoud in het waarschuwingsvenster te weergeven wordt de reeks <code>bericht</code> benoemd, het is niet verplicht om bericht te benoemen.<p></p> + +<p> + </p><h2 id="Example" name="Example">Voorbeeld</h2> +<p></p> + +<pre class="brush: js">window.alert("Hello world!"); +</pre> + +<p>geeft weer:</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">Meer JS:</h2> + +<pre>alert()</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Het waarschuwingsvenster mag niet worden gebruikt voor berichten die een antwoord van de gebruiker vereisen, behalve als dit de erkenning van het bericht betreft.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Dialoogvensters zijn modale vensters - ze zorgen er dus voor dat de rest van het interface niet meer kan worden gebruikt todat het dialoogvenster wordt gesloten. Gebruik daarom niet te veel functies die een dialoogvenster creëren.</p> + +<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> gebruikers (bijv. Firefox extenties) zouden beter de methodes van {{interface("nsIPromptService")}} kunnen gebruiken.</p> + +<p>Vanaf Chrome {{CompatChrome(46.0)}} is deze methode geblokeerd in een {{htmlelement("iframe")}} behalve als zijn sandboxattribuut de <code>allow-modal</code> waarde heeft.</p> + +<p>{{gecko_minversion_inline("23.0")}} Het argument is nu optioneel zoals is vereist door de specificatie.</p> + +<h2 id="Specification" name="Specification">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificaties</th> + <th scope="col">Status</th> + <th scope="col">Reactie</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li>Voor <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a> zie {{ifmethod("nsIPromptService","alert")}} en {{ifmethod("nsIPromptService","alertCheck")}}</li> +</ul> diff --git a/files/nl/web/api/window/console/index.html b/files/nl/web/api/window/console/index.html new file mode 100644 index 0000000000..1f5d3007c0 --- /dev/null +++ b/files/nl/web/api/window/console/index.html @@ -0,0 +1,57 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Naslagwerk + - Referentie + - Window + - alleen-lezen + - console + - eigenschap +translation_of: Web/API/Window/console +--- +<p>{{ APIRef }}</p> + +<p>De <strong><code>Window.console</code></strong> alleen-lezen-eigenschap geeft een referentie terug aan het {{domxref("Console")}}-object, die methodes voorziet om informatie te loggen naar de console van de browser. Deze methodes zijn enkel voorzien voor debuggingdoeleinden en zouden niet mogen worden gebruikt om informatie aan eindgebruikers te presenteren.</p> + +<h2 id="Syntax" name="Syntax">Syntaxis</h2> + +<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; +</pre> + +<h2 id="Example" name="Example">Voorbeelden</h2> + +<h3 id="Naar_de_console_loggen">Naar de console loggen</h3> + +<p>Dit eerste voorbeeld logt tekst naar de console.</p> + +<pre class="brush: js">console.log("Er is een fout ontstaan tijdens het laden van de inhoud"); +</pre> + +<p>Dit volgend voorbeeld logt een object naar de console. De velden van het object zijn uitbreidbaar met behulp van disclosure-widgets.</p> + +<pre class="brush: js">console.dir(someObject);</pre> + +<p>Zie {{SectionOnPage("/nl/docs/Web/API/Console", "Usage")}} voor uitgebreide voorbeelden.</p> + +<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('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Aanvankelijke definitie.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Momenteel zijn er vele implentatieverschillen tussen browsers. Er wordt gewerkt aan het bijeenbrengen en consistent maken hiervan.</p> +</div> diff --git a/files/nl/web/api/window/index.html b/files/nl/web/api/window/index.html new file mode 100644 index 0000000000..985921b10f --- /dev/null +++ b/files/nl/web/api/window/index.html @@ -0,0 +1,440 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> + +<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> + +<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> + <dt>{{domxref("Window.caches")}} {{readOnlyInline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current origin. This object enables <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt> + <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>Returns a storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}}, and {{domxref("GlobalFetch")}}.</em></p> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("GlobalFetch.fetch()")}}</dt> + <dd>Starts the process of fetching a resource.</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}}</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("Window.setResizable()")}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Displays a modal dialog.</dd> + <dt>{{domxref("Window.sizeToContent()")}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("Window.oninstall")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('install')}} event.</dd> + <dt>{{domxref("Window.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back putton is pressed.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("Window.DOMParser")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/nl/web/api/window/prompt/index.html b/files/nl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..ee0a1d0613 --- /dev/null +++ b/files/nl/web/api/window/prompt/index.html @@ -0,0 +1,83 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +tags: + - API + - DOM + - Méthode + - Naslagwerk + - Referentie + - Window + - prompt +translation_of: Web/API/Window/prompt +--- +<div>{{ApiRef("Window")}}</div> + +<p>De <code>Window.prompt()</code> geeft een dialoog weer met een optioneel bericht die de gebruiker vraagt om tekst in te voeren.</p> + +<h2 id="Syntax" name="Syntax">Syntaxis</h2> + +<pre class="syntaxbox"><em>resultaat</em> = window.prompt(<em>bericht</em>, <em>standaardwaarde</em>); +</pre> + +<ul> + <li><code>resultaat</code> is een string die door de gebruiker ingevoerde tekst bevat, of null</li> + <li><code>bericht</code> is een string tekst die aan de gebruiker wordt weergegeven. Deze parameter is optioneel en kan worden weggelaten als er niets moet worden weergegeven in het promptvenster.</li> + <li><code>standaardwaarde</code> is een string die de standaardwaarde bevat, die wordt weergegeven in het tekstveld. Merk hierbij op dat in Internet Explorer 7 of 8 de standaardwaarde "undefined" is<strong>, </strong>als je deze parameter niet meegeeft.</li> +</ul> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<pre class="brush: js">var sign = prompt("Wat is jouw sterrenbeeld?"); + +if (sign.toLowerCase() == "Schorpioen") { + alert("Wow! Ik ben ook een schorpioen!"); +} + +// er zijn vele manieren om prompt te gebruiken +var sign = window.prompt(); // opent een blanco promptvenster +var sign = prompt(); // opent een blanco promptvenster +var sign = window.prompt('Heeft u geluk?'); // Opent een venster met de tekst "Heeft u geluk?" +var sign = window.prompt('Heeft u geluk?', 'Zeker'); // Opent een venster met de tekst "Heeft u geluk?" en de standaardwaarde "Zeker"</pre> + +<p>Wanneer de gebruiker op OK klikt wordt de ingegeven tekst teruggegeven. Indien de gebruiker op OK klikt zonder enige tekst in te voeren wordt een lege string teruggegeven. Als de gebruiker op Cancel klikt, geeft deze functie <code>null</code> terug.</p> + +<p>Bovenstaande prompt verschijnt als volgt (in Chrome op OS X):</p> + +<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p> + +<h2 id="Notes" name="Notes">Opmerkingen</h2> + +<p>Een prompt-dialoog bevat een single-line-tekstbox, een Cancel-knop en een OK-knop. De dialoog geeft de (mogelijk lege) tekst terug die de gebruiker heeft ingevoerd.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Dialoogvensters zijn modale vensters; ze verhinderen de gebruiker ertoe om toegang te krijgen tot de rest van de interface totdat het dialoogvenster wordt gesloten. Om deze reden moet er niet worden overdreven in het gebruik van functies die dialoogvensters (of andere modale vensters) genereren.</p> + +<p>Merk hierbij op dat het resultaat een string is. Dit betekent dat u de waarde, die werd ingegeven door de gebruiker, soms moet omvormen. Bijvoorbeeld, als het antwoord een Number zou moeten zijn, moet u de waarde omvormen naar een Number. <span style="background-color: #f6f6f2; font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">var aNumber = Number(window.prompt("Type a number", "")); </span></p> + +<p>Beginnende bij Chrome {{CompatChrome(46.0)}} werd deze methode geblokkeerd binnen een {{htmlelement("iframe")}} tenzij zijn sandboxattribuut de waarde <code>allow-modal</code> heeft.</p> + +<p>Deze functie heeft geen effect in de Modern UI/Metroversie van Internet Explorer voor Windows 8. Het geeft geen prompt weer aan de gebruiker, en geeft altijd de waarde <code>undefined</code> terug. Het is niet duidelijk of het hier om een bug of bedoeld gedrag gaat. Desktopversies van IE implementeren deze functie wel.</p> + +<h2 id="Specification" name="Specification">Specificatie</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('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("window.alert", "alert")}}</li> + <li>{{domxref("window.confirm", "confirm")}}</li> +</ul> diff --git a/files/nl/web/api/window/requestanimationframe/index.html b/files/nl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..061f620c28 --- /dev/null +++ b/files/nl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,188 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +<p>{{APIRef}}<br> + De <strong><code>window.requestAnimationFrame()</code></strong> methode vertelt de browser dat je een animatie wilt uitvoeren en vereist dat de browser een gespecificeerde functie aanroept om een animatie bij te werken voor de volgende repaint. De methode neemt een argument als een callback die aangeroepen wordt voor de repaint.</p> + +<div class="note"><strong>Notitie:</strong> Uw callback routine moet zelf<code>requestAnimationFrame()</code> aanroepen als u een andere frame wilt animeren bij de volgende repaint.</div> + +<p>Je dient deze methode aan te roepen wanneer je klaar bent om de animatie op het scherm bij te werken. Deze zal de browser vragen om je animatie functie aan te roepen voor de browser de volgende repaint uitvoert. Het aantal callbacks is meestal 60 keer per seconde, maar zal over het algemeen dezelfde display refresh rate zijn als in de meeste websites, volgens W3C aanbevelingen. <code>requestAnimationFrame</code> callbacks worden in de meeste browsers gepauzeerd wanneer deze plaatsvinden vanuit een inactief tabblad of vanuit een verborgen {{ HTMLElement("iframe") }}, om de performance en batterijduur te verbeteren.</p> + +<p>De callback methode krijg een enkel argument, een {{domxref("DOMHighResTimeStamp")}}, die de huidige tijd aangeeft wanneer callbacks die gequeued zijn door <code>requestAnimationFrame</code> beginnen te vuren. Meerdere callbacks in een enkel frame krijgen daarom ieder dezelfde timestamp, ondanks de verstreken tijd tijdens de berekening van elke vorige callback. De timestamp is een decimaal nummer, in miliseconden, maar met een minimale precisie van 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Een parameter die een functie om aan te roepen specificeert wanneer het tijd is om uw animatie bij te werken voor de volgende repaint. De callback heeft een enkel argument, een {{domxref("DOMHighResTimeStamp")}}, die aangeeft wat de huidige tijd (de tijd die {{domxref('performance.now()')}} teruggeeft) is voor wanneer <code>requestAnimationFrame</code> begint de callback te vuren.</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>Een <code>long</code> integer waarde, de request id, die de entry in de callback lijst uniek identificeert. Dit is een non-nul waarde, maar u mag geen andere aannames maken over zijn waarden. U kunt deze waarde aan {{domxref("window.cancelAnimationFrame()")}} geven om het ververs callback verzoek af te breken.</p> + +<p>Voorbeeld:</p> + +<pre class="brush: js">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); +element.style.position = 'absolute'; + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.left = Math.min(progress / 10, 200) + 'px'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Specification" name="Specification">Specificatie</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen verandering, vervangt de vorige.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Initiele definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic ondersteuning</td> + <td>{{CompatChrome(10)}} {{property_prefix("webkit")}}<br> + {{CompatChrome(24)}} [3]</td> + <td>4.0 {{property_prefix("moz")}} [1][4]<br> + 23 [2]</td> + <td>10.0</td> + <td>{{compatversionunknown}} {{property_prefix("-o")}}<br> + 15.0</td> + <td>6.0 {{property_prefix("webkit")}}<br> + 6.1</td> + </tr> + <tr> + <td>return waarde</td> + <td>{{CompatChrome(23)}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Basic ondersteuning</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td> + <p>4.3 {{property_prefix("webkit")}}<br> + 4.4</p> + </td> + <td>4.3 {{property_prefix("webkit")}}<br> + 4.4</td> + <td> + <p>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br> + 23</p> + </td> + <td>10.0</td> + <td>15.0</td> + <td> + <p>6.1 {{property_prefix("webkit")}}<br> + 7.1</p> + </td> + <td>{{CompatChrome(18)}} {{property_prefix("webkit")}}{{CompatChrome(25)}} [3]</td> + </tr> + <tr> + <td><code>requestID</code> return waarde</td> + <td>4.4</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>6.1 {{property_prefix("webkit")}}<br> + 7.1</td> + <td>{{CompatChrome(25)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Voor Gecko 11.0 kon {{geckoRelease("11.0")}}, mozRequestAnimationFrame() aangeroepen worden zonder input parameters. Dit wordt niet langer ondersteund, omdat het waarschijnlijk geen onderdeel van de standaard wordt.</p> + +<p>[2] De callback parameter is een {{domxref("DOMTimeStamp")}} in plaats van een {{domxref("DOMHighResTimeStamp")}} als de geprefixte versie van deze methode werd gebruikt. <code>DOMTimeStamp</code> heeft alleen millisecond precisie, maar <code>DOMHighResTimeStamp</code> heeft een minimale precies van tien microseconden. Verder is de nultijd anders: <code>DOMHighResTimeStamp</code> heeft dezelfde nultijd als <code>performance.now()</code>, maar DOMTimeStamp heeft dezelfde nultijd als<code>Date.now().</code></p> + +<p>[3] De correctie aanroep in Chrome op de request af te breken is op dit moment <code>window.cancelAnimationFrame()</code>. Oudere versies, <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame()</code>, zijn afgeschaft maar worden voor nu nog steeds ondersteund.</p> + +<p>[4] Ondersteuning voor de geprefixte versie is verwijderd in Firefox 42.</p> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/nl/web/api/window/sessionstorage/index.html b/files/nl/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..0a62084a19 --- /dev/null +++ b/files/nl/web/api/window/sessionstorage/index.html @@ -0,0 +1,148 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Referentie + - eigenschap + - opslag + - sessie opslag +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef()}}</p> + +<p>De <code>sessionStorage</code> eigenschap stelt je in staat toegang te krijgen tot het {{domxref("Storage")}} object. sessionStorage lijkt sterk op {{domxref("Window.localStorage")}}, het enige verschil is dat data opgeslagen in localStorage geen vervaltijd heeft, waarbij sessionStorage vervalt als de sessie van de pagina vervalt. Een pagina sessie duurt zo lang de browser open is en overleeft acties als vernieuwen. <strong>Het openen van een pagina in een nieuw tabblad of window zorgt voor een nieuwe sessie</strong>, wat dus anders is dan hoe sessie-cookies werken. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">// Sla data op in sessionStorage +sessionStorage.setItem('key', 'value'); + +// Vraag opgeslagen data op uit sessionStorage +var data = sessionStorage.getItem('key'); + +// Verwijder opgeslagen data uit sessionStorage +sessionStorage.removeItem('key') +</pre> + +<h3 id="Waarde">Waarde</h3> + +<p>Een {{domxref("Storage")}} object.</p> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Het volgende stukje code slaat data op in de sessie van het huidige domein door {{domxref("Storage.setItem()")}} aan te roepen op {{domxref("Storage")}}.</p> + +<pre class="brush: js">sessionStorage.setItem('mijnKat', 'Tom');</pre> + +<p>Het volgende voorbeeld slaat automatisch de inhoud van een text veld op en als de browser per ongeluk herladen wordt zal de text herstelt worden en is er niks verloren gegaan.</p> + +<pre class="brush: js">// Zoek het veld wat je wilt bewaren in de sessie +var field = document.getElementById("field"); + +// Kijk eerst of we een 'autosave' waarde hebben +// (dit gebeurt alleen als je per ongeluk ververst) +if (sessionStorage.getItem("autosave")) { + // Herstel de inhoud van het veld + field.value = sessionStorage.getItem("autosave"); +} + +// Luister naar wijzigingen in het veld +field.addEventListener("change", function() { + // Sla het resultaat op in de sessionStorage + sessionStorage.setItem("autosave", field.value); +});</pre> + + + +<div class="note"> +<p><strong>Note</strong>: Please refer to the <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> article for a full example.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<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> + </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>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>All browsers have varying capacity levels for both localStorage 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="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("Window.localStorage")}}</li> +</ul> diff --git a/files/nl/web/api/windoweventhandlers/index.html b/files/nl/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..284862190f --- /dev/null +++ b/files/nl/web/api/windoweventhandlers/index.html @@ -0,0 +1,191 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>WindowEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>WindowEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowEventHandlers</code>.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p> + +<dl> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onhashchange</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onlanguage</code>{{experimental_inline}}</td> + <td>{{CompatGeckoDesktop(32)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onstorage</code></td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onhashchange</code></td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onlanguage</code>{{experimental_inline}}</td> + <td>{{CompatGeckoMobile(32)}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onstorage</code></td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html b/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..268a544c5f --- /dev/null +++ b/files/nl/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,159 @@ +--- +title: WindowEventHandlers.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +<div> +<div>{{APIRef("HTML DOM")}}</div> +</div> + +<div> </div> + +<p><code><strong>De WindowEventHandlers.onbeforeunload</strong></code> event handler property bevat code welke uitgevoerd wordt wanneer {{event("beforeunload")}} is verstuurd. Dit event wordt getriggerd wanneer een venster op het punt staat zijn bronnen te {{event("unload")}}. Het document is nog steeds zichtbaar en het event is nog steeds te annuleren.</p> + +<div class="note"> +<p><strong>Nota:</strong> Om ongewilde pop-ups tegen te gaan, geven browsers mogelijk geen prompts weer welke gecreëerd zijn in beforeunload event handlers, tenzij er interactie met de pagina is geweest. Voor een overzicht van specifieke browsers, zie de browser compatibiliteit sectie.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre> + +<ul> + <li><code>funcRef</code> is een referentie naar een functie of een functie expressie.</li> + <li>De functie zou een string waarde aan de <code>returnValue</code> property van het Event object moeten toewijzen de deze zelfde string moeten terugsturen.</li> +</ul> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<pre class="brush:js">window.onbeforeunload = function(e) { + var dialogText = 'Dialog text here'; + e.returnValue = dialogText; + return dialogText; +}; +</pre> + +<h2 id="Nota">Nota</h2> + +<p>Wanneer deze event een andere waarde dan <code>null</code> of <code>undefined</code> terug stuurt (of de <code>returnValue</code> property instelt), wordt de gebruiker gevraagd om het sluiten van de pagina te bevestigen. In sommige browsers wordt de terug gestuurde waarde van dit event weergegeven in een dialoogvenster. Beginnende met Firefox 4, Chrome 51, Opera 38 en Safari 9.1, wordt er een algemene string, welke niet the beinvloeden is door de webpagina, weergegeven in plaats van de terug gestuurde string. Als voorbeeld, Firefox geeft altijd de string "This page is asking you to confirm that you want to leave - data you have entered may not be saved." weer. Zie {{bug("588292")}} and <a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a>.</p> + +<p>Sinds 25 Mei 2011, De HTML5 specificatie stelt dat aanroepen van {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, en {{domxref("window.prompt()")}} methods mogen worden genegeerd tijdens dit event. Zie de <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML5 specification</a> voor meer details.</p> + +<p>Let op dat sommige mobile browsers het resultaat van het event negeren (Ze vragen niet om bevestiging aan de gebruiker). Firefox heeft een verborgen instelling in about:config om ditzelfde te bereiken. In essentie betekend dit dat de gebruiker altijd bevestigd dat het document gesloten mag worden.</p> + +<p>Je <em>kunt</em> en <em>zou moeten</em> om dit event te handelen met {{domxref("EventTarget.addEventListener","window.addEventListener()")}} en het {{event("beforeunload")}} event. Meer informatie is daar te vinden.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<p>Het event was van origine geintroduceerd door Microsoft in Internet Explorer 4 en gestandariseerd in de HTML5 specificatie.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1</td> + <td>4</td> + <td>12</td> + <td>3</td> + </tr> + <tr> + <td>Ondersteuning voor aangepaste tekst verwijderd</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td> </td> + <td>38</td> + <td><a href="https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html">9.1</a></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>(nee) <a href="https://bugs.webkit.org/show_bug.cgi?id=19324">defect</a></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Ondersteuning voor aangepaste tekst verwijderd</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("44.0")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See also" name="See also">Zie ook</h2> + +<ul> + <li><a href="http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx">MSDN: onbeforeunload event</a></li> +</ul> diff --git a/files/nl/web/api/xmlhttprequest/index.html b/files/nl/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..4668644ddd --- /dev/null +++ b/files/nl/web/api/xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +<p><code>XMLHttpRequest</code> is een <a class="internal" href="/en/JavaScript" title="En/JavaScript">JavaScript</a> object dat is ontwikkeld door Microsoft en aangepast is door Mozilla, Apple, en Google. Het wordt nu <a href="http://www.w3.org/TR/XMLHttpRequest/"><font color="#0088cc" face="Helvetica Neue, Helvetica, Arial, sans-serif"><span style="line-height: 18px;">gestandaardiseerd</span></font> in het W3C</a>. Het zorgt voor een makkelijke manier om informatie uit een URL op te halen zonder de gehele pagina te herladen. Een webpagina kan een gedeelte van de pagina bijwerken zonder dat de gebruiker er last van heeft. <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">XMLHttpRequest</span><span style="line-height: 1.572;"> word veel gebruikt in <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> programering. </span><span style="line-height: 1.5;">Ondanks de naam kan </span><code style="font-size: 14px;">XMLHttpRequest</code><span style="line-height: 1.5;"> gebruikt worden om elke soort data op te halen, dus niet alleen XML, en ondersteunt protocollen anders dan <a href="https://developer.mozilla.org/en/HTTP">HTTP</a> (onder andere </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">file </span>en<span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"> ftp)</span><span style="line-height: 1.5;">.</span></p> + +<p>Om een instantie van <code>XMLHttpRequest</code> aan te maken schrijft men simpelweg:</p> + +<pre>var myRequest = new XMLHttpRequest(); +</pre> + +<p>Voor meer informatie over het gebruik van <code>XMLHttpRequest</code>, zie <a class="internal" href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<h2 id="Methods_overzicht">Methods overzicht</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a class="internal" href="/en/DOM/XMLHttpRequest#XMLHttpRequest()" title="/en/DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#abort()" title="en/DOM/XMLHttpRequest#abort()">abort</a>();</code></td> + </tr> + <tr> + <td><code>DOMString <a class="internal" href="/en/DOM/XMLHttpRequest#getAllResponseHeaders()" title="en/DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td> + </tr> + <tr> + <td><code>DOMString? <a class="internal" href="/en/DOM/XMLHttpRequest#getResponseHeader()" title="en/DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#open()" title="en/DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#overrideMimeType()" title="en/DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>();</code><br> + <s><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code></s><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBufferView data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br> + <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#setRequestHeader()" title="en/DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td> + </tr> + <tr> + <th>Niet-standaard methods</th> + </tr> + <tr> + <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#init()" title="en/DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td> + </tr> + <tr> + <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#openRequest()" title="en/DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td> + </tr> + <tr> + <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#sendAsBinary()" title="en/DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribuut</th> + <th>Type</th> + <th>Omschrijving</th> + </tr> + <tr id="onreadystatechange"> + <td> + <p><code>onreadystatechange</code></p> + </td> + <td><code>Function?</code></td> + <td> + <p>A JavaScript function object that is called whenever the <code>readyState</code> attribute changes. The callback is called from the user interface thread.</p> + + <div class="warning"><strong>Warning:</strong> This should not be used with synchronous requests and must not be used from native code.</div> + </td> + </tr> + <tr id="readyState"> + <td><code>readyState</code></td> + <td><code>unsigned short</code></td> + <td> + <p>The state of the request:</p> + + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">State</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>UNSENT</code></td> + <td><code>open()</code>has not been called yet.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPENED</code></td> + <td><code>send()</code>has not been called yet.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>HEADERS_RECEIVED</code></td> + <td><code>send()</code> has been called, and headers and status are available.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>LOADING</code></td> + <td>Downloading; <code>responseText</code> holds partial data.</td> + </tr> + <tr> + <td><code>4</code></td> + <td><code>DONE</code></td> + <td>The operation is complete.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr id="response"> + <td><code>response</code></td> + <td>varies</td> + <td> + <p>The response entity body according to <code><a href="#responseType">responseType</a></code>, as an <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript object (for "json"), or string. This is <code>null</code> if the request is not complete or was not successful.</p> + </td> + </tr> + <tr id="responseText"> + <td><code>responseText</code> {{ReadOnlyInline()}}</td> + <td><code>DOMString</code></td> + <td>The response to the request as text, or <code>null</code> if the request was unsuccessful or has not yet been sent.</td> + </tr> + <tr id="responseType"> + <td><code>responseType</code></td> + <td><code>XMLHttpRequestResponseType</code></td> + <td> + <p>Can be set to change the response type.</p> + + <table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Value</td> + <td class="header">Data type of <code>response</code> property</td> + </tr> + <tr> + <td><code>""</code> (empty string)</td> + <td>String (this is the default)</td> + </tr> + <tr> + <td><code>"arraybuffer"</code></td> + <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + </tr> + <tr> + <td><code>"blob"</code></td> + <td>{{ domxref("Blob") }}</td> + </tr> + <tr> + <td><code>"document"</code></td> + <td>{{ domxref("Document") }}</td> + </tr> + <tr> + <td><code>"json"</code></td> + <td>JavaScript object, parsed from a JSON string returned by the server</td> + </tr> + <tr> + <td><code>"text"</code></td> + <td>String</td> + </tr> + <tr> + <td><code>"moz-blob"</code></td> + <td>Used by Firefox to allow retrieving partial {{ domxref("Blob") }} data from progress events. This lets your progress event handler start processing data while it's still being received.</td> + </tr> + <tr> + <td><code>"moz-chunked-text"</code></td> + <td> + <p>Similar to <code>"text"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p> + + <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p> + + <p>This mode currently only works in Firefox.</p> + </td> + </tr> + <tr> + <td><code>"moz-chunked-arraybuffer"</code></td> + <td> + <p>Similar to <code>"arraybuffer"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p> + + <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p> + + <p>This mode currently only works in Firefox.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Note:</strong> Starting with Gecko 11.0, as well as WebKit build 528, these browsers no longer let you use the <code>responseType</code> attribute when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. This change has been proposed to the W3C for standardization.</div> + </td> + </tr> + <tr id="responseXML"> + <td><code>responseXML</code> {{ReadOnlyInline()}}</td> + <td><code>Document?</code></td> + <td> + <p>The response to the request as a DOM <code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code> object, or <code>null</code> if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. The response is parsed as if it were a <code>text/xml</code> stream. When the <code>responseType</code> is set to <code>"document"</code> and the request has been made asynchronously, the response is parsed as a <code>text/html</code> stream.</p> + + <div class="note"><strong>Note:</strong> If the server doesn't apply the <code>text/xml</code> Content-Type header, you can use <code>overrideMimeType()</code>to force <code>XMLHttpRequest</code> to parse it as XML anyway.</div> + </td> + </tr> + <tr id="status"> + <td><code>status</code> {{ReadOnlyInline()}}</td> + <td><code>unsigned short</code></td> + <td>The status of the response to the request. This is the HTTP result code (for example, <code>status</code> is 200 for a successful request).</td> + </tr> + <tr id="statusText"> + <td><code>statusText</code> {{ReadOnlyInline()}}</td> + <td><code>DOMString</code></td> + <td>The response string returned by the HTTP server. Unlike <code>status</code>, this includes the entire text of the response message ("<code>200 OK</code>", for example).</td> + </tr> + <tr id="timeout"> + <td><code>timeout</code></td> + <td><code>unsigned long</code></td> + <td> + <p>The number of milliseconds a request can take before automatically being terminated. A value of 0 (which is the default) means there is no timeout.</p> + + <div class="note"><strong>Note:</strong> You may not use a timeout for synchronous requests with an owning window.</div> + </td> + </tr> + <tr id="ontimeout"> + <td><code>ontimeout</code></td> + <td><code>Function</code></td> + <td> + <p>A JavaScript function object that is called whenever the request times out.</p> + </td> + </tr> + <tr id="upload"> + <td><code>upload</code></td> + <td><code>XMLHttpRequestUpload</code></td> + <td>The upload process can be tracked by adding an event listener to <code>upload</code>.</td> + </tr> + <tr id="withCredentials"> + <td><code>withCredentials</code></td> + <td><code>boolean</code></td> + <td> + <p>Indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers. The default is <code>false</code>.</p> + + <div class="note"><strong>Note:</strong> This never affects same-site requests.</div> + + <div class="note"><strong>Note:</strong> Starting with Gecko 11.0, Gecko no longer lets you use the <code>withCredentials</code> attribute when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception.</div> + </td> + </tr> + </tbody> +</table> + +<h3 id="Non-standard_properties">Non-standard properties</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + </tr> + <tr id="channel"> + <td><code>channel</code> {{ReadOnlyInline()}}</td> + <td>{{Interface("nsIChannel")}}</td> + <td>The channel used by the object when performing the request. This is <code>null</code> if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. <strong>Requires elevated privileges to access.</strong></td> + </tr> + <tr id="mozAnon"> + <td><code>mozAnon</code> {{ReadOnlyInline()}}</td> + <td><code>boolean</code></td> + <td> + <p>If true, the request will be sent without cookie and authentication headers.</p> + </td> + </tr> + <tr id="mozSystem"> + <td><code>mozSystem</code> {{ReadOnlyInline()}}</td> + <td><code>boolean</code></td> + <td> + <p>If true, the same origin policy will not be enforced on the request.</p> + </td> + </tr> + <tr id="mozBackgroundRequest"> + <td><code>mozBackgroundRequest</code></td> + <td><code>boolean</code></td> + <td> + <p>Indicates whether or not the object represents a background service request. If <code>true</code>, no load group is associated with the request, and security dialogs are prevented from being shown to the user. <strong>Requires elevated privileges to access.</strong></p> + + <p>In cases in which a security dialog (such as authentication or a bad certificate notification) would normally be shown, the request simply fails instead.</p> + + <div class="note"><strong>Note: </strong>This property must be set before calling <code>open()</code>.</div> + </td> + </tr> + <tr id="mozResponseArrayBuffer"> + <td><code>mozResponseArrayBuffer</code> {{ obsolete_inline("6") }} {{ReadOnlyInline()}}</td> + <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + <td>The response to the request, as a JavaScript typed array. This is <code>NULL</code> if the request was not successful, or if it hasn't been sent yet.</td> + </tr> + <tr id="multipart"> + <td><code>multipart</code> {{ obsolete_inline("22") }}</td> + <td><code>boolean</code></td> + <td> + <p><strong>This Gecko-only feature was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a>, or <code>responseText</code> from progress events instead.</p> + + <p>Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to <code>true</code>, the content type of the initial response must be <code>multipart/x-mixed-replace</code> or an error will occur. All requests must be asynchronous.</p> + + <p>This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the <code>onload</code> handler is called between documents.</p> + + <div class="note"><strong>Note:</strong> When this is set, the <code>onload</code> handler and other event handlers are not reset after the first XMLdocument is loaded, and the <code>onload</code> handler is called after each part of the response is received.</div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Constructor">Constructor</h2> + +<h3 id="XMLHttpRequest" name="XMLHttpRequest()">XMLHttpRequest()</h3> + +<p>The constructor initiates an XMLHttpRequest. It must be called before any other method calls.</p> + +<p>Gecko/Firefox 16 adds a non-standard parameter to the constructor that can enable anonymous mode (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Setting the <code>mozAnon</code> flag to <code>true</code> effectively resembles the <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> constructor described in the XMLHttpRequest specification which has not been implemented in any browser yet (as of September 2012).</p> + +<pre>XMLHttpRequest ( + JSObject objParameters +);</pre> + +<h5 id="Parameters_non-standard">Parameters (non-standard)</h5> + +<dl> + <dt><code>objParameters</code></dt> + <dd>There are two flags you can set: + <dl> + <dt><code>mozAnon</code></dt> + <dd>Boolean: Setting this flag to <code>true</code> will cause the browser not to expose the origin and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a> when fetching resources. Most important, this means that cookies will not be sent unless explicitly added using setRequestHeader.</dd> + <dt><code>mozSystem</code></dt> + <dd>Boolean: Setting this flag to <code>true</code> allows making cross-site connections without requiring the server to opt-in using CORS. <em>Requires setting <code>mozAnon: true</code>, i.e. this can't be combined with sending cookies or other user credentials. This <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">only works in privileged (reviewed) apps</a>; it does not work on arbitrary webpages loaded in Firefox.</em></dd> + </dl> + </dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<h3 id="abort" name="abort()">abort()</h3> + +<p>Aborts the request if it has already been sent.</p> + +<h3 id="getAllResponseHeaders" name="getAllResponseHeaders()">getAllResponseHeaders()</h3> + +<pre>DOMString getAllResponseHeaders();</pre> + +<p>Returns all the response headers as a string, or <code>null</code> if no response has been received.<strong> Note:</strong> For multipart requests, this returns the headers from the <em>current</em> part of the request, not from the original channel.</p> + +<h3 id="getResponseHeader" name="getResponseHeader()">getResponseHeader()</h3> + +<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre> + +<p>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</p> + +<h3 id="open" name="open()">open()</h3> + +<p>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>instead.</p> + +<div class="note"><strong>Note:</strong> Calling this method for an already active request (one for which <code>open()</code>or <code>openRequest()</code>has already been called) is the equivalent of calling <code>abort()</code>.</div> + +<pre>void open( + DOMString <var>method</var>, + DOMString <var>url</var>, + optional boolean <var>async</var>, + optional DOMString <var>user</var>, + optional DOMString <var>password</var> +); +</pre> + +<h6 id="Parameters">Parameters</h6> + +<dl> + <dt><code>method</code></dt> + <dd>The HTTP method to use, such as "GET", "POST", "PUT", "DELETE", etc. Ignored for non-HTTP(S) URLs.</dd> + <dt><code>url</code></dt> + <dd>The URL to send the request to.</dd> + <dt><code>async</code></dt> + <dd>An optional boolean parameter, defaulting to <code>true</code>, indicating whether or not to perform the operation asynchronously. If this value is <code>false</code>, the <code>send()</code>method does not return until the response is received. If <code>true</code>, notification of a completed transaction is provided using event listeners. This <em>must</em> be true if the <code>multipart</code> attribute is <code>true</code>, or an exception will be thrown. + <div class="note"><strong>Note:</strong> Starting with Gecko 30.0, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> + </dd> + <dt><code>user</code></dt> + <dd>The optional user name to use for authentication purposes; by default, this is an empty string.</dd> + <dt><code>password</code></dt> + <dd>The optional password to use for authentication purposes; by default, this is an empty string.</dd> +</dl> + +<h3 id="overrideMimeType" name="overrideMimeType()">overrideMimeType()</h3> + +<p>Overrides the MIME type returned by the server. This may be used, for example, to force a stream to be treated and parsed as text/xml, even if the server does not report it as such. This method must be called before <code>send()</code>.</p> + +<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre> + +<h3 id="send" name="send()">send()</h3> + +<p>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn't return until the response has arrived.</p> + +<div class="note"><strong>Note:</strong> Any event listeners you wish to set must be set before calling <code>send()</code>.</div> + +<div class="note"><strong>Note:</strong> Be aware to stop using a plain ArrayBuffer as parameter. This is not part of the <code>XMLHttpRequest</code> specification any longer. Use an ArrayBufferView instead (see compatibility table for version information).</div> + +<pre>void send(); +<s>void send(ArrayBuffer <var>data</var>);</s> +void send(ArrayBufferView <var>data</var>); +void send(Blob <var>data</var>); +void send(Document <var>data</var>); +void send(DOMString? <var>data</var>); +void send(FormData <var>data</var>);</pre> + +<h6 id="Notes">Notes</h6> + +<p>If the <var>data</var> is a <code>Document</code>, it is serialized before being sent. When sending a Document, versions of Firefox prior to version 3 always send the request using UTF-8 encoding; <a href="/en/Firefox_3" rel="internal" title="en/Firefox_3">Firefox 3</a> properly sends the document using the encoding specified by <code>body.xmlEncoding</code>, or UTF-8 if no encoding is specified.</p> + +<p>If it's an <code>nsIInputStream</code>, it must be compatible with <code>nsIUploadChannel</code>'s <code>setUploadStream()</code>method. In that case, a Content-Length header is added to the request, with its value obtained using <code>nsIInputStream</code>'s <code>available()</code>method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the <a class="internal" href="/en/nsIXMLHttpRequest#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> method prior to calling <code>send()</code>.</p> + +<p>The best way to send binary content (like in files upload) is using an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <code>send()</code> method. However, if you want to send a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, use the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method instead, or the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> typed arrays superclass.</p> + +<h3 id="setRequestHeader" name="setRequestHeader()">setRequestHeader()</h3> + +<p>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code> after <a href="#open"><code>open()</code></a>, but before <code>send()</code>. If this method is called several times with the same header, the values are merged into one single request header.</p> + +<pre>void setRequestHeader( + DOMString <var>header</var>, + DOMString <var>value</var> +); +</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>header</code></dt> + <dd>The name of the header whose value is to be set.</dd> + <dt><code>value</code></dt> + <dd>The value to set as the body of the header.</dd> +</dl> + +<h3 id="Non-standard_methods">Non-standard methods</h3> + +<h4 id="init">init()</h4> + +<p>Initializes the object for use from C++ code.</p> + +<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div> + +<pre>[noscript] void init( + in nsIPrincipal principal, + in nsIScriptContext scriptContext, + in nsPIDOMWindow ownerWindow +); +</pre> + +<h5 id="Parameters_3">Parameters</h5> + +<dl> + <dt><code>principal</code></dt> + <dd>The principal to use for the request; must not be <code>null</code>.</dd> + <dt><code>scriptContext</code></dt> + <dd>The script context to use for the request; must not be <code>null</code>.</dd> + <dt><code>ownerWindow</code></dt> + <dd>The window associated with the request; may be <code>null</code>.</dd> +</dl> + +<h4 id="openRequest">openRequest()</h4> + +<p>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()"><code>open()</code></a>instead. See the documentation for <code>open()</code>.</p> + +<h3 id="sendAsBinary">sendAsBinary()</h3> + +<p>A variant of the <code>send()</code> method that sends binary data.</p> + +<pre>void sendAsBinary( + in DOMString body +); +</pre> + +<p>This method, used in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API, makes it possible to <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">read and <strong>upload</strong> any type of file</a> and to <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringify</a> the raw data.</p> + +<h5 id="Parameters_4">Parameters</h5> + +<dl> + <dt><code>body</code></dt> + <dd>The request body as a DOMstring. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).</dd> +</dl> + +<h5 id="sendAsBinary_polyfill"><code>sendAsBinary()</code> polyfill</h5> + +<p>Since <code>sendAsBinary()</code> is an experimental feature, here is <strong>a polyfill</strong> for browsers that <em>don't</em> support the <code>sendAsBinary()</code> method but support <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>.</p> + +<pre class="brush: js">/*\ +|*| +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| +\*/ + +if (!XMLHttpRequest.prototype.sendAsBinary) { + XMLHttpRequest.prototype.sendAsBinary = function (sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; +}</pre> + +<div class="note"><strong>Note:</strong> It's possible to build this polyfill putting two types of data as argument for <code>send()</code>: an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – the commented code) or an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, which is a <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/JavaScript/Typed_arrays/Uint8Array">typed array of 8-bit unsigned integers</a> – uncommented code). However, on Google Chrome, when you try to send an <code>ArrayBuffer</code>, the following warning message will appear: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code> Another possible approach to send binary data is the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="background-color: #ffffff;" title="This API is not native.">Non native</span> typed arrays superclass in conjunction with the <a href="#send()" title="#send()"><code>send()</code></a> method.</div> + +<h2 id="Notes_2">Notes</h2> + +<ul> + <li class="note">By default, Firefox 3 limits the number of <code>XMLHttpRequest</code> connections per server to 6 (previous versions limit this to 2 per server). Some interactive web sites may keep an <code>XMLHttpRequest</code> connection open, so opening multiple sessions to such sites may result in the browser hanging in such a way that the window no longer repaints and controls don't respond. This value can be changed by editing the <code>network.http.max-persistent-connections-per-server</code> preference in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li> + <li class="note">From Gecko 7 headers set by {{ manch("setRequestHeader") }} are sent with the request when following a redirect. Previously these headers would not be sent.</li> + <li class="note">When a request reaches its timeout value, a "timeout" event is raised.</li> +</ul> + +<h4 class="note" id="Events">Events</h4> + +<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p> + +<p>Since then, a number of additional event handlers were implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> + +<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="/en/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p> + +<h2 id="Permissions" name="Permissions">Permissions</h2> + +<p>When using System XHR via the <code>mozSystem</code> property, for example for Firefox OS apps, you need to be sure to add the <code>systemXHR</code> permission into your manifest file. System XHR can be used in privileged or certified apps.</p> + +<pre class="brush: js">"permissions": { + "systemXHR":{} +}</pre> + +<h2 id="Browser_Compatibility" name="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>Basic support (XHR1)</td> + <td>1</td> + <td>1.0</td> + <td>5 (via ActiveXObject)<br> + 7 (XMLHttpRequest)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>1.2</td> + </tr> + <tr> + <td><code>send(ArrayBuffer)</code></td> + <td>9</td> + <td>9</td> + <td>10</td> + <td>11.60</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>send(ArrayBufferView)</code></td> + <td>22</td> + <td>20</td> + <td>{{ compatUnknown() }}</td> + <td>{{ compatUnknown() }}</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>send(Blob)</code></td> + <td>7</td> + <td>3.6</td> + <td>10</td> + <td>12</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>send(FormData)</code></td> + <td>6</td> + <td>4</td> + <td>10</td> + <td>12</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>sendAsBinary(DOMString)</code></td> + <td>{{ compatNo() }} – use the <a href="#sendAsBinary%28%29_polyfill" title="sendAsBinary() polyfill">polyfill</a></td> + <td>1.9</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>response</code></td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>responseType</code> = 'arraybuffer'</td> + <td>10</td> + <td>6</td> + <td>10</td> + <td>11.60</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>responseType</code> = 'blob'</td> + <td>19</td> + <td>6</td> + <td>10</td> + <td>12</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>responseType</code> = 'document'</td> + <td>18</td> + <td>11</td> + <td>10</td> + <td>{{ CompatNo() }}</td> + <td>6.1</td> + </tr> + <tr> + <td><code>responseType</code> = 'json'</td> + <td>{{ CompatNo() }}</td> + <td>10</td> + <td>{{ CompatNo() }}</td> + <td>12</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Progress Events</td> + <td>7</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>{{ compatUnknown() }}</td> + </tr> + <tr> + <td><code>withCredentials</code></td> + <td>3</td> + <td>3.5</td> + <td>10</td> + <td>12</td> + <td>4</td> + </tr> + <tr> + <td><code>timeout</code></td> + <td><a href="https://code.google.com/p/chromium/issues/detail?id=231959" title="https://code.google.com/p/chromium/issues/detail?id=231959">29</a></td> + <td>12.0</td> + <td>8</td> + <td><a href="http://dev.opera.com/articles/view/xhr2/#xhrtimeouts" title="http://dev.opera.com/articles/view/xhr2/#xhrtimeouts">12</a></td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>responseType</code> = 'moz-blob'</td> + <td>{{ CompatNo() }}</td> + <td>12.0</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>Chrome for 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>0.16</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>Gecko 11.0 {{ geckoRelease("11.0") }} removed support for using the <code>responseType</code> and <code>withCredentials</code> attributes when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. This change has been proposed to the W3C for standardization.</p> + +<p>Gecko 12.0 {{ geckoRelease("12.0") }} and later support using <code>XMLHttpRequest</code> to read from <a href="/en/data_URIs" title="en/data_URIs"><code>data:</code> URLs</a>.</p> + +<p>Gecko 20.0 {{ geckoRelease("20.0") }} adds the support of sending an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> - sending a plain <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> is not part of the <code>XMLHttpRequest</code> specification any longer and should be treated as deprecated.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>MDN articles about XMLHttpRequest: + <ul> + <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">AJAX - Getting Started</a></li> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en/HTML_in_XMLHttpRequest" title="en/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> + <li><a href="/en/DOM/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li> + </ul> + </li> + <li>XMLHttpRequest references from W3C and browser vendors: + <ul> + <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li> + <li><a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2</li> + <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a class="external" href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li> + </ul> + </li> + <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li> +</ul> + +<p>{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "zh-cn/DOM/XMLHttpRequest" } ) }}</p> diff --git a/files/nl/web/css/@namespace/index.html b/files/nl/web/css/@namespace/index.html new file mode 100644 index 0000000000..469bdd810f --- /dev/null +++ b/files/nl/web/css/@namespace/index.html @@ -0,0 +1,136 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@namespace +--- +<p>{{CSSRef}}</p> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p><span class="seoSummary"><strong><code>@namespace</code></strong> is een <a href="/en-US/docs/Web/CSS/At-rule" title="CSS at-rules">at-rule</a> welke <a href="/en-US/docs/Namespaces">XML namespaces</a> definieert zodat deze gebruikt kunnen worden in een <a href="/en-US/docs/Glossary/CSS">CSS</a> <a href="/en-US/docs/Web/API/StyleSheet">style sheet</a>. De gedefinieerde namespaces kunnen gebruikt worden om de <a href="/en-US/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">type</a>, en <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">selectors</a> alleen elementen binnen de namespace te laten selecteren. De <code>@namespace</code> regel heeft in het algemeen alleen toegevoegde waarde wanneer deze toegepast wordt in documenten welke meerdere namespaces hebben—zoals HTML5 met inline SVG of MathML, of XML met meerdere gebruikte woordenlijsten. </span></p> + +<p>Elke <code>@namespace</code> regel moet alle <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> en <a href="/en-US/docs/Web/CSS/%40import">@import</a> regels volgen, en moet vóór alle andere at-rules en <a href="/en-US/docs/Web/API/CSSStyleDeclaration">style declarations</a> staan in een style sheet.</p> + +<p><code>@namespace</code> kan gebruikt worden om de <strong>standaard namespace</strong> vast te leggen voor een style sheet. Wanneer een standaard namespace is vastgelegd, gelden alle universele en type selectors (maar <strong>geen </strong>attribute selectors, zie de opmerking onderaan) alleen voor de elementen binnen de standaard namespace.</p> + +<p>De <code>@namespace</code> regel kan ook gebruikt worden om een <strong>namespace prefix</strong> vast te leggen. Wanneer een universele, type of attribute selector wordt voorafgegaan met een namespace, dan geldt deze selector alleen wanneer de namespace<em>en</em> de naam van het element of attribute matchen.</p> + +<p>In <a href="/en-US/docs/Glossary/HTML5">HTML5</a> worden namespaces automatisch toegepast op bekende <a href="https://html.spec.whatwg.org/#foreign-elements">foreign elements</a>. Dit zorgt ervoor dat HTML elementen zich gedragen alsof ze in de XHTML namespace zijn (<code>http://www.w3.org/1999/xhtml</code>), zelfs als er geen <code>xmlns</code> attribuut in het document staat, en de<a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> en <a href="/en-US/docs/Web/MathML/Element/math"><math></a> elementen worden toegewezen aan hun bijbehorende namespaces (<code>http://www.w3.org/2000/svg</code> en <code>http://www.w3.org/1998/Math/MathML</code>).</p> + +<div class="note"> +<p><strong>Note:</strong> In XML heeft een attribuut <strong>geen </strong>namespace, behalve als er een prefix op een attribuut is vastgelegd (<em>bijv.</em>, <code>xlink:href</code>). In andere woorden, attributen nemen de namespace van het element waarop ze staan niet over. Om dit gedrag na te bootsen geldt de standaard namespace in CSS <strong>niet </strong>voor attribuut selectors.</p> +</div> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="brush: css">/* Standaard namespace */ +@namespace url(<em>XML-namespace-URL</em>); +@namespace "<em>XML-namespace-URL</em>"; + +/* Prefixed namespace */ +@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>); +@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre> + +<h3 id="Formele_syntaxis">Formele syntaxis</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml); +@namespace svg url(http://www.w3.org/2000/svg); + +/* Dit selecteert alle XHTML <a> elementen, omdat XHTML de standaard non-prefixed namespace is */ +a {} + +/* Dit selecteert alle SVG <a> elementen */ +svg|a {} + +/* Dit selecteert zowel XHTML als SVG <a> elementen */ +*|a {} +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td> + <td>{{Spec2('CSS3 Namespaces')}}</td> + <td>Eerste definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>8.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Namespace selector (|)</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>8.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/css/_colon_only-of-type/index.html b/files/nl/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..3c65dd794f --- /dev/null +++ b/files/nl/web/css/_colon_only-of-type/index.html @@ -0,0 +1,101 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +<div>{{CSSRef}}</div> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De :only-of-type CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> representeerd elk element dat geen elementen heeft van hetzelfde type op hetzelfde niveau.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval">element:only-of-type { <em>style properties</em> } +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Geen verandering.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initiële definitie.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}</li> +</ul> diff --git a/files/nl/web/css/_colon_required/index.html b/files/nl/web/css/_colon_required/index.html new file mode 100644 index 0000000000..6cca75ffc4 --- /dev/null +++ b/files/nl/web/css/_colon_required/index.html @@ -0,0 +1,110 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +translation_of: 'Web/CSS/:required' +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>De <code>:required</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> staat voor elk {{ HTMLElement("input") }} element waar de {{ htmlattrxref("required", "input") }} attribute op staat. Dit stelt formulieren in staat om gemakkelijk aan te tonen welke velden geldige data hebben voordat een formulier verzonden kan worden.</p> + +<p>De {{ cssxref(":optional") }} pseudo-class kan gebruikt worden voor uiterlijk van optionele formulier velden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Bekijk {{ cssxref(":invalid") }} voor een voorbeeld.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">commentaat</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Geen verandering.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Staat voor de semantiek van HTML en validatie.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Geen verandering.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Staat voor de pseudo-class, maar niet voor de geassocieerde semantiek.</td> + </tr> + </tbody> +</table> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>10.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>10.0</td> + <td>5.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> +</ul> diff --git a/files/nl/web/css/animation-duration/index.html b/files/nl/web/css/animation-duration/index.html new file mode 100644 index 0000000000..9a1ae1d7fb --- /dev/null +++ b/files/nl/web/css/animation-duration/index.html @@ -0,0 +1,131 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animaties + - CSS Eigenschap + - Experimenteel + - Referentie +translation_of: Web/CSS/animation-duration +--- +<div>{{CSSRef}} {{ SeeCompatTable() }}</div> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>De <strong><code>animation-duration</code></strong> CSS-eigenschap specificeert hoelang één cyclus duurt in een animatie.</p> + +<p>Een waarde van <code>0s</code>, wat de standaardwaarde is, geeft aan dat er geen animatie moet plaatsvinden.</p> + +<p>Het is vaak handig om de eigenschap {{ cssxref("animation") }} te gebruiken om alle animatie-eigenschappen in een keer in te stellen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="brush:css">animation-duration: 6s; +animation-duration: 120ms; +animation-duration: 1s, 15s; +animation-duration: 10s, 30s, 230ms; +</pre> + +<h3 id="Waardes">Waardes</h3> + +<dl> + <dt><code><time></code></dt> + <dd>De tijdsduur om één cyclus te voltooien voor een animatie. Dit mag gespecificeerd worden in seconden (door s als eenheid te geven) of in milliseconden (door <code>ms</code> als eenheid te geven). Als je de eenheid niet specificeert, dan is de definiëring ongeldig.</dd> +</dl> + +<div class="note"><strong>Opmerking:</strong> Negatieve waardes zijn ongeldig en zullen ervoor zorgen dat de definiëring genegeerd wordt. Sommige oude implementaties, met een voorvoegsel, kunnen hetzelfde worden beschouwd als <code>0s</code>.</div> + +<h3 id="Formele_syntaxis">Formele syntaxis</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>Zie <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> voor voorbeelden.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>3.0{{ property_prefix("-webkit") }}<br> + {{CompatChrome(43.0)}}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.10</td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>2.0{{ property_prefix("-webkit") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.2{{ property_prefix("-webkit") }}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook:</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/nl/web/css/animation-iteration-count/index.html b/files/nl/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..8fa2826c33 --- /dev/null +++ b/files/nl/web/css/animation-iteration-count/index.html @@ -0,0 +1,127 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - animatie +translation_of: Web/CSS/animation-iteration-count +--- +<div>{{CSSRef}} {{ SeeCompatTable() }}</div> + +<h2 id="Summary">Summary</h2> + +<p>Met de <strong><code>animation-iteration-count</code></strong> <a href="/en/CSS" title="CSS">CSS</a> property beschrijf je het aantal keren dat een animatie speelt totdat de animatie stopt.</p> + +<p>Je kunt ook de shorthand property te gebruiken om alle animatie-eigenschappen meteen in één regel in te stellen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">animation-iteration-count: infinite; +animation-iteration-count: 3; +animation-iteration-count: 2.3; + +animation-iteration-count: 2, 0, infinite; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>infinite</code></dt> + <dd>The animatie herhaalt zich non-stop.</dd> + <dt><code><number></code></dt> + <dd>Hoeveel keer een animatie zich herhaalt; <code>1</code> keer is default. Negatieve waarden zijn ongeldig. Je mag ook non-integer waarden declareren om een deel van de animatie af te spelen (bijvoorbeeld <code>0.5</code> zal de helft van de animatie-cyclus afspelen).</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>ZIe <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a> voor voorbeelden.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="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>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br> + {{CompatChrome(43.0)}}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10 </td> + <td>12 {{ property_prefix("-o") }}<br> + 12.10</td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatChrome(43.0)}}<br> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/nl/web/css/box-sizing/index.html b/files/nl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..ed31e59295 --- /dev/null +++ b/files/nl/web/css/box-sizing/index.html @@ -0,0 +1,145 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Attribuut + - Referenctie +translation_of: Web/CSS/box-sizing +--- +<div> </div> + +<h2 id="Overzicht">Overzicht</h2> + +<p>Het <strong><code>box-sizing</code></strong> attribuut wordt gebruikt om het standaard <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* Keyword waarden */ +box-sizing: content-box; +box-sizing: border-box; + +/* Globale waarden */ +box-sizing: inherit; +box-sizing: initial; +box-sizing: unset; +</pre> + +<h3 id="Waarden">Waarden</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. <code>De </code>{{Cssxref("width")}} en {{Cssxref("height")}} attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld:<code> .box {width: 350px;}</code> Daarna voeg je <code>{border: 10px solid black;}</code> toe. Resultaat: (in browser) <code>.box {width:370px;}</code><br> + <br> + Kort samengevat worden de afmetingen van een element berekent als volgt: <em>width = breedte van de content</em> en <em>height = hoogte van de content</em>, exclusief borders of paddings.</dd> +</dl> + +<dl> + <dt><code>border-box</code></dt> + <dd>De<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{Cssxref("width")}} en {{Cssxref("height")}} waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: <code>.box {width: 350px; border: 10px solid black;}</code> resulteert in een gerenderd element met <code>width: 350px</code>. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van <code>border-box</code> een element de doen verdwijnen.</dd> + <dd>De afmetingen worden berekend als volgt: <em>width = border + padding + breedte van de inhoud</em> en <em>height = border + padding + hoogte van de inhoud</em>.</dd> +</dl> + +<h3 id="Formele_syntax">Formele syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">.example { + box-sizing: border-box; +}</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Initiele definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Standaard ondersteuning</td> + <td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br> + 10.0</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("29.0")}}</td> + <td> + <p>8.0<sup>[1]</sup></p> + </td> + <td>7.0</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.1<sup>[2]</sup></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>Standaard ondersteuning</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br> + 4.0</td> + <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]<br> + {{CompatGeckoMobile("29.0")}}</td> + <td>9.0</td> + <td> + <p>7.0 {{property_prefix("-webkit")}}<br> + 10.0</p> + </td> + <td>3.2 {{property_prefix("-webkit")}}<br> + 4.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>box-sizing </code>wordt niet gerespecteerd als de hoogte wordt berekend door {{domxref("window.getComputedStyle()")}}, in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen <code>currentStyle</code> attribuut geeft niet de juiste waarde voor <code>height</code> terug.</p> + +<p>[2] De vendor prefix <code>-webkit</code> is verwijderd sinds <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a></li> +</ul> diff --git a/files/nl/web/css/css_colors/color_picker_tool/index.html b/files/nl/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..ba0fab84d7 --- /dev/null +++ b/files/nl/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3221 @@ +--- +title: Kleurenkiezer-hulpprogramma +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - Hulpmiddelen + - Tools +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Dit hulpmiddel maakt het makkelijk om zelfgekozen kleuren voor het web te maken, aan te passen en hiermee te experimenteren.</span> Ook kunt u hiermee makkelijk naar verschillende soorten kleurindelingen converteren die door CSS worden ondersteund, waaronder HEXA-kleuren, RGB (Rood/Groen/Blauw) en HSL (Hue/Saturation/Lightness - Tint/Verzadiging/Helderheid). Beheer over het alpha-kanaal wordt ook ondersteund op de indelingen RGB (rgba) en HSL (hsla).</p> + +<p>Elke kleur wordt tijdens het aanpassen in alle drie de standaard CSS-indelingen voor het web aangeboden. Daarnaast wordt, gebaseerd op de huidige geselecteerde kleur, zowel een palet voor HSL en HSV als voor alpha gegenereerd. Het kleurenkiezerveld in ‘eyedropper’-stijl kan tussen HSL- en HSV-indeling worden omgeschakeld.</p> + +<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p> + +<p> </p> diff --git a/files/nl/web/css/css_colors/index.html b/files/nl/web/css/css_colors/index.html new file mode 100644 index 0000000000..48b67295d0 --- /dev/null +++ b/files/nl/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="CSS_Data_Types">CSS Data Types</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="Guides">Guides</h2> + +<p><em>None.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</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>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li> +</ul> diff --git a/files/nl/web/css/css_flexible_box_layout/index.html b/files/nl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..879bb404f6 --- /dev/null +++ b/files/nl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Box Layout + - Overzicht + - Referentie +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Flexible Box Layout</strong> is een <a href="/en-US/docs/Web/CSS">CSS</a> module die het box model van CSS verder optimaliseert. Flexbox is geoptimaliseerd voor user interface design en de lay-out van items. Onderliggende items van een flex container kunnen in elke richting worden geplaatst op een as. Afmetingen van items in een flex container zijn flexibel. Zo kunnen afmetingen groeien om de ongebruikte ruimte te vullen, of kunnen ze krimpen om binnen de grenzen van het ouder element te passen.</p> + +<p> + </p><h2 id="Basis_voorbeeld">Basis voorbeeld</h2> + + +<p>In het voorbeeld hieronder is een container ingesteld als <code>display: flex</code> waardoor de drie onderliggende elementen "flex elementen" worden. De waarde van <code>justify-content</code> is ingesteld op <code>space-between</code> om de items gelijkmatig op de hoofdas te plaatsen. Tussen elk item wordt een gelijke hoeveelheid ruimte geplaatst, waarbij de linker- en rechterartikelen gelijk liggen met de randen van de flex container. Op de dwarsas zijn de items uitgetrokken (stretched) tot gelijke hoogte. Dit komt omdat de default waarde voor <code>align-items</code> <code>stretch</code> is. De items strekken zich uit tot de hoogte van de flex container, waardoor ze elk even lang lijken als het langste item.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Referentie">Referentie</h2> + +<h3 id="CSS_Eigenschappen">CSS Eigenschappen</h3> + +<div class="index"> +<ul> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Alignment_Eigenschappen">Alignment Eigenschappen</h3> + +<p>De eigenschappen <code>align-content</code>, <code>align-self</code>, <code>align-items</code> en <code>justify-content</code> waren aanvankelijk onderdeel van de Flexbox-specificatie, maar worden nu gedefinieerd in Box Alignment-specificatie. De Flexbox-specificatie verwijst nu naar de Box Alignment-specificatie voor up-to-date definities. Alsook extra Alignment eigenschappen worden nu gedefinieerd in de Box Alignment-specificatie.</p> + +<div class="index"> +<ul> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("place-items")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Woordenlijst_resultaten">Woordenlijst resultaten</h3> + +<div class="index"> +<ul> + <li>{{Glossary("Flexbox", "", 1)}}</li> + <li>{{Glossary("Flex Container", "", 1)}}</li> + <li>{{Glossary("Flex Item", "", 1)}}</li> + <li>{{Glossary("Main Axis", "", 1)}}</li> + <li>{{Glossary("Cross Axis", "", 1)}}</li> + <li>{{Glossary("Flex", "", 1)}}</li> +</ul> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basisconcepten van Flexbox</a></dt> + <dd>Een overzicht van de eigenschappen van flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Verhouding Flexbox tot andere layout methodes</a></dt> + <dd>Hoe flexbox zich verhoudt tot andere layout methodes, en tot andere CSS-specificaties</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Items uitlijnen in een flex container</a></dt> + <dd>Hoe de Box Alignment-eigenschappen werken met flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Flex items ordenen</a></dt> + <dd>Hoe de volgorde en de richting van items te wijzigen, inclusief geldende aandachtspunten hierbij</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Ratios van flex items langs de hoofdas beheren </a></dt> + <dd>Beschrijving van de eigenschappen <code>flex-grow</code>, <code>flex-shrink</code> en <code>flex-basis</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Wrapping van flex items</a></dt> + <dd>Hoe flex containers creëren met meerdere lijnen, en de de weergave van de items in die lijnen instellen.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typische Flexbox use cases</a></dt> + <dd>Design pattersn voor typische use cases</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Achterwaartse compatibilteit van Flexbox </a></dt> + <dd>Browser status van flexbox, interoperabiliteit en ondersteuning van oudere browsers, en een overzicht van de versies van de specificatie</dd> +</dl> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>een door de community samengestelde lijst met Flexbox gerelateerde browser bugs en workarounds</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt> + <dd>Een verzameling mixins om crossbrowser Flexbox functionaliteiten te voorzien in oudere browsers die de moderne Flexbox syntax niet ondersteunen</dd> +</dl> diff --git a/files/nl/web/css/css_images/index.html b/files/nl/web/css/css_images/index.html new file mode 100644 index 0000000000..f6fb2c9289 --- /dev/null +++ b/files/nl/web/css/css_images/index.html @@ -0,0 +1,152 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Images + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Images +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Images</strong> is a module of CSS that defines what types of images can be used (the {{cssxref("<image>")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("image-orientation")}}</li> + <li>{{cssxref("image-rendering")}}</li> + <li>{{cssxref("object-fit")}}</li> + <li>{{cssxref("object-position")}}</li> +</ul> +</div> + +<h3 id="Functions">Functions</h3> + +<div class="index"> +<ul> + <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li> + <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> + <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> + <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> + <li>{{cssxref("element", "element()")}}</li> +</ul> +</div> + +<h3 id="Data_types">Data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<uri>")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></dt> + <dd>Presents a specific type of CSS images, <em>gradients</em>, and how to create and use these.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implementing image sprites in CSS</a></dt> + <dd>Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Standardizes the <code>-webkit</code> prefixed gradient value functions</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<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>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</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>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/css/css_positioning/index.html b/files/nl/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/nl/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_properties">CSS properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt> + <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> 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/de_stapelcontext/index.html new file mode 100644 index 0000000000..2256b38632 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html @@ -0,0 +1,239 @@ +--- +title: Het stapelverband +slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext +tags: + - CSS + - Geavanceerd + - Gids + - Referentie + - Stapelverband + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p>Het stapelverband <em>(stacking context) </em>is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.</p> + +<h2 id="Het_stapelverband">Het stapelverband</h2> + +<p>In het vorige deel van dit artikel, <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index gebruiken</a>, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een <em>stapelverband</em> vormen.</p> + +<p>Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:</p> + +<ul> + <li>Het root element van het document (<code><html></code>).</li> + <li>Een element met een {{cssxref("position")}} waarde van <code>absolute</code> of <code>relative</code> en een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li> + <li>Een element met een {{cssxref("position")}} waarde van <code>fixed</code> of <code>sticky</code> (sticky voor alle mobiele browsers, maar niet voor die van een verouderde desktop).</li> + <li>Een element dat een kind is van een flex ({{cssxref("flexbox")}}) container, met een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li> + <li>Een element dat een kind is van een grid ({{cssxref("grid")}}) container, met een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li> + <li>Een element met een {{cssxref("opacity")}} waarde anders dan <code>1</code> (Zie ook <a href="http://www.w3.org/TR/css3-color/#transparency">de specificatie voor opacity</a>).</li> + <li>Een element met een {{cssxref("mix-blend-mode")}} waarde anders dan <code>normal</code>.</li> + <li>Een element met een van de volgende eigenschappen anders dan <code>none</code>: + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>Een element met een {{cssxref("isolation")}} waarde van <code>isolate</code>.</li> + <li>Een element met een {{cssxref("-webkit-overflow-scrolling")}} waarde van <code>touch</code>.</li> + <li>Een element met een {{cssxref("will-change")}} waarde die een eigenschap specificeert die een stapelverband op een niet-initiële waarde creeërt (zie <a href="http://dev.opera.com/articles/css-will-change-property/">dit bericht</a>).</li> + <li>Een element met een {{cssxref("contain")}} waarde van <code>layout</code>, of <code>paint</code>, of een samengestelde waarde die een van beide bevat (bijv. <code>contain: strict</code>, <code>contain: content</code>).</li> +</ul> + +<p>Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.</p> + +<p>Samengevat:</p> + +<ul> + <li>Stapelverbanden kunnen zich in andere stapelverbanden bevinden en samen een hiërarchie van stapelverbanden vormen.</li> + <li>Elke stapelverband is volledig onafhankelijk van zijn broers en zussen: alleen kindelementen komen in aanmerking wanneer het stapelen wordt verwerkt.</li> + <li>Elke stapelverband is op zichzelf staand: nadat de inhoud van het element is gestapeld, wordt het hele element bekeken in de stapelvolgorde van de bovenliggende stapelverband.</li> +</ul> + +<div class="note"><strong>Opmerking:</strong> de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden <em>geassimileerd</em> door de ouders' stapelverband.</div> + +<h2 id="Het_voorbeeld"><strong>Het voorbeeld</strong></h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun <code>position</code> en <code>z-index</code> waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:</p> + +<ul> + <li>Root + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <code><html></code>.</p> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>DIV #4 wordt gerenderd onder DIV #1 omdat de z-index (5) van DIV #1 geldig is binnen de stapelverband van het rootelement, terwijl de z-index van DIV #4 (6) geldig is binnen de stapelverband van DIV #3 . DIV #4 staat dus onder DIV #1, omdat DIV #4 tot DIV #3 behoort, die een lagere Z-indexwaarde heeft.</li> + <li>Om dezelfde reden wordt DIV #2 (z-index 2) gerenderd onder DIV #5 (z-index 1) omdat DIV #5 tot DIV #3 behoort, die een hogere Z-indexwaarde heeft.</li> + <li>DIV #3's z-index is 4, maar deze waarde is onafhankelijk van de z-index van DIV #4, DIV #5 en DIV #6, omdat deze behoort tot een andere stapelverband.</li> + <li>Een eenvoudige manier om de weergavevolgorde van gestapelde elementen langs de Z-as te achterhalen, is door het te beschouwen als een "versienummer" van soorten, waarbij onderliggende elementen onder de belangrijkste versienummers van hun bovenliggende niveau kleine versienummers zijn. Op deze manier kunnen we gemakkelijk zien hoe een element met een z-index van 1 (DIV #5) boven een element met een z-index van 2 (DIV #2) wordt gestapeld, en hoe een element met een z-index van 6 (DIV #4) is gestapeld onder een element met een z-index van 5 (DIV #1). In ons voorbeeld (gesorteerd op de uiteindelijke weergave volgorde): + <ul> + <li>Root</li> + <li>DIV #2 - z-index is 2</li> + <li>DIV #3 - z-index is 4 + <ul> + <li>DIV #5 - z-index is 1, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4.1</li> + <li>DIV #6 - z-index is 3, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,3</li> + <li>DIV #4 - z-index is 6, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,6</li> + </ul> + </li> + <li>DIV #1 - z-index is 5</li> + </ul> + </li> +</ul> +</div> + +<h2 id="Voorbeeld"><strong>Voorbeeld</strong></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div> +</pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h3 id="Resultaat">Resultaat</h3> + +<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>Zie ook</strong></span></font></p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapelen zonder de z-index eigenschap</a>: De stapelregels die gelden wanneer de z-index eigenschap niet is gedefinieerd.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapelen met floated blokken</a>: Hoe elementen met een <em>float </em>worden gestapeld.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index gebruiken</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelverband voorbeeld 1</a>: 2-level HTML hiërarchie, <code>z-index</code> op het laatste level</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelverband voorbeeld 2</a>: 2-level HTML hiërarchie, <code>z-index</code> op alle levels</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelverband voorbeeld 3</a>: 3-level HTML hiërarchie, <code>z-index</code> op de tweede level </li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> +</div> diff --git a/files/nl/web/css/css_positioning/understanding_z_index/index.html b/files/nl/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<div>{{cssref}}</div> + +<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p> + +<blockquote> +<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p> +</blockquote> + +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p> + +<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p> + +<p>This article will try to explain those rules, with some simplification and several examples.</p> + +<ol> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li> +</ol> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> + +<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p> +</div> diff --git a/files/nl/web/css/cursor/index.html b/files/nl/web/css/cursor/index.html new file mode 100644 index 0000000000..89504857f5 --- /dev/null +++ b/files/nl/web/css/cursor/index.html @@ -0,0 +1,333 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS eigenschappen + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pijl + - pointer +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<p>het <a href="/en-US/docs/Web/CSS">CSS</a>-eigenschap <strong><code>cursor</code></strong> geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.</p> + +<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> + +<p class="hidden">De bron voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldenproject, kunt u het klonen van <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull-aanvraag.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +cursor: pointer; +cursor: auto; + +/* URL, with a keyword fallback */ +cursor: url(hand.cur), pointer; + +/* URL and coordinates, with a keyword fallback */ +cursor: url(cursor1.png) 4 12, auto; +cursor: url(cursor2.png) 2 2, pointer; + +/* Global values */ +cursor: inherit; +cursor: initial; +cursor: unset; +</pre> + +<p>De eigenschap <code>cursor</code> wordt opgegeven als geen of meer <code><a href="#<url>"><url></a></code> waarden, gescheiden door komma's, gevolgd door één verplichte <a href="#Keyword values">zoekwoordwaarde</a>. Elke <code><url></code> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).</p> + +<p>Elke <code><url></code> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten <code><a href="#<x> <y>"><x><y></a></code> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.</p> + +<p>Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <code><url></code> waarden, voorzien van <code><x><y></code> coördinaten voor de tweede en terugvallen op de <code>progress</code> sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:</p> + +<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<url>" name="<url>"><code><url></code></a></dt> + <dd>Een <code>url(…)</code> of een door komma's gescheiden lijst <code>url(…), url(…), …</code>, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("<url>")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) <em>moet </em>aan het einde van de fallback-lijst staan. Zie <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">URL-waarden gebruiken voor de cursoreigenschapsing </a>voor meer informatie.</dd> + <dt><a name="<x> <y>"><code><x></code> <code><y></code> </a>{{experimental_inline}}</dt> + <dd>Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.</dd> + <dt><a id="Keyword values" name="Keyword values">Keyword values</a></dt> + <dd> + <p><em>Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:</em></p> + + <table class="standard-table"> + <tbody> + <tr> + <th>Categorie</th> + <th style="width: 7.5em;">CSS value</th> + <th>Actual</th> + <th>Description</th> + </tr> + <tr style="cursor: auto;"> + <td rowspan="3">Algemeen</td> + <td><code>auto</code></td> + <td></td> + <td>De browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, <code>text</code> bij zwevende tekst.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td>De platform afhankelijke basis cursor. Het is meestal een pijl.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td></td> + <td>Er wordt geen cursor weergegeven.</td> + </tr> + <tr style="cursor: context-menu;"> + <td rowspan="5" style="cursor: auto;">Links & status</td> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td>Een contextmenu is beschikbaar.</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td>Help-informatie is beschikbaar.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td>Het element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td>Het programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met <code>wait</code>).</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td>Het programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met <code>progress</code>). Is soms een afbeelding van een zandloper of van een horloge.</td> + </tr> + <tr style="cursor: cell;"> + <td rowspan="4" style="cursor: auto;">Selection</td> + <td><code>cell</code></td> + <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td> + <p>De tabel cel kan geslecteerd worden.</p> + </td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td> + <p>Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.</p> + </td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td>De tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td>De verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.</td> + </tr> + <tr style="cursor: alias;"> + <td rowspan="5" style="cursor: auto;">Drag & drop</td> + <td><code>alias</code></td> + <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td>Een alias of shortcut wordt gecreëerd.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td>Iets kan worden gekopieerd.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td>Iets kan worden verplaatst.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td>Een item mag niet op de huidige locatie worden geplaatst.<br> + {{bug("275173")}}: Op Windows en Mac OS X, <code>no-drop</code> is hetzelfde als <code>not-allowed</code>.</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td>Iets kan niet worden gedaan.</td> + </tr> + <tr style="cursor: all-scroll;"> + <td rowspan="15" style="cursor: auto;">Resize & scrolling</td> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td>Iets kan gescrold worden in elke richting (pannend).<br> + {{bug("275174")}}: Op Windows, <code>all-scroll</code> is hetzelfde als <code>move</code>.</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td>De item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td>De item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td rowspan="8" style="cursor: auto;"> + <p>Een rand kan bewogen worden. Bijvoorbeeld de <code>se-resize</code> cursor wordt gebruikt waneer een beweging start van de <em>zuid-oost</em> hoek van een box.</p> + + <p>In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, <code>n-resize</code> en<code>s-resize</code> zijn hetzelfde als <code>ns-resize</code>.</p> + </td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td rowspan="4" style="cursor: auto;">Bi-directioneel resize cursor.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;"> + <td rowspan="2">Zoom</td> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Iets kan worden in- of uitvergroot.</p> + </td> + </tr> + <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;"> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> + <td rowspan="2">Grab</td> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)</p> + </td> + </tr> + <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>Hoewel de specificaties geen grootte limitaties defineerd voor <code>cursor</code>, kunnen individuele{{Glossary("user agent", "user agents")}} kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.</p> + +<p>Controleer de {{anch("Browser compatibility")}} tabel voor notities i.v.m. cursor grootte limieten.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">.foo { + cursor: crosshair; +} + +.bar { + cursor: zoom-in; +} + +/* A fallback keyword value is required when using a URL */ +.baz { + cursor: url("hyper.cur"), auto; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor <code>url()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initiële definitie.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + + + +<p>{{Compat("css.properties.cursor")}}</p> + + + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li> + <li>{{cssxref("pointer-events")}}</li> + <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li> +</ul> diff --git a/files/nl/web/css/index.html b/files/nl/web/css/index.html new file mode 100644 index 0000000000..1e924e4470 --- /dev/null +++ b/files/nl/web/css/index.html @@ -0,0 +1,65 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Layout + - Ontwerp + - Referentie + - Verdeling +translation_of: Web/CSS +--- +<p><strong>CSS </strong>is één van de basistalen van het <em>open web</em> en heeft een gestandaardiseerde <a href="http://w3.org/Style/CSS/#specs">W3C-specificatie</a>. De taal is ontwikkeld in niveau's; CSS1 is nu verouderd, CSS2.1 is een aanbeveling en <a href="/en-US/docs/CSS/CSS3">CSS3</a>, nu opgesplitst in kleinere modules, is op weg naar de standaard.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS referentie</span> + + <p>Een <a href="/en-US/docs/Web/CSS/Reference">grondige referentie</a> voor doorgewinterde webdevelopers die elke eigenschap en elk concept van CSS beschrijft.</p> + </li> + <li><span>CSS tutorials</span> + <p>Een <a href="/nl/docs/Learn/CSS/Introduction_to_CSS" title="en-US/docs/CSS/Getting_Started">stap-voor-stap introductie</a> om volledige beginners te helpen starten. Het presenteert alle nodige fundamenten.</p> + </li> + <li><span>CSS3 demo's</span> + <p>Een <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collectie van demo's</a> die de laatste technologieën van CSS toont: een boost voor de creativiteit.</p> + </li> +</ul> + +<div class="row topicpage-table"> + + +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentatie en tutorials</h2> + +<dl> + <dt>CSS sleutelbegrippen</dt> + <dd>Beschrijft de <a href="/en-US/docs/CSS/Syntax">syntax en vormt de taal</a> en introduceert grondbeginselen zoals <a href="/en-US/docs/CSS/Specificity">specificity </a>en <a href="/en-US/docs/CSS/inheritance">inheritance</a>, het <a href="/en-US/docs/CSS/box_model">box model</a> en <a href="/en-US/docs/CSS/margin_collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">stacking</a> en <a href="/en-US/docs/CSS/block_formatting_context">block-formatting</a> contexten, of de <a href="/en-US/docs/CSS/initial_value">initiële</a>, <a href="/en-US/docs/CSS/computed_value">berekende</a>, <a href="/en-US/docs/CSS/used_value">gebruikte </a>en <a href="/nl/docs/">actuele </a>waarden. Entiteiten zoals <a href="/en-US/docs/CSS/Shorthand_properties">CSS shorthand properties</a> zijn ook beschreven.</dd> + <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">CSS developer gids</a></dt> + <dd>Artikelen die je helpen met alles leren over CSS. Van de basis van het stijlen van HTML met CSS tot verschillende CSS-technieken die je inhoud gaan doen sprankelen.</dd> + <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Vaakgestelde CSS vragen</a></dt> + <dd>Antwoorden op vaakgestelde <strong>CSS </strong>vragen.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Hulpmiddelen voor CSS-ontwikkeling</h2> + +<ul> + <li>De <a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validatie Service</a> kijkt of een gegeven CSS correct is. De service <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> doet hetzelfde. Beide zijn onschatbare hulpmiddelen.</li> + <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> staat je toe om live de CSS van de webpagina te bekijken en aan te passen via de <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> en de <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extensie</a> voor Firefox, een populaire extensie staat je toe om live CSS aan te passen op bekeken websites. Dit is ideaal om aanpassingen te testen, al kan deze tool veel meer dan dat.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extensie</a> voor Firefox staat je ook toe om live CSS te bekijken en aan te passen op bekeken websites. Gemakkelijker dan Firebug, maar ook minder krachtig.</li> + <li><a href="/en-US/docs/Web/CSS/Tools">CSS tools</a>.</li> +</ul> +</div> +</div> +</section> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Mozilla's <a href="/en-US/Learn/CSS">Leer CSS sectie</a></li> + <li>Webtalen waarop CSS vaak wordt toegepast: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a> en <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> + <li>Mozilla technologieën die gebruik maken van CSS: <a href="/en-US/docs/Mozilla/Tech/XUL" title="en-US/docs/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, en <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensies</a> en <a href="/en-US/Add-ons/Themes" title="en-US/docs/Themes">thema's</a>.</li> +</ul> diff --git a/files/nl/web/css/padding-bottom/index.html b/files/nl/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..610b476082 --- /dev/null +++ b/files/nl/web/css/padding-bottom/index.html @@ -0,0 +1,101 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +<div>{{CSSRef}}</div> + +<p>De <a href="/nl/CSS" title="CSS">CSS</a>-eigenschap <strong><code>padding-bottom</code></strong> stelt de hoogte in van de vulling aan de onderkant van een element. Voor padding is het, in tegenstelling tot margins, niet toegestaan om negatieve waarden te gebruiken. De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-bottom: 0.5em; +padding-bottom: 0; +padding-bottom: 2cm; + +/* <percentage> value */ +padding-bottom: 10%; + +/* Global values */ +padding-bottom: inherit; +padding-bottom: initial; +padding-bottom: unset; +</pre> + +<p>De <a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">paddingruimte</a> is de ruimte tussen de inhoud en de rand van een element.</p> + +<p><img alt="The effect of the CSS padding-bottom property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<h3 id="Waarden">Waarden</h3> + +<dl> + <dt>{{cssxref("length")}}</dt> + <dd>De grootte van de padding als vaste waarde. Mag niet negatief zijn.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>De grootte van de padding als een percentage, relatief aan de <em>breedte</em> van het element waarin het betreffende element staat. Mag niet negatief zijn.</dd> +</dl> + +<h3 id="Formele_syntaxis">Formele syntaxis</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="eval">.content { padding-bottom: 5%; } +.sidebox { padding-bottom: 10px; } +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Geen verandering ten opzichte van {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Definieert <code>padding-bottom</code> als animeerbaar.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Geen verandering ten opzichte van {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Aanvankelijke definitie.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + + + +<p>{{Compat("css.properties.padding-bottom")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Boxmodel</a></li> + <li>De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, <code>padding-bottom</code> en {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/nl/web/css/voor_beginners/index.html b/files/nl/web/css/voor_beginners/index.html new file mode 100644 index 0000000000..b80da7dc12 --- /dev/null +++ b/files/nl/web/css/voor_beginners/index.html @@ -0,0 +1,62 @@ +--- +title: Voor Beginners +slug: Web/CSS/Voor_Beginners +translation_of: Learn/CSS/First_steps +--- +<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/events/index.html b/files/nl/web/events/index.html new file mode 100644 index 0000000000..e0209abfd1 --- /dev/null +++ b/files/nl/web/events/index.html @@ -0,0 +1,2044 @@ +--- +title: Event referentie +slug: Web/Events +translation_of: Web/Events +--- +<p><span class="seoSummary">DOM-evenementen worden verzonden om de code te informeren over interessante dingen die hebben plaatsgevonden. Elk evenement wordt vertegenwoordigd door een object dat gebaseerd is op de </span>{{domxref("Event")}} interface<span class="seoSummary"> en kan aanvullende aangepaste velden en / of functies hebben die worden gebruikt om aanvullende informatie te krijgen over wat er is gebeurd. Evenementen kunnen alles vertegenwoordigen, van elementaire gebruikersinteracties tot geautomatiseerde meldingen van dingen die gebeuren in het renderingmodel.</span></p> + +<p><span class="seoSummary">Dit artikel biedt een lijst met evenementen die kunnen worden verzonden; sommige zijn standaardgebeurtenissen die zijn gedefinieerd in officiële specificaties, terwijl andere gebeurtenissen zijn die intern worden gebruikt door specifieke browsers; zo worden Mozilla-specifieke evenementen vermeld, zodat <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons">add-ons</a> deze kunnen gebruiken om met de browser te communiceren.</span></p> + +<h2 id="Standaard_events">Standaard events</h2> + +<p>Deze evenementen zijn gedefinieerd in officiële webspecificaties en moeten in alle browsers voorkomen. Elk event wordt vermeld samen met de interface die het object vertegenwoordigt dat naar de ontvangers van het event is gestuurd (zodat u informatie kunt vinden over welke gegevens bij welk event worden geleverd), evenals een link naar de specificatie of specificaties die de gebeurtenis definiëren.</p> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Naam</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td>{{event("abort")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td> + <td>The loading of a resource has been aborted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> + <td>Progression has been terminated (not due to an error).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A transaction has been aborted.</td> + </tr> + <tr> + <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document has started printing or the print preview has been closed.</td> + </tr> + <tr> + <td>{{event("animationend")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td> + </tr> + <tr> + <td>{{event("animationiteration")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td> + </tr> + <tr> + <td>{{event("animationstart")}}</td> + <td>{{domxref("AnimationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td> + </tr> + <tr> + <td>{{event("audioprocess")}}</td> + <td>{{domxref("AudioProcessingEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> + <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>The associated document is about to be printed or previewed for printing.</td> + </tr> + <tr> + <td>{{event("beforeunload")}}</td> + <td>{{domxref("BeforeUnloadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td> + <td></td> + </tr> + <tr> + <td>{{event("beginEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> + <td></td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> + </tr> + <tr> + <td>{{event("blur")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td> + <td>An element has lost focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("cached")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td> + </tr> + <tr> + <td>{{event("canplay")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td> + <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{event("canplaythrough")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td> + <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> + <td>An element loses focus and its value changed since gaining focus.</td> + </tr> + <tr> + <td>{{event("chargingchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The battery begins or stops charging.</td> + </tr> + <tr> + <td>{{event("chargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>chargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("checking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("click")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td> + <td>A pointing device button has been pressed and released on an element.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed.</td> + </tr> + <tr> + <td>{{event("compassneedscalibration")}}</td> + <td>{{domxref("SensorEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#compassneedscalibration">Orientation</a></td> + <td>The compass used to obtain orientation data is in need of calibration.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> + <td></td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> + <td></td> + </tr> + <tr> + <td>{{event("complete")}}</td> + <td>{{domxref("OfflineAudioCompletionEvent")}}</td> + <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> + <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + <tr> + <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td> + <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td> + </tr> + <tr> + <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td> + <td>{{domxref("CompositionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{event("contextmenu")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> + <td>The right button of the mouse is clicked (before the context menu is displayed).</td> + </tr> + <tr> + <td>{{event("copy")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> + <td>The text selection has been added to the clipboard.</td> + </tr> + <tr> + <td>{{event("cut")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> + <td>The text selection has been removed from the document and added to the clipboard.</td> + </tr> + <tr> + <td>{{event("dblclick")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td> + <td>A pointing device button is clicked twice on an element.</td> + </tr> + <tr> + <td>{{event("devicelight")}}</td> + <td>{{domxref("DeviceLightEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td> + <td>Fresh data is available from a light sensor.</td> + </tr> + <tr> + <td>{{event("devicemotion")}}</td> + <td>{{domxref("DeviceMotionEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from a motion sensor.</td> + </tr> + <tr> + <td>{{event("deviceorientation")}}</td> + <td>{{domxref("DeviceOrientationEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from an orientation sensor.</td> + </tr> + <tr> + <td>{{event("deviceproximity")}}</td> + <td>{{domxref("DeviceProximityEvent")}}</td> + <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td> + <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td> + </tr> + <tr> + <td>{{event("dischargingtimechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>dischargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td><code>DOMActivate</code> {{deprecated_inline}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td> + <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td> + <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td> + <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td> + <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("DOMContentLoaded")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> + <td>The document has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationNameEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td> + <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code>DOMFocusIn</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td> + <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td> + </tr> + <tr> + <td><code>DOMFocusOut</code> {{deprecated_inline}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td> + <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td> + <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td> + <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td> + <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td> + <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td> + <td>{{domxref("MutationEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td> + <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{event("downloading")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td> + </tr> + <tr> + <td>{{event("drag")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> + <td>An element or text selection is being dragged (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragend")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> + <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> + </tr> + <tr> + <td>{{event("dragenter")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> + <td>A dragged element or text selection enters a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragleave")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> + <td>A dragged element or text selection leaves a valid drop target.</td> + </tr> + <tr> + <td>{{event("dragover")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> + <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> + </tr> + <tr> + <td>{{event("dragstart")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> + <td>The user starts dragging an element or text selection.</td> + </tr> + <tr> + <td>{{event("drop")}}</td> + <td>{{domxref("DragEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> + <td>An element is dropped on a valid drop target.</td> + </tr> + <tr> + <td>{{event("durationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("emptied")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{event("ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{event("ended_(Web_Audio)", "ended")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td> + <td></td> + </tr> + <tr> + <td>{{event("endEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td> + <td>A resource failed to load.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> + <td>Progression has failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>An error occurred while downloading the cache manifest or updating the content of the application.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been failed.</td> + </tr> + <tr> + <td>{{event("error")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request caused an error and failed.</td> + </tr> + <tr> + <td>{{event("focus")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td> + <td>An element has received focus (does not bubble).</td> + </tr> + <tr> + <td>{{event("focusin")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td> + <td>An element is about to receive focus (bubbles).</td> + </tr> + <tr> + <td>{{event("focusout")}}</td> + <td>{{domxref("FocusEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td> + <td>An element is about to lose focus (bubbles).</td> + </tr> + <tr> + <td>{{event("fullscreenchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{event("fullscreenerror")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("gamepadconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> + <td>A gamepad has been connected.</td> + </tr> + <tr> + <td>{{event("gamepaddisconnected")}}</td> + <td>{{domxref("GamepadEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> + <td>A gamepad has been disconnected.</td> + </tr> + <tr> + <td>{{event("gotpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> + <td>Element receives pointer capture.</td> + </tr> + <tr> + <td>{{event("hashchange")}}</td> + <td>{{domxref("HashChangeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> + <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> + </tr> + <tr> + <td>{{event("lostpointercapture")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> + <td>Element lost pointer capture.</td> + </tr> + <tr> + <td>{{event("input")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> + <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> + </tr> + <tr> + <td>{{event("invalid")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> + <td>A submittable element has been checked and doesn't satisfy its constraints.</td> + </tr> + <tr> + <td>{{event("keydown")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td> + <td>A key is pressed down.</td> + </tr> + <tr> + <td>{{event("keypress")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td> + <td>A key is pressed down and that key normally produces a character value (use input instead).</td> + </tr> + <tr> + <td>{{event("keyup")}}</td> + <td>{{domxref("KeyboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td> + <td>A key is released.</td> + </tr> + <tr> + <td>{{event("languagechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td></td> + </tr> + <tr> + <td>{{event("levelchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>level</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("load")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td> + <td>A resource and its dependent resources have finished loading.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{event("loadeddata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{event("loadedmetadata")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{event("loadend")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + <tr> + <td>{{event("loadstart")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> + <td>Progress has begun.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A message is received through a WebSocket.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> + <td>A message is received from a Web Worker.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> + <td>A message is received from a child (i)frame or a parent window.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> + <td>{{domxref("MessageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>A message is received through an event source.</td> + </tr> + <tr> + <td>{{event("mousedown")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td> + <td>A pointing device button (usually a mouse) is pressed on an element.</td> + </tr> + <tr> + <td>{{event("mouseenter")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mouseleave")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached.</td> + </tr> + <tr> + <td>{{event("mousemove")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td> + <td>A pointing device is moved over an element.</td> + </tr> + <tr> + <td>{{event("mouseout")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> + </tr> + <tr> + <td>{{event("mouseover")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> + </tr> + <tr> + <td>{{event("mouseup")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td> + <td>A pointing device button is released over an element.</td> + </tr> + <tr> + <td>{{event("noupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest hadn't changed.</td> + </tr> + <tr> + <td>{{event("obsolete")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td> + </tr> + <tr> + <td>{{event("offline")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> + <td>The browser has lost access to the network.</td> + </tr> + <tr> + <td>{{event("online")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> + <td>The browser has gained access to the network (but particular websites might be unreachable).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been established.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been established.</td> + </tr> + <tr> + <td>{{event("orientationchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> + <td>The orientation of the device (portrait/landscape) has changed</td> + </tr> + <tr> + <td>{{event("pagehide")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{event("pageshow")}}</td> + <td>{{domxref("PageTransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{event("paste")}}</td> + <td>{{domxref("ClipboardEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> + <td>Data has been transfered from the system clipboard to the document.</td> + </tr> + <tr> + <td>{{event("pause")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{event("pointercancel")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> + <td>The pointer is unlikely to produce any more events.</td> + </tr> + <tr> + <td>{{event("pointerdown")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> + <td>The pointer enters the active buttons state.</td> + </tr> + <tr> + <td>{{event("pointerenter")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> + <td>Pointing device is moved inside the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerleave")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> + <td>Pointing device is moved out of the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerlockchange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>The pointer was locked or released.</td> + </tr> + <tr> + <td>{{event("pointerlockerror")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{event("pointermove")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> + <td>The pointer changed coordinates.</td> + </tr> + <tr> + <td>{{event("pointerout")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> + <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> + </tr> + <tr> + <td>{{event("pointerover")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> + <td>The pointing device is moved into the hit-testing boundary.</td> + </tr> + <tr> + <td>{{event("pointerup")}}</td> + <td>{{domxref("PointerEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> + <td>The pointer leaves the active buttons state.</td> + </tr> + <tr> + <td>{{event("play")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{event("playing")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{event("popstate")}}</td> + <td>{{domxref("PopStateEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + <tr> + <td>{{event("progress")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> + <td>In progress.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td> + <td>The user agent is downloading resources listed by the manifest.</td> + </tr> + <tr> + <td>{{event("ratechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{event("readystatechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> + <td>The readyState attribute of a document has changed.</td> + </tr> + <tr> + <td>{{event("repeatEvent")}}</td> + <td>{{domxref("TimeEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> + </tr> + <tr> + <td>{{event("reset")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> + <td>A form is reset.</td> + </tr> + <tr> + <td>{{event("resize")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{event("scroll")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td> + <td>The document view or an element has been scrolled.</td> + </tr> + <tr> + <td>{{event("seeked")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{event("seeking")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{event("select")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td> + <td>Some text is being selected.</td> + </tr> + <tr> + <td>{{event("show")}}</td> + <td>{{domxref("MouseEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> + <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> + </tr> + <tr> + <td>{{event("stalled")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{event("storage")}}</td> + <td>{{domxref("StorageEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> + <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> + </tr> + <tr> + <td>{{event("submit")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + <td>A form is submitted.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request successfully completed.</td> + </tr> + <tr> + <td>{{event("suspend")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{event("SVGAbort")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGError")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{event("SVGLoad")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td> + </tr> + <tr> + <td>{{event("SVGResize")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td> + </tr> + <tr> + <td>{{event("SVGScroll")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td> + </tr> + <tr> + <td>{{event("SVGUnload")}}</td> + <td>{{domxref("SVGEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td> + </tr> + <tr> + <td>{{event("SVGZoom")}}</td> + <td>{{domxref("SVGZoomEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td> + </tr> + <tr> + <td>{{event("timeout")}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> + <td></td> + </tr> + <tr> + <td>{{event("timeupdate")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{event("touchcancel")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> + <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> + </tr> + <tr> + <td>{{event("touchend")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> + <td>A touch point is removed from the touch surface.</td> + </tr> + <tr> + <td>{{event("touchenter")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> + <td>A touch point is moved onto the interactive area of an element.</td> + </tr> + <tr> + <td>{{event("touchleave")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td> + <td>A touch point is moved off the interactive area of an element.</td> + </tr> + <tr> + <td>{{event("touchmove")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> + <td>A touch point is moved along the touch surface.</td> + </tr> + <tr> + <td>{{event("touchstart")}}</td> + <td>{{domxref("TouchEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> + <td>A touch point is placed on the touch surface.</td> + </tr> + <tr> + <td>{{event("transitionend")}}</td> + <td>{{domxref("TransitionEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> + <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> + </tr> + <tr> + <td>{{event("unload")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td> + <td>The document or a dependent resource is being unloaded.</td> + </tr> + <tr> + <td>{{event("updateready")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td> + <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> + <td></td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> + </tr> + <tr> + <td>{{event("userproximity")}}</td> + <td>{{domxref("SensorEvent")}}</td> + <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td> + <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> + <td></td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A <code>versionchange</code> transaction completed.</td> + </tr> + <tr> + <td>{{event("visibilitychange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> + <td>The content of a tab has become visible or has been hidden.</td> + </tr> + <tr> + <td>{{event("volumechange")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{event("waiting")}}</td> + <td>{{domxref("Event")}}</td> + <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + <tr> + <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td> + <td>{{domxref("WheelEvent")}}</td> + <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td> + <td>A wheel button of a pointing device is rotated in any direction.</td> + </tr> + </tbody> +</table> + +<h2 id="Niet_standaard_events">Niet standaard events</h2> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td>{{event("afterscriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script has been executed.</td> + </tr> + <tr> + <td>{{event("beforescriptexecute")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script is about to be executed.</td> + </tr> + <tr> + <td>{{event("beforeinstallprompt")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Chrome specific</em></td> + <td>A user is prompted to save a web site to a home screen on mobile.</td> + </tr> + <tr> + <td>{{event("cardstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td> + </tr> + <tr> + <td>{{event("change")}}</td> + <td>{{domxref("DeviceStorageChangeEvent")}}</td> + <td><em>Firefox OS specific</em></td> + <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> + </tr> + <tr> + <td>{{event("connectionInfoUpdate")}}</td> + <td></td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td> + <td>The informations about the signal strength and the link speed have been updated.</td> + </tr> + <tr> + <td>{{event("cfstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The call forwarding state changes.</td> + </tr> + <tr> + <td>{{event("datachange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td> + </tr> + <tr> + <td>{{event("dataerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> + </tr> + <tr> + <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td> + </tr> + <tr> + <td><code>dragdrop</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>An element is dropped (use {{event("drop")}} instead).</td> + </tr> + <tr> + <td><code>dragexit</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>A drag operation is being ended(use {{event("dragend")}} instead).</td> + </tr> + <tr> + <td><code>draggesture</code> {{deprecated_inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td> + </tr> + <tr> + <td>{{event("icccardlockerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td> + </tr> + <tr> + <td>{{event("iccinfochange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td> + </tr> + <tr> + <td>{{event("localized")}}</td> + <td></td> + <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> + <td>The page has been localized using data-l10n-* attributes.</td> + </tr> + <tr> + <td>{{event("mousewheel")}}{{deprecated_inline}}</td> + <td></td> + <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> + <td>The wheel button of a pointing device is rotated.</td> + </tr> + <tr> + <td>{{event("MozAudioAvailable")}}</td> + <td>{{domxref("Event")}}</td> + <td><em>Mozilla specific</em></td> + <td>The audio buffer is full and the corresponding raw samples are available.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A window is about to be resized.</td> + </tr> + <tr> + <td>{{event("mozbrowserclose")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when window.close() is called within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowsercontextmenu")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> + </tr> + <tr> + <td>{{event("mozbrowsererror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when an error occured while trying to load a content within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowsericonchange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when the favicon of a browser iframe changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserlocationchange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when an browser iframe's location changes.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadend")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when the browser iframe has finished loading all its assets.</td> + </tr> + <tr> + <td>{{event("mozbrowserloadstart")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when the browser iframe starts to load a new page.</td> + </tr> + <tr> + <td>{{event("mozbrowseropenwindow")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowsersecuritychange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when the SSL state changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("mozbrowsershowmodalprompt")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td> + </tr> + <tr> + <td>{{event("mozbrowsertitlechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Sent when the document.title changes within a browser iframe.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonDown")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td>A gamepad button is pressed down.</td> + </tr> + <tr> + <td>{{event("MozGamepadButtonUp")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td>A gamepad button is released.</td> + </tr> + <tr> + <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> + </tr> + <tr> + <td>{{event("MozOrientation")}} {{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> + </tr> + <tr> + <td>{{event("MozScrolledAreaChanged")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>The document view has been scrolled or resized.</td> + </tr> + <tr> + <td>{{event("moztimechange")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The time of the device has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is placed on the touch surface (use touchstart instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is moved along the touch surface (use touchmove instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is removed from the touch surface (use touchend instead).</td> + </tr> + <tr> + <td>{{event("alerting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The correspondent is being alerted (his/her phone is ringing).</td> + </tr> + <tr> + <td>{{event("busy")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The line of the correspondent is busy.</td> + </tr> + <tr> + <td>{{event("callschanged")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been added or removed from the list of current calls.</td> + </tr> + <tr> + <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been connected.</td> + </tr> + <tr> + <td>{{event("connecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to connect.</td> + </tr> + <tr> + <td>{{event("delivered")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been successfully delivered.</td> + </tr> + <tr> + <td>{{event("dialing")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The number of a correspondent has been dialed.</td> + </tr> + <tr> + <td>{{event("disabled")}}</td> + <td></td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been disabled on the device.</td> + </tr> + <tr> + <td>{{event("disconnected")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been disconnected.</td> + </tr> + <tr> + <td>{{event("disconnecting")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to disconnect.</td> + </tr> + <tr> + <td>{{event("enabled")}}</td> + <td></td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td> + <td>Wifi has been enabled on the device.</td> + </tr> + <tr> + <td>{{event("error_(Telephony)","error")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>An error occurred.</td> + </tr> + <tr> + <td>{{event("held")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been held.</td> + </tr> + <tr> + <td>{{event("holding")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to be held.</td> + </tr> + <tr> + <td>{{event("incoming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is being received.</td> + </tr> + <tr> + <td>{{event("received")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been received.</td> + </tr> + <tr> + <td>{{event("resuming")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to resume.</td> + </tr> + <tr> + <td>{{event("sent")}}</td> + <td>{{domxref("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been sent.</td> + </tr> + <tr> + <td>{{event("statechange")}}</td> + <td>{{domxref("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The state of a call has changed.</td> + </tr> + <tr> + <td>{{event("statuschange")}}</td> + <td></td> + <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td> + <td>The status of the Wifi connection changed.</td> + </tr> + <tr> + <td>{{event("overflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td>{{event("smartcard-insert")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> + </tr> + <tr> + <td>{{event("smartcard-remove")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td> + </tr> + <tr> + <td>{{event("stkcommand")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{event("stksessionend")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td><code>text</code></td> + <td></td> + <td><em>Mozilla Specific</em></td> + <td>A generic composition event occurred.</td> + </tr> + <tr> + <td>{{event("underflow")}}</td> + <td>{{domxref("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td><code>uploadprogress</code> {{deprecated_inline}}</td> + <td>{{domxref("ProgressEvent")}}</td> + <td><em>Mozilla Specific</em></td> + <td>Upload is in progress (see {{event("progress")}}).</td> + </tr> + <tr> + <td> + <p>{{event("ussdreceived")}}</p> + </td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> + </tr> + <tr> + <td>{{event("voicechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td> + </tr> + </tbody> +</table> + +<h2 id="Mozilla-specific_events">Mozilla-specific events</h2> + +<div class="note"> +<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p> +</div> + +<h3 id="XUL_events">XUL events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td>{{event("broadcast")}}</td> + <td></td> + <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> + <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> + </tr> + <tr> + <td>{{event("CheckboxStateChange")}}</td> + <td></td> + <td>XUL</td> + <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td> + <td></td> + <td>XUL</td> + <td>The close button of the window has been clicked.</td> + </tr> + <tr> + <td>{{event("command")}}</td> + <td></td> + <td>XUL</td> + <td>An element has been activated.</td> + </tr> + <tr> + <td>{{event("commandupdate")}}</td> + <td></td> + <td>XUL</td> + <td>A command update occurred on a <code>commandset</code> element.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemActive")}}</td> + <td></td> + <td>XUL</td> + <td>A menu or menuitem has been hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("DOMMenuItemInactive")}}</td> + <td></td> + <td><em>XUL</em></td> + <td>A menu or menuitem is no longer hovered or highlighted.</td> + </tr> + <tr> + <td>{{event("popuphidden")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has been hidden.</td> + </tr> + <tr> + <td>{{event("popuphiding")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to be hidden.</td> + </tr> + <tr> + <td>{{event("popupshowing")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to become visible.</td> + </tr> + <tr> + <td>{{event("popupshown")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has become visible.</td> + </tr> + <tr> + <td>{{event("RadioStateChange")}}</td> + <td></td> + <td>XUL</td> + <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td>{{event("ValueChange")}}</td> + <td></td> + <td>XUL</td> + <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> + </tr> + </tbody> +</table> + +<h3 id="Add-on-specific_events">Add-on-specific events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points start to move away from each other.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points start to rotate around a point.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points are tapped on the touch surface.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Content has been repainted.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A popup has been blocked</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window has been created.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window is about to be closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>The title of a window has changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>A link has been added a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>A link has been removed inside from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been added to a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been removed from a document.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A modal dialog is about to open.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A modal dialog has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The content of an element has been auto-completed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The frame has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Browser fullscreen mode has been entered or left.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this window.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this tab.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab is about to be restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been restored.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "ready".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "busy".</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The search feature of Panorama has been activated</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The search feature of Panorama has been deactivated</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The frame container of Panorama has been initialized</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The Panorama tab has been shown</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The Panorama tab has been hidden</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been opened.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been closed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been selected.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been shown.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been hidden.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been pinned.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been unpinned.</td> + </tr> + </tbody> +</table> + +<h3 id="Developer_tool-specifieke_events">Developer tool-specifieke events</h3> + +<table class="standard-table" style="width: 100%;"> + <tbody> + <tr> + <th class="header" style="width: 220px;">Event Name</th> + <th class="header" style="width: 90px;">Event Type</th> + <th class="header" style="width: 100px;">Specification</th> + <th class="header">Fired when...</th> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been updated.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> + </tr> + </tbody> +</table> + +<h2 id="Categorieën">Categorieën</h2> + +<h3 id="Animatie_events">Animatie events</h3> + +<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p> + +<h3 id="Batterij_events">Batterij events</h3> + +<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p> + +<h3 id="Call_events">Call events</h3> + +<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p> + +<h3 id="CSS_events">CSS events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p> + +<h3 id="Database_events">Database events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> + +<h3 id="Document_events">Document events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p> + +<h3 id="DOM_mutation_events">DOM mutation events</h3> + +<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> + +<h3 id="Drag_events">Drag events</h3> + +<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p> + +<h3 id="Element_events">Element events</h3> + +<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p> + +<h3 id="Focus_events">Focus events</h3> + +<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p> + +<h3 id="Form_events">Form events</h3> + +<p>{{event("reset")}}, {{event("submit")}}</p> + +<h3 id="Frame_events">Frame events</h3> + +<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p> + +<h3 id="Input_device_events">Input device events</h3> + +<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p> + +<h3 id="Media_events">Media events</h3> + +<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p> + +<h3 id="Menu_events">Menu events</h3> + +<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p> + +<h3 id="Network_events">Network events</h3> + +<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p> + +<h3 id="Notification_events">Notification events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p> + +<h3 id="Pointer_events">Pointer events</h3> + +<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p> + +<h3 id="Popup_events">Popup events</h3> + +<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p> + +<h3 id="Printing_events">Printing events</h3> + +<p>{{event("afterprint")}}, {{event("beforeprint")}}</p> + +<h3 id="Progress_events">Progress events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p> + +<h3 id="Resource_events">Resource events</h3> + +<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p> + +<h3 id="Script_events">Script events</h3> + +<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p> + +<h3 id="Sensor_events">Sensor events</h3> + +<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p> + +<h3 id="Session_history_events">Session history events</h3> + +<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p> + +<h3 id="Smartcard_events">Smartcard events</h3> + +<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p> + +<h3 id="SMS_and_USSD_events">SMS and USSD events</h3> + +<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p> + +<h3 id="Storage_events">Storage events</h3> + +<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p> + +<h3 id="SVG_events">SVG events</h3> + +<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p> + +<h3 id="Tab_events">Tab events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p> + +<h3 id="Text_events">Text events</h3> + +<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p> + +<h3 id="Touch_events">Touch events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p> + +<h3 id="Update_events">Update events</h3> + +<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p> + +<h3 id="Value_change_events">Value change events</h3> + +<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p> + +<h3 id="View_events">View events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p> + +<h3 id="Websocket_events">Websocket events</h3> + +<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p> + +<h3 id="Window_events">Window events</h3> + +<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p> + +<h3 id="Uncategorized_events">Uncategorized events</h3> + +<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Event")}}</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> +</ul> diff --git a/files/nl/web/events/mousedown/index.html b/files/nl/web/events/mousedown/index.html new file mode 100644 index 0000000000..a042336cd2 --- /dev/null +++ b/files/nl/web/events/mousedown/index.html @@ -0,0 +1,234 @@ +--- +title: mousedown +slug: Web/Events/mousedown +tags: + - API + - DOM + - Event + - Interface + - NeedsSpecTable + - Referentie +translation_of: Web/API/Element/mousedown_event +--- +<div>Het <code>mousedown </code>event wordt opgeworpen wanneer de knop van een aanwijs device wordt ingedrukt op een element.</div> + +<h2 id="Algemene_info">Algemene info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specificatie</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Doel</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Actie</dt> + <dd style="margin: 0 0 0 120px;">Varieert: Start een drag/drop operatie; start een text selectie; start een scroll/pan interactie (in combinatie met de middelste muisknop, indien ondersteund)</dd> +</dl> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col">Type</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Het event target (het hoogste target in de DOM boom).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Het type van het event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Of het event normaalgezien bubblet of niet</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><code>Boolean</code></td> + <td>Kan het event gecancellet worden of niet?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("document.defaultView")}} (<code>window</code> van het document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>Het aantal opeenvolgende clicks in een kort inerval, plus een.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>De node waar de event listener aan hangt.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Voor <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> en <code>mouseleave</code> events: target van het complementaire event (<code>mouseleave</code> target in het geval van een <code>mouseenter</code> event). <code>null</code> anders.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>De X coordinaat van de muiscursor in globale (scherm) coordinaten.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>De Y coordinaat van de muiscursor in globale (scherm) coordinaten.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>De X coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>De Y coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>Het getal van de knop die ingedrukt werd toen het event afgevuurd werd: Linkse knop=0, middelste knop=1 (indien aanwezig), rechtse knop=2. Voor muizen geconfigureerd voor linkshandig gebruik, waarbij de knopacties omgekeerd zijn, worden de waarden van rechts naar links gelezen.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td> + <p>De knoppen die ingedrukt werden op het moment dat het muisevent afgevuurd werd: Linkse knop=1, Rechtse knop=2, Middelste (wiel) knop=4, 4e knop (typisch, "Browser Back" knop)=8, 5e knop (typisch, "Browser Forward" knop)=16. Indien twee of meer knoppen samen ingedrukt zijn, wordt de logische som van de waarden teruggegeven. B.v., indien zowel de linkse als de rechtse knop ingedrukt worden, wordt 3 teruggeven (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">Meer info</a>.</p> + </td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td> + <p>De hoeveelheid druk toegepast op een touch of tabdevice, wanneer het event gegenereerd werd; deze waarde ligt tussen 0.0 (minimale druk) en 1.0 (maximale druk).</p> + </td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> indien de control toets ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> indien de shift key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> indien de alt key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> indien de meta key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td> + <p>Op disabled form elements</p> + </td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Op disabled form elements</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Werkt enkel voor {{HTMLElement("textarea")}} elementen and enkele {{HTMLElement("input")}} element types.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{Event("mousedown")}}</li> + <li>{{Event("mouseup")}}</li> + <li>{{Event("mousemove")}}</li> + <li>{{Event("click")}}</li> + <li>{{Event("dblclick")}}</li> + <li>{{Event("mouseover")}}</li> + <li>{{Event("mouseout")}}</li> + <li>{{Event("mouseenter")}}</li> + <li>{{Event("mouseleave")}}</li> + <li>{{Event("contextmenu")}}</li> +</ul> diff --git a/files/nl/web/events/mouseout/index.html b/files/nl/web/events/mouseout/index.html new file mode 100644 index 0000000000..f454a2d50b --- /dev/null +++ b/files/nl/web/events/mouseout/index.html @@ -0,0 +1,259 @@ +--- +title: mouseout +slug: Web/Events/mouseout +translation_of: Web/API/Element/mouseout_event +--- +<p>Het <code>mouseout</code> event wordt uitgevoerd wanneer een aanwijzend apparaat (doorgaans een muis) van het element (of een van zijn children) dat de listener aan zich heeft verbonden, af is bewogen. </p> + +<h2 id="Algemene_info">Algemene info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specificatie</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">MouseEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Ja</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Geen</dd> +</dl> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Het volgende voorbeeld illustreert het verschil tussen <code>mouseout</code> en <a href="/en-US/docs/Web/Events/mouseleave" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a> events.</p> + +<pre class="brush: html"><ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> + +<script> + var test = document.getElementById("test"); + + + // this handler will be executed only once when the cursor moves off the unordered list + test.addEventListener("mouseleave", function( event ) { + // highlight the mouseleave target + event.target.style.color = "purple"; + + // reset the color after a short delay + setTimeout(function() { + event.target.style.color = ""; + }, 500); + }, false); + + + // this handler will be executed every time the cursor is moved off a different list-item + test.addEventListener("mouseout", function( event ) { + // highlight the mouseout target + event.target.style.color = "orange"; + + // reset the color after a short delay + setTimeout(function() { + event.target.style.color = ""; + }, 500); + }, false); +</script> +</pre> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Op disabled formelementen</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("44.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Op disabled formelementen</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Werkt alleen voor {{HTMLElement("textarea")}}-elementen en sommige {{HTMLElement("input")}} element types.</p> + +<p>[2] Geïmplementeerd in {{bug("218093")}}.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{event("mousedown")}}</li> + <li>{{event("mouseup")}}</li> + <li>{{event("mousemove")}}</li> + <li>{{event("click")}}</li> + <li>{{event("dblclick")}}</li> + <li>{{event("mouseover")}}</li> + <li>{{event("mouseout")}}</li> + <li>{{event("mouseenter")}}</li> + <li>{{event("mouseleave")}}</li> + <li>{{event("contextmenu")}}</li> +</ul> diff --git a/files/nl/web/guide/ajax/index.html b/files/nl/web/guide/ajax/index.html new file mode 100644 index 0000000000..26d285f8a2 --- /dev/null +++ b/files/nl/web/guide/ajax/index.html @@ -0,0 +1,55 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX +translation_of: Web/Guide/AJAX +--- +<p> </p> +<p><span class="comment">"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.</span></p> +<div class="callout-box"> + <b><a href="nl/AJAX/Voor_Beginners">Voor Beginners</a></b><br> + Een AJAX beginner cursus</div> +<div> + <b>Asynchronous JavaScript and XML (AJAX)</b> is niet een zelfstandige technologie, maar is een term die een "nieuwe" aanpak beschrijft om een aantal bestaande technologieën samen te gebruiken, waaronder <a href="nl/HTML">HTML</a> of <a href="nl/XHTML">XHTML</a>, <a href="nl/CSS">Cascading Style Sheets</a>, <a href="nl/JavaScript">JavaScript</a>, <a href="nl/DOM">The Document Object Model</a>, <a href="nl/XML">XML</a>, <a href="nl/XSLT">XSLT</a>, en het <a href="nl/XMLHttpRequest">XMLHttpRequest object</a>. Als deze technologieën gecombineerd worden in het AJAX model, kunnen applicaties snelle, periodieke veranderingen maken aan een pagina zonder deze te moeten herladen.</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Geselecteerde_Artikelen" name="Geselecteerde_Artikelen">Geselecteerde Artikelen</h4> + <dl> + <dt> + <a href="nl/AJAX/Voor_Beginners">AJAX:Voor Beginners</a></dt> + <dd> + <small>Dit artikel leidt je door de basis van AJAX en geeft je twee simpele voorbeelden om te beginnen.</small></dd> + </dl> + <p><span class="alllinks"><a>View All...</a></span></p> + </td> + <td> + <h4 id="Belangrijke_Inhoud" name="Belangrijke_Inhoud">Belangrijke Inhoud</h4> + <ul> + <li><a href="nl/AJAX/Voor_Beginners">Beginnen met AJAX</a></li> + </ul> + <h4 id="Andere_Paginas" name="Andere_Paginas">Andere Paginas</h4> + <ul> + <li><a>Referenties</a></li> + <li><a>Artikelen</a></li> + <li><a>Examples</a></li> + <li><a>Tools</a></li> + <li><a href="nl/AJAX/Gemeenschap">Gemeenschap</a></li> + <li><a href="nl/AJAX/Andere_Bronnen">Andere Bronnen</a></li> + </ul> + <h4 id="Betrekkende_Onderwerpen" name="Betrekkende_Onderwerpen">Betrekkende Onderwerpen</h4> + <dl> + <dd> + <a href="nl/HTML">HTML</a>, <a href="nl/XHTML">XHTML</a>, <a href="nl/CSS">Cascading Style Sheets</a>, <a href="nl/DOM">Document Object Model</a>, <a href="nl/JavaScript">JavaScript</a>, <a href="nl/XML">XML</a>, <a href="nl/XMLHttpRequest">XMLHttpRequest</a>, <a href="nl/XSLT">XSLT</a>, <a href="nl/DHTML">DHTML</a></dd> + </dl> + <p> </p> + </td> + </tr> + </tbody> +</table> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}</p> diff --git a/files/nl/web/guide/graphics/index.html b/files/nl/web/guide/graphics/index.html new file mode 100644 index 0000000000..1cb7d4da15 --- /dev/null +++ b/files/nl/web/guide/graphics/index.html @@ -0,0 +1,56 @@ +--- +title: Graphics op het Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Moderne websites en applicaties moeten vaak afbeeldingen presenteren.</span> Statische afbeeldingen kunnen gemakkelijk worden getoond met behulp van het {{HTMLElement("img")}}-element of door het instellen van de achtergrond van de HTML-elementen met behulp van de {{cssxref("background-image")}}-eigenschap. U kunt afbeeldingen ook direct samenstellen, of ze later bewerken. Deze artikelen geven inzicht in hoe u dit kunt bereiken.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D Graphics</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd><em>Het {{HTMLElement("canvas")}} biedt </em><em>API's om 2D graphics weer te geven via JavaScript.</em></dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd><em>Scalable Vector Graphics (SVG) laat je lijnen, rondingen en andere geometrische vormen gebruiken om graphics te maken. Door het gebruik van bitmaps te vermijden, kunt u afbeeldingen creëren die op elke schaal meebewegen.</em></dd> +</dl> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Bekijk alles...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D Graphics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><em>Een handleiding voor beginners van WebGL, de 3D graphics API voor het Web. Deze technologie laat u de OpenGL ES gebruiken in webcontent.</em></dd> +</dl> + +<h2 id="Video">Video</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Het gebruik van HTML5 audio en video</a></dt> + <dd><em>Video embedden in een HTML document en het beheerseb van de playback.</em></dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd><em>De RTC in WebRTC staat voor Real-Time Communicatie, technologie die audio/video streaming en het delen van gegevens toestaat tussen browser clients (peers).</em></dd> +</dl> +</div> +</div> diff --git a/files/nl/web/guide/html/html5/index.html b/files/nl/web/guide/html/html5/index.html new file mode 100644 index 0000000000..7dbb52ac20 --- /dev/null +++ b/files/nl/web/guide/html/html5/index.html @@ -0,0 +1,191 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - Handleiding + - Overzicht + - Web + - Webontwikkeling +translation_of: Web/Guide/HTML/HTML5 +--- +<p><strong>HTML5 is de nieuwste evolutie van de standaard die <a>HTML</a> definieërt. De term staat voor twee afzonderlijke concepten:</strong></p> + +<ul> + <li> + <p style="margin-bottom: 0cm;">Een nieuwe versie van de <em>opmaaktaal</em> HTML, met nieuwe elementen, attributen en gedrag,</p> + </li> + <li> + <p>en <span lang="nl-NL">een verzameling van <strong>technologieën</strong> die de ontwikkeling van diversere en krachtigere websites en applicaties mogelijk maakt. Deze verzameling wordt ook wel <em>HTML5 & vrienden</em> genoemd, vaak afgekort tot <em>HTML5</em>.</span></p> + </li> +</ul> + +<p>Met het idee dat alle Open Web ontwikkelaars deze naslagpagina eenvoudig moeten kunnen gebruiken, is de informatie over de verschillende HTML5-technologiën op deze pagina ingedeeld op basis van hun functionaliteit.</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;"><em>Semantiek</em>: nauwkeuriger beschrijven van uw content.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>Connectiviteit</em>: communiceren met de server op nieuwe en innovatieve manieren.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>Offline en opslag</em>: webpagina's lokaal data laten opslaan en deze <em>offline</em> data efficiënt gebruiken.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>Multimedia</em>: audio en video op het Open Web.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>2D/3D graphics en effecten</em>: grotere variëteit aan presentatiemogelijkheden.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>Prestaties en integratie</em>: snelheidsoptimalisatie en slim gebruik van pc hardware.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><em>Toegang tot apparaten</em>: <span lang="nl-NL">het benutten van verschillende invoer- en uitvoerapparaten. </span></p> + </li> + <li> + <p><em>Styling</em>: ontwerpen van geavanceerde thema's.</p> + </li> +</ul> + +<h2 class="western" id="SemantIeken" style="margin-top: 0cm; margin-bottom: 0cm; border: none; padding: 0cm; text-transform: uppercase; letter-spacing: 0.8pt; line-height: 100%;"> <img alt="" src="https://developer.mozilla.org/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"> <font face="Bebas Neue, League Gothic, Haettenschweiler, Arial Narrow, sans-serif"><font size="5"><span style="font-style: normal;"><span style="font-weight: normal;">SemantIeken</span></span></font></font></h2> + +<dl> + <dt><a>Secties en contouren in HTML5</a></dt> + <dd>Een blik op de nieuwe elementen voor contouren en secties in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} en {{HTMLElement("aside")}}.</dd> + <dt><a>HTML5 audio en video gebruiken</a></dt> + <dd>Het inzetten van de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} voor multimedia content.</dd> + <dt><a>Formulieren in HTML5</a></dt> + <dd>Een blik op de verbeterde webformulieren in HTML5: de voorwaarden validatie API, verscheidene nieuwe attributen, nieuwe waarden voor het {{HTMLElement("input")}} attribuut {{htmlattrxref("type", "input")}} en het nieuwe {{HTMLElement("output")}} element.</dd> + <dt>Nieuwe semantische elementen</dt> + <dd>Naast elementen voor secties, media en formulieren, zijn er een aantal nieuwe elementen, zoals {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, of {{HTMLElement("meter")}} en {{HTMLElement("main")}}, waardoor het aantal <a>geldige HTML5 elementen</a> is toegenomen.</dd> + <dt>Verbeteringen in {{HTMLElement("iframe")}}</dt> + <dd>Door de attributen {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, en {{htmlattrxref("srcdoc", "iframe")}} te gebruiken, kunnen ontwikkelaars nu precies het beveiligingsniveau en de gewenste weergave van een {{HTMLElement("iframe")}} element bepalen.</dd> + <dt><a>MathML</a></dt> + <dd>Hiermee kunt u wiskundige formules direct insluiten.</dd> + <dt><a>Introductie tot HTML5</a></dt> + <dd><span lang="nl-NL">In dit artikel wordt beschreven hoe u aan de browser aangeeft dat u HTML5 gebruikt bij uw web design of web applicatie</span>.</dd> + <dt><a>HTML5-parser</a></dt> + <dd style="margin-bottom: 0.5cm;">Het programma dat een HTML-bestand omzet naar een Document Object Model (DOM) is uitgebreid. De weergave van een pagina wordt nu in alle gevallen exact gedefinieerd, zelfs wanneer er ongeldige HTML wordt aangeleverd. Dit zorgt voor een betere voorspelbaarheid en dat browsers die HTML5 ondersteunen op dezelfde manier omgaan met HTML.</dd> +</dl> + +<div class="cleared row topicpage-table"> +<h2 id="Connectiviteit" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectiviteit</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Het opzetten van een blijvende verbinding tussen de webpagina en de server, en het uitwisselen van niet-HTML data via deze verbinding.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Door de server verstuurde gebeurtenissen</a></dt> + <dd>Staat een server toe om gebeurtenissen naar een client te sturen, in plaats van het traditionele paradigma waarbij de server alleen data verzendt op verzoek van de <em>client</em>.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties.</dd> +</dl> + +<h2 id="Offline_Opslag" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline & Opslag</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: applicatie cache</a></dt> + <dd>Firefox ondersteunt de HTML5-specificatie voor het <em>offline</em> opslaan van hulpmiddelen volledig. Andere browsers hebben veelal een gedeeltelijke ondersteuning.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline evenementen</a></dt> + <dd>Firefox 3 ondersteunt WHATWG online en offline events, die applicaties of extensies laat detecteren of er een actieve internetverbinding is of niet en wanneer een verbinding op en neer gaat.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side sessie en persistent storage (aka DOM storage)</a></dt> + <dd>Client-side sessie en persistent storage staan webapplicaties meer gestructureerde data-opslag toe aan de client-zijde.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is een webstandaard voor de opslag van grote hoeveelheden gestructureerde data in de browser en voor hoge zoekprestaties in deze data door gebruik van indexen.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Bestanden van webapplicaties gebruiken</a></dt> + <dd>Ondersteuning van de nieuwe HTML5 File API is toegevoegd aan Gecko, waardoor webapplicaties toegang krijgen tot lokale, door de gebruiker geselecteerde bestanden. Hieronder valt de ondersteuning van het selecteren van meerdere bestanden tegelijk met het nieuwe attribuut <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> van het element <span style="font-family: monospace;">{{HTMLElement("input")}}</span> met <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span>. Ook bestaat er de <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 audio en video gebruiken</a></dt> + <dd>Met de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} kunt u multimedia-inhoud insluiten en manipuleren.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties..</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Gebruik van de Camera API</a></dt> + <dd>Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.</dd> + <dt>Track en WebVTT</dt> + <dd>Het {{HTMLElement("track")}} element laat toe om ondertitels en hoofdstukken te gebruiken. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is een standaard om tekst te volgen.</dd> +</dl> + +<h2 id="3D_graphics_AND_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D graphics AND effects</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas instructie</a></dt> + <dd>Leer hoe u met het nieuwe element <code>{{HTMLElement("canvas")}}</code> grafieken en andere visuele objecten kunt tekenen in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API voor elementen</a></dt> + <dd>De HTML5 Text API wordt nu ondersteund door {{HTMLElement("canvas")}} elementen.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> +</dl> + +<div class="section"> +<h2 id="Performance_and_Integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance and Integration</h2> + +<dl> + <dt>Webwerkers</dt> + <dt></dt> + <dd>Staat het delegeren van JavaScript evaluatie toe aan achtergrondthreads, waardoor deze activiteiten kunnen voorkomen dat interactieve gebeurtenissen worden vertraagd.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Laat toe om de browsegeschiedenis te manipuleren. Dit is vooral nuttig voor pagina's die interactief nieuwe informatie laden.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Het contentEditable Attribuut: Verander uw website in een wiki!</a></dt> + <dd>HTML5 heeft het contentEditable attribuut gestandaardiseerd. Leer meer over deze functie.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Device_TOEGANG" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Device TOEGANG</h2> + +<dl> + <dt></dt> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">De Camera API gebruiken</a></dt> + <dd>Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocatie gebruiken</a></dt> + <dd>Laat broweser de locatie van de gebruiker bepalen door middel van geolocatie.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="StylIng" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">StylIng</h2> + +<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> 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 new file mode 100644 index 0000000000..d01e9b07ac --- /dev/null +++ b/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html @@ -0,0 +1,268 @@ +--- +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 +--- +<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/guide/index.html b/files/nl/web/guide/index.html new file mode 100644 index 0000000000..15791e3fe9 --- /dev/null +++ b/files/nl/web/guide/index.html @@ -0,0 +1,67 @@ +--- +title: Web developer guide +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><strong>These articles provide how-to information to help you make use of specific technologies and APIs.</strong></p> + +<div> +<div> +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt> + <dd class="landingPageList">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Event developer guide</a></dt> + <dd class="landingPageList">Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></dt> + <dd class="landingPageList">Modern Web sites and applications often need to present graphics.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guide to Web APIs</a></dt> + <dd class="landingPageList">List all Web APIs and what they are doing</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML">HTML developer guide</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript is the powerful scripting language used to create applications for the Web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizations and character encodings</a></dt> + <dd class="landingPageList">Browsers process text as Unicode internally. However, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the browser. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML specification recommends</a> the use of the UTF-8 encoding (which can represent all of Unicode) and regardless of the encoding used requires Web content to declare what encoding was used.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mobile Web Development</a></dt> + <dd class="landingPageList">This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for information on Mozilla's Firefox OS project, see the <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> page. Or you might be interested in details about <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimization and performance</a></dt> + <dd class="landingPageList">When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd class="landingPageList">The Web platform provides the following objects for parsing and serializing XML:</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt> + <dd class="landingPageList">The SVG-in-OpenType work is currently in the hands of the <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Once we're ready for wider adoption the information from <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> will be moved here, updated and expanded.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (the <strong>Web Open Font Format</strong>) is a web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">User experience</a></dt> + <dd class="landingPageList">Making the user experience of your Web site or app a pleasant one for your users is important if you want users to come back and use it again and again. Here you'll find articles that may help you along.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData Objects</a></dt> + <dd class="landingPageList">The <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> object lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossary</a></dt> + <dd class="landingPageList">Defines numerous technical terms related to the Web and Internet.</dd> +</dl> +</div> +</div> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/nl/web/guide/performance/index.html b/files/nl/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/nl/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/web/html/element/a/index.html b/files/nl/web/html/element/a/index.html new file mode 100644 index 0000000000..3c3fc3a0b8 --- /dev/null +++ b/files/nl/web/html/element/a/index.html @@ -0,0 +1,313 @@ +--- +title: <a> +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +<p><span class="seoSummary">Het <strong>HTML <code><a></code> element</strong> (of <em>anker</em> element) maakt een hyperlink naar andere web pagina's, bestanden, lokaties binnen dezelfde pagina, email-adressen of een andere URL.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content </a>categorieën</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, tastbare content.</td> + </tr> + <tr> + <th scope="row">Toegestane content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Transparent</a>, bevat ofwel <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> ( exclusief <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>) of <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag verzuim</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Toegestane ouders</th> + <td>Ieder element dat <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> accepteert, of ieder element dat <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> accepteert, maar altijd <a> elementen uitsluit ( volgens het logische principe van symmetrie dat als een <a> tag, als ouder, geen <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a> kan bevatten, deze <a> content dus niet deze <a> tag als zijn ouder kan hebben).</td> + </tr> + <tr> + <th scope="row">Toegestane ARIA roles</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element's attributes include the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though <code>/</code> and <code>\</code> are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly. + <div class="note"><strong>Notes:</strong> + <ul> + <li>This attribute only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>.</li> + <li>This attribute can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> to download content generated by JavaScript, such as pictures created in an image-editor Web app.</li> + <li>If the HTTP header <a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> gives a different filename than this attribute, the HTTP header takes priority over this attribute.</li> + <li>If <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox prioritizes <code>Content-Disposition</code>, like the filename case, while Chrome prioritizes the <code>download</code> attribute.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Contains a URL or a URL fragment that the hyperlink points to.</dd> + <dd>A URL fragment is a name preceded by a hash mark (<code>#</code>), which specifies an internal target location (an <a href="/en-US/docs/HTML/Global_attributes#attr-id">ID</a> of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> work in most browsers.</dd> + <dd>This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere. + <div class="note"> + <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment <code>href="#"</code> to link to the top of the current page. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Indicates which <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the URL: + <ul> + <li><code>'no-referrer'</code> means the <code>Referer:</code> header will not be sent.</li> + <li><code>'no-referrer-when-downgrade'</code> means no <code>Referer:</code> header will be sent when navigating to an origin without HTTPS. This is the default behavior.</li> + <li><code>'origin'</code> means the referrer will be the <a href="/en-US/docs/Glossary/Origin">origin</a> of the page, not including information after the domain.</li> + <li><code>'origin-when-cross-origin'</code> meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li> + <li><code>'unsafe-url'</code> means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Specifies where to display the linked URL. It is a name of, or keyword for, a <em>browsing context</em>: a tab, window, or <code><iframe></code>. The following keywords have special meanings: + <ul> + <li><code>_self</code>: Load the URL into the same browsing context as the current one. This is the default behavior.</li> + <li><code>_blank</code>: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.</li> + <li><code>_parent</code>: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Note:</strong> When using <code>target</code>, consider adding <code>rel="noopener noreferrer"</code> to avoid exploitation of the <code>window.opener</code> API.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL. It is purely advisory, with no built-in functionality.</dd> +</dl> + +<h3 id="Obsolete">Obsolete</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute defined the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>For use with the below <code>shape</code> attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, <code>id</code> and <code>name</code> could be used simultaneously on a <code><a></code> element as long as they have identical values. + <div class="note"> + <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use the <a href="/en-US/docs/HTML/Global_attributes#attr-id">global attribute <code>id</code></a> instead.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute specified a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It was deprecated for being very confusing.</dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>This attribute was used to define a region for hyperlinks to create an image map. The values are <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value <code>default</code> for shape requires that the entire enclosed area, typically an image, be used. + <div class="note"><strong>Note:</strong> Use the <a href="/en-US/docs/Web/HTML/Element/img#attr-usemap"><code>usemap</code> attribute</a> for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Linking_to_an_external_location">Linking to an external location</h3> + +<pre class="brush: html"><!-- anchor linking to external file --> +<a href="https://www.mozilla.com/"> +External Link +</a> +</pre> + +<h4 id="Result">Result</h4> + +<p><a class="external" href="https://www.mozilla.com/">External Link</a></p> + +<h3 id="Linking_to_another_section_on_the_same_page">Linking to another section on the same page</h3> + +<pre class="brush: html"><!-- links to element on this page with id="attr-href" --> +<a href="#attr-href"> +Description of Same-Page Links +</a> +</pre> + +<h4 id="Result_2">Result</h4> + +<p><a href="#attr-href">Description of Same Page Links</a></p> + +<h3 id="Creating_a_clickable_image">Creating a clickable image</h3> + +<p>This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.</p> + +<pre class="brush: html"><a href="https://developer.mozilla.org/en-US/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a> +</pre> + +<h4 id="Result_3">Result</h4> + +<figure> +<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> +</figure> + +<h3 id="Creating_an_email_link">Creating an email link</h3> + +<p>It's common to create links that open in the user's email program to allow them to send a new message. This is done with a <code>mailto:</code> link. Here's a simple example:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<h4 id="Result_4">Result</h4> + +<p><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></p> + +<p>For additional details about the <code>mailto</code> URL scheme, such as including the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p> + +<h3 id="Creating_a_phone_link">Creating a phone link</h3> + +<p>Offering phone links is helpful for users viewing web documents and laptops connected to phones.</p> + +<pre class="brush: html"><a href="tel:+491570156">+49 157 0156</a></pre> + +<p>For additional details about the <code>tel</code> URL scheme, see {{RFC(3966)}}.</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">Using the <code>download</code> attribute to save a <code><canvas></code> as a PNG</h3> + +<p>If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a <code>download</code> attribute and the canvas data as a file URL:</p> + +<pre class="brush: js">var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</pre> + +<p>You can see this in action at <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Notes">Notes</h2> + +<p>HTML 3.2 defines only the <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, and <code>title</code> attributes.</p> + +<h3 id="Accessibility_recommendations">Accessibility recommendations</h3> + +<p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>"#"</code> or <code>"javascript:void(0)"</code> to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL. </p> + +<h3 id="Clicking_and_focus">Clicking and focus</h3> + +<p>Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.</p> + +<table> + <caption>Does clicking on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Desktop Browsers</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Yes</td> + <td style="background-color: LawnGreen;">Yes</td> + </tr> + </tbody> +</table> + +<table> + <caption>Does tapping on an {{HTMLElement("a")}} give it focus?</caption> + <tbody> + <tr> + <td>Mobile Browsers</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrer</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-a-element', '<a>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/nl/web/html/element/abbr/index.html b/files/nl/web/html/element/abbr/index.html new file mode 100644 index 0000000000..a13e5cb177 --- /dev/null +++ b/files/nl/web/html/element/abbr/index.html @@ -0,0 +1,150 @@ +--- +title: <abbr> +slug: Web/HTML/Element/abbr +tags: + - Element + - HTML + - HTML tekst-niveau semantiek + - Referentie + - Web + - abbr +translation_of: Web/HTML/Element/abbr +--- +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Het <em>HTML Abbreviation element</em> (<strong><abbr></strong>) geeft de mogelijkheid om een afkorting aan te geven en geeft optioneel de mogelijkheid voor het geven van een volledige omschrijving. Indien het <code>title</code> attribuut wordt opgegeven in het element, hoort deze de volledige omschrijving te bevatten en niets anders.</p> + +<pre class="brush: html"><p>Ik kan <abbr title="Hypertext Markup Language">HTML</abbr></p></pre> + +<p style="margin-top: -1.5em;"><small>Bekijk meer verdiepende voorbeelden in het artikel <em><a href="https://developer.mozilla.org/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Hoe markeer je afkortingen om ze te verduidelijken.</a></em></small></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM Interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhoud categorieën</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content</td> + </tr> + <tr> + <th scope="row">Toegestaande inhoud</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a></td> + </tr> + <tr> + <th scope="row">Toegstaande parent elementen</th> + <td>Elk element dat <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> toestaat.</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p><span style="line-height: 21px;">Dit element bevat alleen de mogelijkheid voor gebruik van de </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale attributen</a><span style="line-height: 21px;">.</span></p> + +<p>Gebruik het {{htmlattrxref("title")}} attribuut om de volledige omschrijving van de afkorting op te geven. Veel user agents geven de inhoud van dit attribuut namelijk weer als een tooltip.</p> + +<div class="note"> +<p><strong>Note: </strong>In talen met grammaticale nummers (vooral talen met meer dan twee nummers, zoals Arabisch) gebruik je hetzelfde in het <code>title </code>attribuut als in het <code><abbr></code> element.</p> +</div> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificaties</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}} [1]</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Up to Gecko 1.9.2 (Firefox 3.6), Firefox implemented the {{domxref("HTMLSpanElement")}} interface for this element instead of the {{domxref("HTMLElement")}} interface.</p> + +<h2 id="Standaard_opmaak">Standaard opmaak</h2> + +<p>Het doel van dit element is puur voor het gemak van de auteur en alle browsers geven het standaard inline weer ({{cssxref('display')}}<code>: inline</code>) , toch verschilt de opmaak per browser:</p> + +<ul> + <li>Sommige browsers, zoals Internet Explorer, geven dit element geen andere stijl dan het {{HTMLElement("span")}} element.</li> + <li>Opera, Firefox, en sommige andere browsers geven een stippellijn weer bij de inhoud van het <code><abbr></code> element.</li> + <li>Een aantal andere browsers voegen niet alleen een stippellijn toe, maar veranderen het font ook in kleine blokletters. Om dit te voorkomen kun je aan het CSS {{cssxref('font-variant')}}<code>: none</code> toevoegen.</li> +</ul> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/Learn/HTML/Element/abbr">Gebruik het <abbr> element</a></li> + <li>Andere elementen die op <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements" title="HTML/Text level semantics conveying elements">tekst-niveau semantiek</a> toepassen: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/nl/web/html/element/b/index.html b/files/nl/web/html/element/b/index.html new file mode 100644 index 0000000000..bc24fbfca1 --- /dev/null +++ b/files/nl/web/html/element/b/index.html @@ -0,0 +1,82 @@ +--- +title: b +slug: Web/HTML/Element/b +translation_of: Web/HTML/Element/b +--- +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Het HTML B-element (<code><b></code>) representeert een stuk tekst dat qua stijl verschilt van gewone tekst, maar zonder dat het enig belang of relevantie toevoegt. Het is gebruikelijk dat het element wordt toegepast om sleutelwoorden in een samenvatting of productnamen in een recensie vetgedrukt weer te geven. Het element voor datzelfde ook gebruikt voor andere tekst die normaal vetgedrukt wordt weergegeven. Een laatste voorbeeld is het gebruik om de eerste zin van een artikel vetgedrukt te laten zien.</p> + +<div class="note"> +<p><strong>Opmerkingen bij het gebruik:</strong></p> + +<ul> + <li>Verwar het <code><b></code> element niet met de elementen {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} of {{ HTMLElement("mark") }}. Het <code><strong></code> element geeft tekst weer met een bepaald <em>belang; </em><code><em></code> legt enige <em>nadruk</em> op de tekst en <code><mark></code> geeft tekst aan met een zekere <em>relevantie</em>. Het <code><b></code> element geeft geen betekenis mee; gebruik het daarom alleen als de andere elementen niet passen.</li> + <li>Gebruik het <code><b></code> element niet om koppen aan te geven; voor dit doel kunt u de elementen {{ HTMLElement("h1") }} tot en met {{ HTMLElement("h6") }} gebruiken.</li> + <li>Houd er rekening mee dat <code><b></code> tags niet <em>per sé</em> vetgedrukt weergegeven hoeven te worden, omdat de stijl kan worden aangepast met stijlbladen.</li> + <li>Het is een goed idee om <code><b></code> tags een <code><strong>class</strong></code> attribuut mee te geven, zodat de stijl van verschillende <code><b></code>-tags in een document kan worden aangepast met stijlbladen zonder de HTML-code te wijzigen. Bijvoorbeeld <code><b class="artikelEersteAlinea"></code> voor de eerste alinea (Engels: paragraph) van een artikel.</li> + <li>Oorspronkelijk was het <code><b></code> element bedoeld om tekst vetgedrukt te maken. Omdat opmaaktags sinds HTML 4 afgekeurd ("deprecated") zijn, is de betekenis van het <code><b></code>-element echter veranderd.</li> +</ul> +</div> + +<h2 id="Gebruikscontext">Gebruikscontext</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Inhoudscategorieën</a></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td> + </tr> + <tr> + <td>Toegestane inhoud</td> + <td>Phrasing content</td> + </tr> + <tr> + <td>Weg te laten tags</td> + <td>Geen, zowel de begin- als eindtag zijn verplicht</td> + </tr> + <tr> + <td>Toegestane ouderelementen</td> + <td>Elk element dat phrasing content toestaat</td> + </tr> + <tr> + <td>Normatief document</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">HTML5, section 4.6.16</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B" title="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B">HTML4.01, section 15.2.1</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Zoals alle andere HTML-elementen heeft dit element de <a href="/nl/HTML/Globale_attributen" title="Element">globale attributen</a>.</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Dit element implementeert de <code><a href="/nl/DOM/element" title="nl/DOM/element">HTMLElement</a></code> interface.</p> + +<div class="note"><strong>Opmerking betreffende implementatie: </strong>Tot en met Gecko 1.9.2 implementeert Firefox de <a href="/nl/DOM/span" title="nl/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface voor dit element.</div> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="script"><p> + Dit artikel beschrijft verschillende <b>tekst-niveau</b> elementen. Het verklaart hun gebruik in een <b>HTML-document</b>. +</p> +Sleutelwoorden zijn weergegeven met de standaardopmaak van het &lt;b> element, normaal gesproken is dat vetgedrukt. +</pre> + +<h4 id="Resultaat">Resultaat</h4> + +<p>Dit artikel beschrijft verschillende <strong>tekst-niveau</strong> elementen. Het verklaart hun gebruik in een <strong>HTML-document</strong>.</p> + +<p>Sleutelwoorden zijn weergegeven met de standaardopmaak van het <b> element, normaal gesproken is dat vetgedrukt.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Others elements conveying <a href="/en/HTML/Text_level_semantics_conveying_elements" title="en/HTML/Text level semantics conveying elements">text-level semantics</a>: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li> + <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/b", "de": "de/HTML/Element/b", "pl": "pl/HTML/Element/b"} ) }}</p> + +{{HTMLRef}} diff --git a/files/nl/web/html/element/div/index.html b/files/nl/web/html/element/div/index.html new file mode 100644 index 0000000000..74a1240509 --- /dev/null +++ b/files/nl/web/html/element/div/index.html @@ -0,0 +1,146 @@ +--- +title: <div> +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - HTML Flow + - HTML Groep + - Referentie + - Web +translation_of: Web/HTML/Element/div +--- +<p>{{HTMLRef}}</p> + +<p>Het HTML <div> element is een algemene container voor flow content, en heeft geen specifieke betekenis.<br> + Het kan gebruikt worden om elementen te groeperen voor stijl-doeleinden (doormiddel van een <strong>class</strong> of <strong>id</strong>), of omdat ze attribuutwaarden delen, zoals <strong>lang</strong>. Het mag alleen gebruikt worden als er geen alternatief semantisch element is (zoals {{HTMLElement("article")}} of {{HTMLElement("nav")}}).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Attributen</h2> + +<p>Dit element bevat de '<a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>'.</p> + +<p>Het '<strong>align'</strong> attribuut is verouderd; niet meer gebruiken.</p> + +<h2 id="Examples" name="Examples">Voorbeelden</h2> + +<pre class="brush: html"><div> + <p>Een willekeurige tekst hier.</p> +</div> +</pre> + +<h3 id="Result" name="Result">Resultaat</h3> + +<p>Een willekeurige tekst hier.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen veranderingen sinds laatste snapshot.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><strong>align </strong>verouderd</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibiliteit</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>Basis support</td> + <td>1.0</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>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>Basis support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Bekijk ook</h2> + +<ul> + <li>Semantische sectie elementen: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>{{HTMLElement("span")}} element voor het stijlen van content</li> +</ul> + +<div> </div> diff --git a/files/nl/web/html/element/figcaption/index.html b/files/nl/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..e10953ea78 --- /dev/null +++ b/files/nl/web/html/element/figcaption/index.html @@ -0,0 +1,123 @@ +--- +title: <figcaption> +slug: Web/HTML/Element/figcaption +translation_of: Web/HTML/Element/figcaption +--- +<p>{{HTMLRef}}</p> + +<p>Het <strong>HTML <code><figcaption></code> element</strong> vertegenwoordigt een bijschrift/opschrift of een legende die bij een figure of afbeelding hoort en die de rest van de data omschrijft van het {{HTMLElement("figure")}} element, wat zijn directe voorouder is.</p> + +<p>Dit betekent dat <code><figcaption></code> het eerste of het laatste element kan zijn binnen een {{HTMLElement("figure")}} blok. Ook is het <em>HTML Figcaption Element </em>optioneel. Indien dat niet het geval is dan zal het hoodelement van de figuur geen bijschrift/opschrift hebben.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">I</a>nhoudscategorieën</th> + <td>Geen.</td> + </tr> + <tr> + <th scope="row">Toegestaande inhoud</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Bovenliggende toegestaande elementen</th> + <td>Een {{HTMLElement("figure")}} element; het<code><figcaption></code> element moet het eerste of het laatste child zijn.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p><span style="line-height: 21px;">Dit element bevat ook de </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>Ga naar de {{HTMLElement("figure")}} pagina voor voorbeelden van <code><figcaption></code>.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>8</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.1 (iOS 5.0)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Het {{HTMLElement("figure")}} element.</li> +</ul> diff --git a/files/nl/web/html/element/html/index.html b/files/nl/web/html/element/html/index.html new file mode 100644 index 0000000000..131593197a --- /dev/null +++ b/files/nl/web/html/element/html/index.html @@ -0,0 +1,113 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - Element + - HTML + - HTML root-element + - Naslagwerk + - Reference + - Referentie + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p>Het <strong><code><html></code>-element</strong> representeert de 'root' (het element op het hoogste niveau) van een HTML-document. Er wordt daarom naar verwezen als het <em>root-element</em>. Alle andere elementen moeten nakomelingen zijn van dit element.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Geen.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>Een {{HTMLElement("head")}}-element, gevolgd door een {{HTMLElement("body")}}-element.</td> + </tr> + <tr> + <th>Tag omission</th> + <td> + <p>Het beginlabel mag worden weggelaten als het eerste object binnen het <code><html></code>-element geen commentaar is.<br> + Het eindlabel mag worden weggelaten als het <code><html></code>-element niet direct wordt gevolgd door commentaar, en als het een {{HTMLElement("body")}}-element bevat dat niet leeg is of waarvan het beginlabel aanwezig is.</p> + </td> + </tr> + <tr> + <th>Permitted parents</th> + <td>Als het root-element van een document, of waar een fragment van een subdocument is toegestaan in een samengesteld document.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Geen.</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Dit element kan <a href="/en-US/docs/Web/HTML/Global_attributes">algemene attributen</a> bevatten.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Specificeert de URI van een bronnenmanifest die bronnen aanduidt die lokaal moeten worden gecacht. Zie <a href="/en-US/docs/Web/HTML/Using_the_application_cache">De application cache gebruiken</a> voor details.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Specificeert de versie van de {{glossary("DTD", "documenttype-definitie")}} van HTML die het huidige document bestuurt. Dit attribuut is niet nodig, omdat het overbodig is naast de versieinformatie in de verklaring van het documenttype.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Specificeert de Namespace van XML in het document. De standaardwaarde is <code>"http://www.w3.org/1999/xhtml"</code>. Dit is vereist in documenten die worden verwerkt door XML-vewerkers, en is optioneel in text/html-documenten.</dd> +</dl> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Toegevoegde ondersteuning voor het <code>manifest</code>-attribuut (later afgeschaft).<br> + Verouderd in het <code>version</code>-attribuut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Verouderd in het <code>version</code>-attribuut.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel op deze pagina is gegenereeerd met gestructureerde gegevens. Als u wilt bijdragen aan de gegevens, ga dan naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and stuur ons een pull request.</div> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>Het element op het hoogste niveau in MathML: {{MathMLElement("math")}}</li> + <li>Het element op het hoogste niveau in SVG: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/nl/web/html/element/index.html b/files/nl/web/html/element/index.html new file mode 100644 index 0000000000..f9d4a515c8 --- /dev/null +++ b/files/nl/web/html/element/index.html @@ -0,0 +1,110 @@ +--- +title: Element +slug: Web/HTML/Element +tags: + - Element + - HTML + - HTML root-element + - Naslagwerk + - Referentie + - Web +translation_of: Web/HTML/Element +--- +<p> </p> + +<p>{{HTMLSidebar("Elements")}}<br> + Deze pagina geeft alle {{Glossary("HTML")}}-{{Glossary("Element","elementen")}} weer. Ze zijn gegroepeerd op functie om u te helpen met te vinden wat u zoekt.</p> + +<div class="note"> +<p>Bekijk <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">de sectie over elementen in het artikel Een inleiding op HTML</a> voor meer informatie over de basis van HTML-elementen en -attributen.</p> +</div> + +<h2 id="Hoofdelement">Hoofdelement</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document-metadata">Document-metadata</h2> + +<p>Metadata bevat informatie over de pagina, zoals stijlen, scripts, en gegevens om software ({{Glossary("zoekmachine", "zoekmachines")}}, {{Glossary("Browser","browsers")}}, etc.) te helpen de pagina te gebruiken en renderen. Metadata voor stijlen en script kunnen worden gedefinieerd in de pagina of kunnen verwijzen naar een ander bestand dat die informatie bevat.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Hoofdelement_voor_segmentatie">Hoofdelement voor segmentatie</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Inhoud_segmenteren">Inhoud segmenteren</h2> + +<p>Segmentatie-elementen zorgen ervoor dat u de inhoud van het document kunt indelen in logische stukjes. Gebruik de segmentatie-elementen om een uitgebreid stramien te maken voor uw pagina-inhoud, met bijvoorbeeld navigatie in de header en footer, en elementen die de segmenten van de inhoud identificeren.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Tekstinhoud">Tekstinhoud</h2> + +<p>Gebruik HTML-elementen voor tekstinhoud om blokken of segmenten van inhoud te organiseren tussen de openings- en sluitingstags van het {{HTMLElement("body")}}-element. Deze elementen identificeren het doel en de structuur van die inhoud, wat belangrijk is voor {{Glossary("toegankelijkheid")}} en {{Glossary("SEO")}}.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_tekstsemantiek">Inline tekstsemantiek</h2> + +<p>De inline tekstsemantiek kan worden gebruikt om de betekenis, structuur of stijl van een woord, regel of een willekeurig stuk te tekst te definiëren.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Afbeeldingen_en_multimedia">Afbeeldingen en multimedia</h2> + +<p>HTML ondersteund verschillende multimediabronnen, zoals afbeeldingen, audio en video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Ingebedde_inhoud">Ingebedde inhoud</h2> + +<p>HTML kan naast normale multimediainhoud ook verschillende andere soorten inhoud bevatten, zelfs als deze inhoud niet altijd even interactief is.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripten">Scripten</h2> + +<p>HTML ondersteunt het gebruik van scripttalen om dynamische inhoud en webapplicaties te maken, waarbij JavaScript de meest bekende is. Sommige elementen ondersteunen deze mogelijkheid.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Bewerkingen_afbakenen">Bewerkingen afbakenen</h2> + +<p>Deze elementen geven u de mogelijkheid om aan te geven dat bepaalde stukken van de tekst zijn aangepast.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Tabelinhoud">Tabelinhoud</h2> + +<p>Deze elementen worden gebruikt om tabelgegevens te maken en verwerken.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formulieren">Formulieren</h2> + +<p>HTML versterkt een aantal elementen dat kan samen kan worden gebruikt om formulieren te maken, die een gebruiker kan invullen en kan opsturen naar de website of applicatie. In de <a href="/nl/docs/Web/Guide/HTML/Forms">Gids voor HTML-formulieren</a> staat veel meer informatie over formulieren.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactieve_elementen">Interactieve elementen</h2> + +<p>HTML biedt een aantal elementen waarmee objecten voor een interactieve gebruikersomgeving kunnen worden gemaakt.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components">Web Components</h2> + +<p>Web Components is een HTML-gerelateerde technologie, die het mogelijk maakt om aangepaste elementen te maken en gebruiken alsof het gewone HTML is. Daarnaast kunt u aangepaste versies maken van standaard HTML-elementen.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Verouderde_en_afgeschafte_elementen">Verouderde en afgeschafte elementen</h2> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> Dit zijn oude HTML-elementen die zijn afgeschaft zijn en niet horen te worden gebruikt. <strong>U moet ze nooit gebruiken in nieuwe projecten, en u moet ze zo snel mogelijk vervangen in oude projecten.</strong> Ze worden hier alleen genoemd voor informatiedoeleinden.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> + +<p> </p> diff --git a/files/nl/web/html/element/marquee/index.html b/files/nl/web/html/element/marquee/index.html new file mode 100644 index 0000000000..5c91b2f377 --- /dev/null +++ b/files/nl/web/html/element/marquee/index.html @@ -0,0 +1,203 @@ +--- +title: <marquee> +slug: Web/HTML/Element/marquee +tags: + - Element + - HTML + - Referentie + - lichtkrant + - verouderd +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Samenvatting</h2> + +<p>Het HTML <code><marquee></code> element wordt gebruikt voor het invoegen van een scrollende lichtkrant met tekst.</p> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Bepaald hoe de tekst scrollt in de lichtkrant. Mogelijke waarden zijn: <code>scroll</code>, <code>slide</code> en <code>alternate</code>. Als er geen waarde is gespecificeerd, is de standaardwaarde <code>scroll</code>.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Stelt de achtergrondkleur in door middel van de kleurnaam of hexadecimale waarde.</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Stelt de richting van het scrollen in binnen de lichtkrant. Mogelijke waarden zijn <code>left</code>, <code>right</code>, <code>up</code> en <code>down</code>. Als er geen waarde is gespecificeerd, is de standaardwaarde <code>left</code>.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Stelt de hoogte in pixels of percentage in.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Stelt de horizontale marge in.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Stelt het aantal keer dat de lichtkrant scrollt in. Als er geen waarde is gespecificeerd, is de standaardwaarde −1, wat betekent dat de lichtkrant oneindig zal scrollen.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Stelt de hoeveelheid scrolls in op elke interval in pixels. De standaardwaarde is 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd> + <p>Stelt de interval tussen elke scroll beweging in, in milliseconden. De standaardwaarde is 85. Merk op dat elke waarde kleiner dan 60 wordt genegeerd en de waarde 60 wordt in plaats daarvan gebruikt, tenzij <code>truespeed </code>is gespecificeerd.</p> + </dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Normaalgesproken worden <code>scrolldelay </code>waarden lager dan 60 genegeerd. Als <code>truespeed </code>wordt gespecificeerd, worden deze waarden niet genegeerd.</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Stelt de verticale marge in pixels of percentage in.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Stelt de breedte in pixels of percentage in.</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">Event handlers</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant het einde van het scrollgebied bij <code>loop </code>heeft bereikt. Het kan alleen worden uitgevoerd wanneer <code>behavior </code>is ingesteld als <code>alternate</code>.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant de hoeveelheid scrolls die is ingesteld bij <code>loop</code>, zijn voltooid. Het kan alleen geactiveerd wanneer het <code>loop </code>element is ingesteld als een getal dat groter is dan 0.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Wordt uitgevoerd wanneer de lichtkrant start met scrollen.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>start</dt> + <dd>Start het scrollen van de lichtkrant.</dd> + <dt>stop</dt> + <dd>Stopt het scrollen van de lichtkrant.</dd> +</dl> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: html"><marquee>Deze tekst zal van links naar rechts scrollen.</marquee> + +<marquee direction="up">Deze tekst zal van beneden naar boven scrollen.</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Deze tekst zal stuiteren. + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Voorbeelden", 600, 450)}}</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Maak het verouderd in het voordeel van CSS, maar definiëer het verwachte gedrag, voor terugwerkende compatibiliteit.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Maak het verouderd in het voordeel van CSS, maar definiëer het verwachte gedrag, voor terugwerkende compatibiliteit.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>truespeed</code> element</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobiel</th> + <th>Opera Mobiel</th> + <th>Safari Mobiel</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>truespeed</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hspace/vspace</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>loop</code> element</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/html/element/p/index.html b/files/nl/web/html/element/p/index.html new file mode 100644 index 0000000000..cfeb4103bf --- /dev/null +++ b/files/nl/web/html/element/p/index.html @@ -0,0 +1,113 @@ +--- +title: <p> +slug: Web/HTML/Element/p +tags: + - Element + - HTML + - HTML inhoud groeperen + - Naslagwerk + - Web +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p>Het<strong> <code><p></code>-element</strong> <strong>van HTML </strong>vertegenwoordigt een paragraaf van tekst. Paragrafen worden meestal vertegenwoordigd in visuele media als blokken tekst, die worden gescheiden van aangrenzende blokken door verticale witruimte en/of inspringing op de eerste regel. Paragrafen zijn <a href="/docs/HTML/Block-level_elements">elementen op blokniveau</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/nl/docs/Web/HTML/Content_categories">Inhoudscategorieën</a></th> + <td><a href="/nl/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, waarneembare inhoud.</td> + </tr> + <tr> + <th scope="row">Toegestane inhoud</th> + <td><a href="/nl/docs/Web/HTML/Content_categories#Phrasing_content">Verwoorde inhoud</a>.</td> + </tr> + <tr> + <th scope="row">Tags weglaten</th> + <td>De begintag is verplicht. De eindtag mag worden weggelaten als het {{HTMLElement("p")}} element onmiddelijk wordt gevolgd door een {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} of een ander {{HTMLElement("p")}}-element, of als er geen andere inhoud meer in het ouderelement is en het ouderelement geen {{HTMLElement("a")}}-element is.</td> + </tr> + <tr> + <th scope="row">Toegestane ouderelementen</th> + <td>Elk element dat <a href="/docs/Web/HTML/Content_categories#Flow_content">stromende inhoud</a> accepteert.</td> + </tr> + <tr> + <th scope="row">Toegestane ARIA-rollen</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM-interface</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributen">Attributen</h2> + +<p>Dit element omvat de <a href="/docs/Web/HTML/Global_attributes">globale attributen</a>.</p> + +<div class="note"> +<p><strong>Opmerking:</strong> Het <code>align</code>-attribuut op <code><p></code>-tags is verouderd en moet niet meer worden gebruikt.</p> +</div> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush: html"><p>Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. + Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst.</p> + +<p>Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. + Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst.</p></pre> + +<div><span style="line-height: 1.5;">De bovenstaande HTML geeft deze uitvoer:</span></div> + +<div> </div> + +<p>Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst. Dit is de eerste paragraaf met tekst.</p> + +<p>Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst. Dit is de tweede paragraaf met tekst.</p> + +<h2 id="Opmerkingen">Opmerkingen</h2> + +<p>Om de afstanden tussen paragrafen aan te passen gebruikt u de <a href="/en-US/docs/Web/CSS">CSS</a>-eigenschap {{cssxref("margin")}}. <strong>Plaats geen</strong> lege alineaelementen of {{HTMLElement("br")}} ertussen.</p> + +<h2 id="Specifications" name="Specifications">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen veranderingen sinds het laatste W2C-snapshot {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>align</code>-attribuut is verouderd.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Aanvankelijke definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browsercompatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel in deze pagina is gegenereerd door middel van gestructureerde data. Als u wil bijdragen aan de data, bekijk dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/nl/web/html/global_attributes/index.html b/files/nl/web/html/global_attributes/index.html new file mode 100644 index 0000000000..81f24108d3 --- /dev/null +++ b/files/nl/web/html/global_attributes/index.html @@ -0,0 +1,482 @@ +--- +title: Algemene attributen +slug: Web/HTML/Global_attributes +tags: + - Algemene attributen + - Attribuut + - HTML + - Naslagwerk + - Referentie + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Algemene attributen</strong> zijn attributen die kunnen worden toegepast op alle HTML-elementen, hoewel ze geen effect hebben op sommige elementen.</p> +</div> + +<p>Algemene attributen kunnen worden toegepast op alle <a href="/nl/docs/Web/HTML/Element">HTML-elementen</a>, <em>zelfs op elementen die niet worden gespecificeerd in de standaard.</em> Dat betekent dat alle elementen die niet standaard zijn, deze attributen moeten toestaan, zelfs als deze elementen ervoor zorgen dat het document niet in overeenstemming is met HTML5. Browsers die in overeenstemming zijn met HTML5 verbergen bijvoorbeeld inhoud die is gemarkeerd als <code><foo hidden>...<foo></code>, ook al is <code><foo></code> geen geldig HTML-element.</p> + +<p>Naast de fundamentele algemene attributen in HTML bestaan ook de volgende algemene attributen:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> en <code><strong>xml:base</strong></code> — deze zijn geërfd van de XHTML-specificaties en zijn verouderd, maar worden behouden voor compatibiliteitsdoeleinden.</li> + <li>De verschillende <code><strong><a href="/nl/docs/Web/Accessibility/ARIA">aria-*</a></strong></code><strong>-</strong>attributen, die worden gebruikt om toegankelijkheid te verbeteren.</li> + <li>De gebeurtenis-attributen: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Beschrijving">Beschrijving</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/nl/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Verstrekt een hint voor het genereren van een sneltoets voor het huidige element. Dit attribuut bestaat uit een lijst van karakters die worden gescheiden met spaties. De browser zou het eerste karakter moeten gebruiken dat bestaat op de layout van het toetsenbord.</dd> + <dt id="attr-class"><code><a href="/nl/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is een lijst van klassen van het element, die worden gescheiden met spaties. Met klassen kunnen CSS en JavaScript specifieke elementen selecteren en benaderen via <a href="/nl/docs/Web/CSS/Class_selectors">klasseselectoren</a> of functies zoals de methode {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/nl/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Is een genummerd attribuut dat aanduidt of een element zou moeten kunnen worden bewerkt door de gebruiker. Als dat zo is, past de browser het onderdeel aan om bewerken toe te staan. Het attribuut moet één van de volgende waarden bevatten: + <ul> + <li><code>true</code> of de lege<em> string</em>, die aanduidt dat het element bewerkbaar moet zijn;</li> + <li><code>false</code>, die aanduidt dat het element niet bewerkbaar moet zijn.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/nl/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is het <code><a href="#attr-id"><strong>id</strong></a></code> van een {{HTMLElement("menu")}} om te gebruiken als het samenhangende menu voor dit element.</dd> + <dt id="attr-dataset"><code><a href="/nl/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Vormt een klasse van attributen, genaamd aangepaste data-attributen, die ervoor zorgt dat eigendomsinformatie kan worden uitgewisseld tussen de HTML, en de representatie van zijn DOM dat door scripts kan worden gebruikt. Al die aangepaste data is beschikbaar via de {{domxref("HTMLElement")}}-interface van het element waarop het attribuut is ingesteld. De {{domxref("HTMLElement.dataset")}}-eigenschap geeft hen toegang.</dd> + <dt id="attr-dir"><code><a href="/nl/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is een genummerd attribuut dat de schrijfrichting aanduidt van de tekst van een element. Het attribuut kan de volgende waarden hebben: + <ul> + <li><code>ltr</code>, wat <em>left to right </em> (links naar rechts) betekent en wat moet worden gebruikt voor talen die van links naar rechts zijn geschreven (zoals Nederlands);</li> + <li><code>rtl</code>, wat <em>right to left </em>(rechts naar links) betekent en wat moet worden gebruikt voor talen die van rechts naar links zijn geschreven (zoals Arabisch);</li> + <li><code>auto</code>, die de gebruikersagent laat beslissen. Deze waarde gebruikt een elementair algoritme. Het verwerkt de karakters binnen een element totdat het een karakter vindt met een duidelijke schrijfrichting, waarna het die schrijfrichting toepast op het gehele element.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/nl/docs/Web/HTML/Global_attributes/draggable">draggable</a></code></dt> + <dd>Is een genummerd attribuut dat aanduidt of een element kan worden gesleept, door middel van de <a href="/nl/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. Het kan de volgende waarden bevatten: + <ul> + <li><code>true</code>, die aanduidt dat een element kan worden gesleept;</li> + <li><code>false</code>, die aanduidt dat een element niet kan worden gesleept.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/nl/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is een genummerd attribuut dat aanduidt welke soorten inhoud kunnen worden gedropt op een element, door middel van de <a href="/nl/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. Het kan de volgende waarden bevatten: + <ul> + <li><code>copy</code>, die aanduidt dat droppen een kopie aanmaakt van het element dat werd gesleept;</li> + <li><code>move</code>, die aanduidt dat een element dat werd gesleept, wordt verplaatst naar deze nieuwe locatie;</li> + <li><code>link</code>, die een link aanmaakt naar de gesleepte informatie.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/nl/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is een boolean-attribuut dat aanduidt dat een element nog niet, of niet langer <em>relevant</em> is. Het kan bijvoorbeeld worden gebruikt om elementen van een pagina te verbergen, die niet kunnen worden gebruikt totdat het inlogproces is voltooid. De browser rendert zulke elementen niet. Dit attribuut moet niet worden gebruikt om inhoud te verbergen die wel degelijk bestaansrecht heeft op de pagina.</dd> + <dt id="attr-id"><code><a href="/nl/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Definieert een unieke identificatiekenmerk (ID) dat uniek moet zijn in het gehele document. Het doel van het attribuut is om het element te identificeren wanneer ernaar wordt gelinkt (met een fragment identifier), wanneer ernaar wordt verwezen in een script of wanneer er een stijl wordt gegeven aan een element (met CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Opmerking: </strong>De volgende vijf attributen zijn onderdeel van de <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata-functie</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/nl/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>Het unieke, algemene identificatiekenmerk van een item.</dd> + <dt id="attr-itemprop"><code><a href="/nl/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Wordt gebruikt om eigenschappen toe te voegen aan een item. Aan elk HTML-element kan een itemprop-attribuut worden toegewezen, waarbij een itemprop bestaat uit een naam/waarde-paar.</dd> + <dt id="attr-itemref"><code><a href="/nl/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>Eigenschappen die niet geen nakomeling zijn van een element met het <code>itemscope</code>-attribuut kunnen worden verbonden met een item door middel van een <strong>itemref</strong>. Itemref verstrekt een lijst van element-id's (geen <code>itemid</code>'s) met extra eigenschappen ergens anders in het document.</dd> + <dt id="attr-itemscope"><code><a href="/nl/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Itemscope werkt (meestal) samen met <a href="/nl/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>om te specificeren dat HTML, dat in een block staat, over een bepaald item gaat. Itemscope maakt een item aan en definieert de scope van het itemtype dat ermee is verbonden. Itemtype is een geldige URL van een woordenlijst (zoals <a class="external external-icon" href="https://schema.org/">schema.org</a>) dat een item en de context van zijn eigenschappen beschrijft.</dd> + <dt id="attr-itemtype"><code><a href="/nl/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Specificeert de URL van de woordenlijst die gebruikt zal worden om itemprops (eigenschappen van een item) te definiëren in de informatiestructuur. <a href="/nl/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> wordt gebruikt om de scope in te stellen van waar in de informatiestructuur de woordenlijst, die is ingesteld door itemtype, actief zal zijn.</dd> + <dt id="attr-lang"><code><a href="/nl/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participeert in het definieren van de taal van het element, de taal waarin niet-bewerkbare elementen zijn geschreven, of de taal waarin bewerkbare elementen zouden moeten worden geschreven. Het label bevat een enkele beginwaarde in het formaat dat is gedefinieerd in het IETF-document <em><a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Labels voor het identificeren van talen (BCP47)</a>. </em><code><strong><a href="#attr-xml:lang">xml:lang</a></strong></code><strong> </strong>heeft hier prioriteit over.</dd> +</dl> + +<dl> + <dt id="attr-slot"><code><a href="/nl/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> + <dd>Wijst een slot toe aan een element in de shadow tree (schaduwboom) van de <a href="/nl/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>: Een element met een <code>slot</code>-attribuut wordt toegewezen aan het slot dat is aangemaakt door het {{HTMLElement("slot")}}-element, waarvan de waarden van de {{htmlattrxref("name", "slot")}}-attributen overeenkomen met die van het <code>slot</code>-attribuut.</dd> +</dl> + +<dl> + <dt id="attr-spellcheck"><code><a href="/nl/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is een genummerd attribuut dat definieert of een element gecontroleerd kan worden op spellingsfouten. Het kan de volgende waarden bevatten: + <ul> + <li><code>true</code>, die aanduidt dat het element, indien mogelijk, gecontroleerd wordt op spellingsfouten;</li> + <li><code>false</code>, die aanduidt dat het element niet gecheckt moet worden op spellingsfouten.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/nl/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Bevat stijldeclaraties van CSS die moeten worden toepast op het element. Het wordt echter wel aangeraden om de stijlen te definiëren in een apart bestand of aparte bestanden. Dit attribuut en het {{HTMLElement("style")}}-element hebben voornamelijk het doel om een stijl op een snelle manier toe te passen, bijvoorbeeld voor testdoeleinden.</dd> + <dt id="attr-tabindex"><code><a href="/nl/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is een attribuut dat gehele getallen bevat en dat aanduidt of een element kan worden gefocust, of het moet deelnemen aan opeenvolgende toetsenbordnavigatie, en als dat zo is, op welke positie. Het kan verschillende waarden bevatten: + <ul> + <li>een <em>negatieve waarde</em> betekent dat het element moet kunnen worden gefocust, maar dat het niet bereikbaar moet zijn in opeenvolgende toetsenbordnavigatie;</li> + <li><code>0</code> betekent dat het element moet kunnen worden gefocust en dat het bereikbaar moet zijn via opeenvolgende toetsenbordnavigatie, maar dat de relatieve volgorde wordt bepaald door de platformconventie;</li> + <li>een <em>positieve waarde </em>betekent dat het element moet kunnen worden gefocust en dat het bereikbaar moet zijn via opeenvolgende toetsenbordnavigatie. De relatieve volgorde wordt bepaald door attribuutwaarde. Hierbij wordt gekeken naar de toename in het nummer van de <a href="#attr-tabindex"><strong>tabindex</strong></a>. Als meerdere elementen dezelfde tabindex hebben, wordt de volgorde bepaald door de relatieve positie die ze hebben in het document. </li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/nl/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Bevat een tekst die adviserende informatie weergeeft over het element waar het bij hoort. Zulke informatie kan worden weergegeven in een tooltip.</dd> + <dt id="attr-translate"><code><a href="/nl/docs/Web/HTML/Global_attributes/translate">translate</a></code> {{experimental_inline}}</dt> + <dd>Is een genummerd attribuut dat wordt gebruikt om te specificeren of de attribuutwaarden van een element en de waarden van zijn {{domxref("Text")}}-nodekinderen moeten worden vertaald, of dat ze onveranderd moeten blijven. Het kan de volgende waarden bevatten: + <ul> + <li>lege string en <code>"yes"</code>, die aanduidt dat het element wordt vertaald;</li> + <li><code>"no"</code>, die aanduidt dat het element niet wordt vertaald.</li> + </ul> + </dd> +</dl> + +<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('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sinds het laatste snapshot, {{SpecName('HTML5.1')}}, zijn <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, en <code>itemtype</code> toegevoegd.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot van {{SpecName('HTML WHATWG')}}. Sinds {{SpecName('HTML5 W3C')}} zijn <code>spellcheck</code>, <code>draggable</code>, en <code>dropzone</code> toegevoegd.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot van {{SpecName('HTML WHATWG')}}. Sinds {{SpecName("HTML4.01")}}, is het concept van algemene attributen geïntroduceerd en <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, en <code>title</code> zijn nu echte algemene attributen.<br> + <code>xml:lang</code>, die eerst onderdeel was van XHTML, is nu ook onderdeel van HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, en <code>translate</code> zijn toegevoegd.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Er zijn geen algemene attributen gedefinieerd. Verschillende attributen, die algemene attributen zullen worden in opeenvolgende specificaties, zijn gedefinieerd op een subset van elementen.<br> + <code>class</code> en <code>style</code> worden ondersteund op alle elementen, behalve {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, en {{HTMLElement("title")}}.<br> + <code>dir</code> wordt ondersteund op alle elementen, behalve {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, en {{HTMLElement("script")}}.<br> + <code>id</code> wordt ondersteund op alle elementen, behalve {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, en {{HTMLElement("title")}}.<br> + <code>lang</code> wordt ondersteund op alle elementen, behalve {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, en {{HTMLElement("script")}}.<br> + <code>tabindex</code> wordt alleen ondersteund op {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, en {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> wordt alleen ondersteund op {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} en {{HTMLElement("textarea")}}.<br> + <code>title</code> wordt ondersteund op alle elementen, behalve {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, en {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></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>Functie</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><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{domxref("Element")}}- en {{domxref("GlobalEventHandlers")}}-interfaces waarmee de meeste algemene attributen kunnen worden opgevraagd.</li> +</ul> diff --git a/files/nl/web/html/global_attributes/style/index.html b/files/nl/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..95d2af793f --- /dev/null +++ b/files/nl/web/html/global_attributes/style/index.html @@ -0,0 +1,112 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - Algemene attributen + - HTML + - Naslagwerk + - Referentie +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Het <a href="/nl/docs/Web/HTML/Global_attributes">algemene attribuut</a> <strong>style</strong> bevat stijldeclaraties van CSS die worden toegepast op het element. Het wordt echter wel aangeraden om de stijlen te definiëren in een apart bestand of aparte bestanden. Dit attribuut en het {{HTMLElement("style")}}-element hebben voornamelijk het doel om een stijl op een snelle manier toe te passen, bijvoorbeeld voor testdoeleinden.</p> + +<div class="note"> +<p><strong>Opmerking voor gebruik: </strong>Dit attribuut moet niet worden gebruikt voor het overbrengen van semantische informatie. Zelfs als alle stijlen zijn verwijderd, moet een pagina semantisch correct zijn. Het attribuut dient ook niet gebruikt te worden voor het verbergen van irrelevante informatie; dit moet gedaan worden met het <strong><a href="/nl/docs/Web/HTML/Global_attributes/hidden">hidden</a></strong>-attribuut.</p> +</div> + +<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('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen verandering vanaf het nieuwste snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot van {{SpecName('HTML WHATWG')}}, geen verandering vanaf {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot van {{SpecName('HTML WHATWG')}}. Vanaf {{SpecName("HTML4.01")}}, is het nu echt een algemeen attribuut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Ondersteund op alle elementen, behalve {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, en {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Definineert de inhoud van het <code>style</code>-attribuut.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basissupport</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>Functie</th> + <th>Android</th> + <th>Chrome voor Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basissupport</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="Zie_ook">Zie ook</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">algemene attributen</a>.</li> +</ul> diff --git a/files/nl/web/html/index.html b/files/nl/web/html/index.html new file mode 100644 index 0000000000..09c1f6d0ef --- /dev/null +++ b/files/nl/web/html/index.html @@ -0,0 +1,105 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - Naslagwerk + - Referenties +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) is de meest fundamentele bouwsteen van het web. Het beschrijft en definieert de <em>inhoud</em> van een webpagina. Andere technologieën naast HTML worden over het algemeen gebruikt voor het beschrijven van het uiterlijk of de presentatie (<a href="/nl/docs/Web/CSS">CSS</a>), of de functionaliteit of het gedrag (<a href="/nl/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"HyperText" verwijst naar links die webpagina's met elkaar verbinden, zowel binnen als tussen websites. Links zijn een fundamenteel aspect van het web. Door het uploaden van inhoud naar het internet en het linken van deze inhoud aan pagina's die zijn gemaakt door andere mensen, wordt u een actieve deelnemer van het wereldwijde web.</p> + +<p>HTML gebruikt 'markup' (opmaak in het Nederlands) voor het annoteren van tekst, afbeeldingen en andere inhoud zodat het kan worden weergegeven in een webbrowser. HTML-opmaak bevat speciale 'elementen' zoals {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, en nog veel meer.</p> + +<p>Tags in HTML zijn niet hoofdlettergevoelig. Dat betekent dat ze kunnen worden geschreven met hoofdletters, in kleine letters, of een mengsel hiervan. De <strong><title></strong>-tag kan bijvoorbeeld worden geschreven als <Title>, <TiTlE>, of op welke manier dan ook.</p> + +<p>De artikelen hieronder helpen u om meer te leren over HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Introductie tot HTML</span> + + <p>Als webontwikkeling nieuw voor u is, zorg er dan voor dat u <a href="/nl/docs/Learn/Getting_started_with_the_web/HTML_basisbegrippen">de basisbegrippen van HTML</a> leest, om te leren over wat HTML is en hoe u het kunt gebruiken.</p> + </li> + <li><span>Tutorials voor HTML</span> + <p>Onze <a href="/nl/docs/Learn/HTML">leeromgeving voor HTML</a> bevat artikelen over hoe HTML te gebruiken, maar ook tutorials en gedetailleerde voorbeelden.</p> + </li> + <li><span>Naslagwerk voor HTML</span> + <p>In ons uitgebreide <a href="/nl/docs/Web/HTML/Reference">naslagwerk voor HTML</a> vindt u details over elke element en attribuut in HTML.</p> + </li> +</ul> +</section> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Tutorials voor beginners</h2> + +<p>In onze <a href="/nl/docs/Learn/HTML">leeromgeving voor HTML</a> worden verschillende modules uitgelicht die u HTML leren vanaf de basis — er is geen voorkennis nodig.</p> + +<dl> + <dt><a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a></dt> + <dd>Deze module is het startpunt, waarbij u bekend wordt met belangrijke concepten en syntax, bekijkt hoe u HTML op tekst kunt toepassen, leert hoe u hyperlinks kunt maken en leert hoe u HTML kunt gebruiken om een webpagina te structureren.</dd> + <dt><a href="/nl/docs/Learn/HTML/Multimedia_inbedden">Multimedia en inbedden</a></dt> + <dd>Deze module geeft inzicht over hoe HTML kan worden gebruikt om multimedia in te voegen in uw webpagina's, de verschillende manieren waarop afbeeldingen kunnen worden ingevoegd en hoe video, audio en zelfs andere webpagina's kunnen worden ingebed.</dd> + <dt><a href="/nl/docs/Learn/HTML/Tables">Tabellen in HTML</a></dt> + <dd>Het weergeven van informatie in tabelweergave op een toegankelijke manier kan een uitdaging zijn. Deze module legt de basis van de opmaak van tabellen uit, samen met ingewikkeldere functies zoals het implementeren van onderschriften en samenvattingen.</dd> + <dt><a href="/nl/Learn/HTML/Forms">HTML forms</a></dt> + <dd>Formulieren zijn een heel belangrijk gedeelte van het web — ze zijn onderdeel van de functionaliteit die u nodig hebt voor de interactie met websites, zoals registreren en inloggen, feedback verzenden, producten kopen, en meer. Met behulp van deze module kunt u beginnen met het maken van gedeeltes van formulieren, die nodig zijn aan de clientkant.</dd> + <dt><a href="/nl/docs/Learn/HTML/Howto">HTML gebruiken voor het oplossen van veelvoorkomende problemen</a></dt> + <dd>Deze module bevat links naar secties met inhoud die uitleggen hoe HTML kan worden gebruikt om veelvoorkomende problemen op te lossen wanneer u een webpagina maakt: Hoe gaat u met titels om, hoe voegt u afbeeldingen of video's toe, hoe benadrukt u inhoud, hoe maakt u een eenvoudig formulier, enzovoort.</dd> +</dl> + +<h2 id="Onderwerpen_voor_gevorderden">Onderwerpen voor gevorderden</h2> + +<dl> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> + <dd class="landingPageList">Het <code><a href="/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a>-</code>attribuut wordt gecombineerd met een geschikte {{Glossary("CORS")}}-hoofding. Het zorgt ervoor dat afbeeldingen die worden gedefinieerd door het {{HTMLElement("img")}}-element, kunnen worden geladen van een ander domein en kunnen worden gebruikt in een {{HTMLElement("canvas")}}-element alsof ze worden geladen vanaf het eigen domein.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/CORS_settings_attributes">CORS instellingsattributen</a></dt> + <dd class="landingPageList">Sommige HTML-elementen die <a href="/nl/docs/HTTP/Access_control_CORS">CORS</a> ondersteunen, zoals {{HTMLElement("img")}} of {{HTMLElement("video")}}, hebben een <code>crossorigin</code>-attribuut (<code>crossOrigin</code>-eigenschap) die u de CORS-aanvragen laten cofigureren voor de opgehaalde data van het element.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Focus_management_in_HTML">Focus beheren in HTML</a></dt> + <dd class="landingPageList">Het <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code>-attribuut en de <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code>-methode van de DOM helpen u om de interacties van de gebruiker met elementen op een webpagina te volgen en beheersen.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Using_the_application_cache">De cache van een applicatie gebruiken</a></dt> + <dd class="landingPageList">Door het cachen van een applicatie kunnen webgebaseerde applicaties offline werken. U kunt de interface van <strong>Application Cache</strong> (<em>AppCache</em>) gebruiken om te specificeren welke bronnen de browser moet cachen en beschikbaar moet maken voor offline gebruikers. Applicaties die gecachet zijn, laden en werken op de juiste manier, zelfs wanneer de gebruiker de verversknop indrukt als hij offline is.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Preloading_content">Inhoud vooraf uploaden met rel="preload"</a></dt> + <dd class="landingPageList">Met de <code>preload</code>-waarde van het {{htmlattrxref("rel", "link")}}-attribuut van {{htmlelement("link")}}-elementen kunt u verklarende ophaalaanvragen schrijven in het {{htmlelement("head")}}-element van uw HTML. U specificeert welke bronnen uw pagina's heel snel nodig hebben na het laden, die u om die reden vroeg in de levenscyclus van het laden van een pagina vooraf wilt uploaden, voordat de browser begint te renderen. Dit garandeert dat de bronnen eerder beschikbaar zijn en er minder kans is dat ze de eerste render van de pagina blokkeren, waardoor prestaties worden verbeterd. Dit artikel legt de basis uit van de werking van <code>preload</code>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Naslagwerken">Naslagwerken</h2> + +<dl> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Naslagwerk">Naslagwerk voor HTML</a></dt> + <dd class="landingPageList">HTML bestaat uit <strong>elementen</strong> die kunnen worden aangepast door aantal <strong>attributen</strong>. HTML-documenten zijn met elkaar verbonden door middel van <a href="/nl/docs/Web/HTML/Link_types">links</a>.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Element">Naslagwerk voor HTML-elementen</a></dt> + <dd class="landingPageList">Doorzoek een lijst van alle {{Glossary("HTML")}}-{{Glossary("element")}}en.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Attributes">Naslagwerk voor HTML-attributen</a></dt> + <dd class="landingPageList">Elementen in HTML hebben <strong>attributen</strong>. Dit zijn extra waarden die een element configureren of hun gedrag aanpassen op verschillende manieren.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Global_attributes">Algemene attributen</a></dt> + <dd class="landingPageList">Algemene attributen kunnen worden toegepast op alle <a href="/nl/docs/Web/HTML/Element">HTML-elementen</a>, <em>zelfs op elementen die niet worden gespecificeerd in de standaard.</em> Dit betekent dat alle elementen die niet standaard zijn, deze attributen moeten toestaan, zelfs als deze elementen ervoor zorgen dat het document niet in overeenstemming is met HTML5.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Inline_elements">Inline-elementen</a> en <a href="/en-US/docs/Web/HTML/Block-level_elements">elementen op blockniveau</a></dt> + <dd class="landingPageList">HTML-elementen zijn veelal inline-elementen of elementen op blockniveau. Een inline-element bezet alleen de ruimte die wordt begrensd door de tags die dit definiëren. Een element op blockniveau bezet de gehele ruimte van het element dat erboven ligt, waarmee het een "block" maakt.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Link_types">Linktypes</a></dt> + <dd class="landingPageList">In HTML kunnen verschillende linktypes worden gebruikt om de relatie tussen twee documenten vast te stellen en te definiëren. Link-elementen waarop types kunnen worden gevestigd zijn <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, en <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Supported_media_formats">Mediaformaten ondersteund door audio- en video-elementen van HTML</a></dt> + <dd class="landingPageList">Met <code><a href="/en-US/docs/Web/HTML/Element/audio"><audio></a></code>- en <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code>-elementen kunnen audio- en videomedia worden afgespeeld. Deze elementen zijn een browser-eigen alternatief voor mogelijkheden zoals Adobe Flash en andere plug-ins.</dd> + <dt class="landingPageList"><a href="/nl/docs/Web/HTML/Kinds_of_HTML_content">Inhoudssoorten in HTML</a></dt> + <dd class="landingPageList">HTML bestaat uit verschillende soorten inhoud, die in bepaalde contexten wel of niet worden toegestaan. Daarnaast heeft elke soort inhoud een verzameling van andere inhoudscategorieën die hij kan bevatten en elementen die wel of niet kunnen worden gebruikt. Dit is een gids voor deze categorieën.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode en standards mode</a></dt> + <dd class="landingPageList">Historische informatie over quirks mode en standards mode.</dd> +</dl> + +<h2 class="landingPageList" id="Gerelateerde_onderwerpen">Gerelateerde onderwerpen</h2> + +<dl> + <dt><a href="/nl/docs/Web/HTML/Applying_color">Kleuren toepassen op HTML-elementen met CSS</a></dt> + <dd>Dit artikel gaat over de meeste manieren waarop CSS kan worden gebruikt om kleuren toe te voegen aan HTML-inhoud. Hierbij wordt ingegaan op welke onderdelen van een HTML-document kan worden gekleurd en welke CSS-eigenschappen worden gebruikt om dit te doen. Het artikel bevat ook voorbeelden, links naar gereedschap om paletten te maken, en meer.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/nl/docs/tag/HTML">Alles bekijken...</a></span></p> diff --git a/files/nl/web/http/cors/errors/corsdidnotsucceed/index.html b/files/nl/web/http/cors/errors/corsdidnotsucceed/index.html new file mode 100644 index 0000000000..111d7df5d5 --- /dev/null +++ b/files/nl/web/http/cors/errors/corsdidnotsucceed/index.html @@ -0,0 +1,30 @@ +--- +title: 'Reason: CORS request did not succeed' +slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed +tags: + - Beveiliging + - CORS + - Cross-Origin-aanvraag + - Foutmelding + - HTTP + - HTTPS + - console +translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="Reden">Reden</h2> + +<pre class="syntaxbox">Reason: CORS request did not succeed</pre> + +<h2 id="Wat_gaat_er_fout">Wat gaat er fout?</h2> + +<p>Het {{Glossary("HTTP")}} request welke gebruik maakt van CORS faalt doordat de HTTP connectie is mislukt op het netwerk of protocol niveau. De error is niet direct te relateren aan de CORS, maar is een fundamentele netwerkfout.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> +</ul> diff --git a/files/nl/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html b/files/nl/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html new file mode 100644 index 0000000000..8c29bdd056 --- /dev/null +++ b/files/nl/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html @@ -0,0 +1,40 @@ +--- +title: >- + Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from + CORS preflight channel +slug: Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight +tags: + - CORS + - CORSMissingAllowHeaderFromPreflight + - Cross-Origin + - Error + - Fout + - HTTP + - HTTPS + - Reasons + - Redenen + - Security + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="Reden">Reden</h2> + +<pre class="syntaxbox">Reden: Het token ‘xyz’ mist in de CORS header ‘Access-Control-Allow-Headers’ van de CORS preflight channel</pre> + +<h2 id="Wat_ging_er_mis">Wat ging er mis?</h2> + +<p>De <code>Access-Control-Allow-Headers</code> header is gestuurd door de server om de client te laten weten welke headers worden ondersteund voor {{Glossary("CORS")}} verzoeken. De waarde van <code>Access-Control-Allow-Headers</code> zou een met komma-afgebakende lijst zijn met header namen, zoals bijvoorbeeld <code>"X-Custom-Information"</code> of elke andere standaard, maar niet een basic header name (deze worden namelijk altijd toegestaan).</p> + +<p>Als de {{Glossary("user agent")}} niet een waarde kan detecteren speciaal voor deze header - ook al zit deze header wel in de reponse - onstaat deze error.</p> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introductie</a></li> + <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li> +</ul> diff --git a/files/nl/web/http/cors/errors/index.html b/files/nl/web/http/cors/errors/index.html new file mode 100644 index 0000000000..d1dd12dc75 --- /dev/null +++ b/files/nl/web/http/cors/errors/index.html @@ -0,0 +1,76 @@ +--- +title: CORS errors +slug: Web/HTTP/CORS/Errors +tags: + - CORS + - Errors + - HTTP + - HTTPS + - Messages + - NeedsTranslation + - Same-origin + - Security + - TopicStub + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p> + +<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p> + +<h2 id="Identifying_the_issue">Identifying the issue</h2> + +<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p> + +<ol> + <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li> + <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li> +</ol> + +<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p> + +<p>The text of the error message will be something similar to the following:</p> + +<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows +reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: +additional information here</em>).</span></span></span></pre> + +<div class="note"> +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p> +</div> + +<h2 id="CORS_error_messages">CORS error messages</h2> + +<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> + <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li> + <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li> +</ul> diff --git a/files/nl/web/http/cors/index.html b/files/nl/web/http/cors/index.html new file mode 100644 index 0000000000..463a0011bf --- /dev/null +++ b/files/nl/web/http/cors/index.html @@ -0,0 +1,567 @@ +--- +title: Cross-Origin Resource Sharing (CORS) +slug: Web/HTTP/CORS +tags: + - AJAX + - CORS + - Cross-Origin Resource Sharing + - Fetch + - Fetch API + - HTTP + - HTTP Access Controls + - NeedsTranslation + - Same-origin policy + - Security + - TopicStub + - XMLHttpRequest + - 'l10n:priority' +translation_of: Web/HTTP/CORS +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary">Cross-Origin Resource Sharing ({{Glossary("CORS")}}) is a mechanism that uses additional {{Glossary("HTTP")}} headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.</span> A web application executes a <strong>cross-origin HTTP request</strong> when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.</p> + +<p>An example of a cross-origin request: The frontend JavaScript code for a web application served from <code>http://domain-a.com</code> uses {{domxref("XMLHttpRequest")}} to make a request for <code>http://api.domain-b.com/data.json</code>.</p> + +<p>For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, <code>XMLHttpRequest</code> and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> follow the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 643px; width: 925px;"></p> + +<p>The CORS mechanism supports secure cross-origin requests and data transfers between browsers and web servers. Modern browsers use CORS in an API container such as <code>XMLHttpRequest</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> to help mitigate the risks of cross-origin HTTP requests.</p> + +<h2 id="Who_should_read_this_article">Who should read this article?</h2> + +<p>Everyone, really.</p> + +<p>More specifically, this article is for web administrators, server developers, and front-end developers. Modern browsers handle the client-side components of cross-origin sharing, including headers and policy enforcement. But this new standard means servers have to handle new request and response headers. Another article for server developers discussing <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">cross-origin sharing from a server perspective (with PHP code snippets)</a> is supplementary reading.</p> + +<h2 id="What_requests_use_CORS">What requests use CORS?</h2> + +<p>This <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">cross-origin sharing standard</a> is used to enable cross-site HTTP requests for:</p> + +<ul> + <li>Invocations of the {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs in a cross-site manner, as discussed above.</li> + <li>Web Fonts (for cross-domain font usage in <code>@font-face</code> within CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>.</li> + <li>Images/video frames drawn to a canvas using {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li> +</ul> + +<p>This article is a general discussion of Cross-Origin Resource Sharing and includes a discussion of the necessary HTTP headers.</p> + +<h2 id="Functional_overview">Functional overview</h2> + +<p>The Cross-Origin Resource Sharing standard works by adding new <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than {{HTTPMethod("GET")}}, or for {{HTTPMethod("POST")}} usage with certain <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP {{HTTPMethod("OPTIONS")}} request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> and HTTP Authentication data) should be sent with requests.</p> + +<p>CORS failures result in errors, but for security reasons, specifics about what went wrong <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</p> + +<p>Subsequent sections discuss scenarios, as well as provide a breakdown of the HTTP headers used.</p> + +<h2 id="Examples_of_access_control_scenarios">Examples of access control scenarios</h2> + +<p>Here, we present three scenarios that illustrate how Cross-Origin Resource Sharing works. All of these examples use the {{domxref("XMLHttpRequest")}} object, which can be used to make cross-site invocations in any supporting browser.</p> + +<p>The JavaScript snippets included in these sections (and running instances of the server-code that correctly handles these cross-site requests) can be found "in action" at <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, and will work in browsers that support cross-site <code>XMLHttpRequest</code>.</p> + +<p>A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> article.</p> + +<h3 id="Simple_requests">Simple requests</h3> + +<p>Some requests don’t trigger a <a href="#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="#Preflighted_requests">CORS preflight</a>—a so-called “simple request” — is one that <strong>meets all the following conditions</strong>:</p> + +<ul> + <li>The only allowed methods are: + <ul> + <li>{{HTTPMethod("GET")}}</li> + <li>{{HTTPMethod("HEAD")}}</li> + <li>{{HTTPMethod("POST")}}</li> + </ul> + </li> + <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are: + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li>{{HTTPHeader("Downlink")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are: + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li> + <li>No {{domxref("ReadableStream")}} object is used in the request.</li> +</ul> + +<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div> + +<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> + +<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/public-data/'; + +function callOtherDomain() { + if(invocation) { + invocation.open('GET', url, true); + invocation.onreadystatechange = handler; + invocation.send(); + } +} +</pre> + +<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> + +<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p> + +<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/access-control/simpleXSInvocation.html +Origin: http://foo.example + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2.0.61 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml + +[XML Data] +</pre> + +<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p> + +<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p> + +<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> + +<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p> + +<h3 id="Preflighted_requests">Preflighted requests</h3> + +<p>Unlike <a href="#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p> + +<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p> + +<ul> + <li><strong>If</strong> the request uses any of the following methods: + + <ul> + <li>{{HTTPMethod("PUT")}}</li> + <li>{{HTTPMethod("DELETE")}}</li> + <li>{{HTTPMethod("CONNECT")}}</li> + <li>{{HTTPMethod("OPTIONS")}}</li> + <li>{{HTTPMethod("TRACE")}}</li> + <li>{{HTTPMethod("PATCH")}}</li> + </ul> + </li> + <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the <strong>OTHER</strong> header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following: + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li>{{HTTPHeader("Downlink")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value <strong>OTHER THAN</strong> the following: + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li> + <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li> +</ul> + +<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> + +<p>The following is an example of a request that will be preflighted.</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/post-here/'; +const body = '<?xml version="1.0"?><person><name>Arun</name></person>'; + +function callOtherDomain(){ + if(invocation) + { + invocation.open('POST', url, true); + invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); + invocation.setRequestHeader('Content-Type', 'application/xml'); + invocation.onreadystatechange = handler; + invocation.send(body); + } +} + +...... +</pre> + +<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16401/preflight_.png" style="height: 555px; width: 538px;"></p> + +<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p> + +<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p> + +<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Origin: http://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + + +HTTP/1.1 204 No Content +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +</pre> + +<p>Once the preflight request is complete, the real request is sent:</p> + +<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: http://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: http://foo.example +Pragma: no-cache +Cache-Control: no-cache + +<?xml version="1.0"?><person><name>Arun</name></person> + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some GZIP'd payload] +</pre> + +<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p> + +<pre class="brush: none">Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +</pre> + +<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and <code>Content-Type</code> custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p> + +<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400</pre> + +<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p> + +<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p> + +<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p> + +<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4> + +<p>Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.</p> + +<blockquote> +<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> +</blockquote> + +<blockquote> +<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> +</blockquote> + +<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p> + +<p>So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p> + +<ul> + <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li> + <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li> +</ul> + +<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p> + +<ol> + <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li> + <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li> +</ol> + +<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p> + +<h3 id="Requests_with_credentials">Requests with credentials</h3> + +<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest</code> object or the {{domxref("Request")}} constructor when it is invoked.</p> + +<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/credentialed-content/'; + +function callOtherDomain(){ + if(invocation) { + invocation.open('GET', url, true); + invocation.withCredentials = true; + invocation.onreadystatechange = handler; + invocation.send(); + } +}</pre> + +<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> + +<p>Here is a sample exchange between client and server:</p> + +<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/credential.html +Origin: http://foo.example +Cookie: pageAccess=2 + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 +X-Powered-By: PHP/5.2.6 +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + + +[text/plain payload] +</pre> + +<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p> + +<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4> + +<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p> + +<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p> + +<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p> + +<h4 id="Third-party_cookies">Third-party cookies</h4> + +<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p> + +<h2 id="The_HTTP_response_headers">The HTTP response headers</h2> + +<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p> + +<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> + +<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * +</pre> + +<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p> + +<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> + +<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.</p> + +<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access.</p> + +<pre class="brush: none">Access-Control-Expose-Headers: <field-name>[, <field-name>]* +</pre> + +<p>For example, the following:</p> + +<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +</pre> + +<p>…would allow the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> + +<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> + +<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> + +<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> +</pre> + +<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> + +<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> + +<pre class="brush: none">Access-Control-Allow-Credentials: true +</pre> + +<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> + +<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> + +<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* +</pre> + +<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> + +<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> + +<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* +</pre> + +<h2 id="The_HTTP_request_headers">The HTTP request headers</h2> + +<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p> + +<h3 id="Origin">Origin</h3> + +<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> + +<pre class="brush: none">Origin: <origin> +</pre> + +<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> + +<div class="note"><strong>Note:</strong> The <code>origin</code> value can be <code>null</code>, or a URI.</div> + +<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p> + +<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> + +<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> + +<pre class="brush: none">Access-Control-Request-Method: <method> +</pre> + +<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> + +<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> + +<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* +</pre> + +<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<ul> + <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li> + <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a> + <ul> + </ul> + </li> + <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> + <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> + <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> + <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>: + <ul> + <li>How to avoid the CORS preflight</li> + <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li> + <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li> + </ul> + </li> +</ul> diff --git a/files/nl/web/http/headers/index.html b/files/nl/web/http/headers/index.html new file mode 100644 index 0000000000..b6923ef46d --- /dev/null +++ b/files/nl/web/http/headers/index.html @@ -0,0 +1,370 @@ +--- +title: HTTP headers +slug: Web/HTTP/Headers +tags: + - HTTP + - Headers + - NeedsTranslation + - Networking + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p> + +<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p> + +<p>Headers can be grouped according to their contexts:</p> + +<ul> + <li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li> + <li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li> + <li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li> + <li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li> +</ul> + +<p>Headers can also be grouped according to how proxies handle them:</p> + +<dl> + <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt> + <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time in seconds the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Specifies directives for caching mechanisms in both requests and responses.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>A general warning field containing information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Content-DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Downlink")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Save-Data")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Viewport-Width")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Width")}}</dt> + <dd>...</dd> +</dl> + +<dl> + <dt> + <h2 id="Conditionals">Conditionals</h2> + </dt> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation">Content negotiation</h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Informs the server about which character set the client is able to understand.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> +</dl> + +<dl> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> + <dt> + <h2 id="CORS">CORS</h2> + </dt> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> + <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> + <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Used for expressing the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status that applied to the corresponding request.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> + <dt> + <h2 id="Proxies">Proxies</h2> + </dt> +</dl> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("SourceMap")}}</dt> + <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> + <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Contributing">Contributing</h2> + +<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> +</ul> diff --git a/files/nl/web/http/headers/location/index.html b/files/nl/web/http/headers/location/index.html new file mode 100644 index 0000000000..f942be6693 --- /dev/null +++ b/files/nl/web/http/headers/location/index.html @@ -0,0 +1,76 @@ +--- +title: Location +slug: Web/HTTP/Headers/Location +translation_of: Web/HTTP/Headers/Location +--- +<p>De <strong><code>Location</code></strong> antwoord header geeft de URL aan waar naar de pagina veranderd is. Het is alleen van toepassing bij een <code>3xx</code> status antwoord.</p> + +<p>De HTTP methode die wordt gebruikt om een nieuwe aanvraag op te halen die verwezen wordt door de<code>Location</code> hangt van de orginele methode en de type van omleiding af.</p> + +<ul> + <li>{{HTTPStatus("303")}} (Zie ook) leidt altijd naar een {{HTTPMethod("GET")}} methode, {{HTTPStatus("307")}} (Tijdelijke Omleiding) en {{HTTPStatus("308")}} (Permanent Redirect) veranderen de orginele methode niet.</li> + <li>{{HTTPStatus("301")}} (Permanente Omleiding) en {{HTTPStatus("302")}} (Gevonden) veranderen de methode meestal niet, maar oudere user-agents zouden dat wel kunnen (dus je weet het eigenlijk niet).</li> +</ul> + +<p>Alle antwoorden met een van deze statussen sturen een <code>Location</code> header.</p> + +<p>Niet alleen een omleidings antwoord, maar ook berichten met een{{HTTPHeader("201")}} (Aangemaakt) status hebben ook een<code>Location</code> header. Het weergeeft de URL van de nieuw gemaakte hulpbron.</p> + +<p><code>Location</code> en {{HTTPHeader("Content-Location")}} zijn anders: <code>Location</code> geeft de bestemming aan van de omleiding (of de URL van de nieuw aangemaake hulpbron), terwijl {{HTTPHeader("Content-Location")}} de directe URL weergeeft die zou moeten worden gebruikt wanneer er een <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a> gebeurt, zonder verdere onderhandeling. <code>Location</code> is een header die bij een antwoord hoort, terwijl een {{HTTPHeader("Content-Location")}} hoort bij een entity die terug verzonden is.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("Antwoord header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Verboden header naam")}}</th> + <td>Nee</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Location: <url> +</pre> + +<h2 id="Richtlijnen">Richtlijnen</h2> + +<dl> + <dt><url></dt> + <dd>Een relatieve (naar de aanvraag) of absolute URL.</dd> +</dl> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre>Location: /index.html</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Titel</th> + </tr> + <tr> + <td>{{RFC("7231", "Location", "7.1.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_ondersteuning">Browser ondersteuning</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Location")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{HTTPHeader("Content-Location")}}</li> + <li>Status van antwoorden met een <code>Location</code> header: {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.</li> +</ul> diff --git a/files/nl/web/http/headers/x-content-type-options/index.html b/files/nl/web/http/headers/x-content-type-options/index.html new file mode 100644 index 0000000000..bf87fc98ea --- /dev/null +++ b/files/nl/web/http/headers/x-content-type-options/index.html @@ -0,0 +1,84 @@ +--- +title: X-Content-Type-Options +slug: Web/HTTP/Headers/X-Content-Type-Options +translation_of: Web/HTTP/Headers/X-Content-Type-Options +--- +<div>{{HTTPSidebar}}</div> + +<div>De <code><strong>X-Content-Type-Options</strong></code> antwoord HTTP header is een aanduiding die door de server wordt gebruikt om aan te tonen dat de <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types </a>die in de {{HTTPHeader("Content-Type")}} headers zijn geadverteerd, niet gewijzigd moeten worden en moeten worden gevold. Dit zorgt voor de mogelijkheid om niet deel te nemen aan <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME type sniffing, </a>of, met andere woorden, het is een manier waarop de webmasters tonen dat ze weten wat ze deden</div> + +<div> </div> + +<div>Deze header is geïntroduceerd door Microsoft in IE8 om webmasters de mogelijkheid te geven om het content sniffing te blokkeren dat toen gebeurde. De header kan niet uitvoerbare MIME types omvormen tot uitvoerbare MIME types. Andere browsers hebben dit later ook geïntroduceerd, ook al zijn hun MIME sniffing algoritmes minder agressief.</div> + +<div> </div> + +<div>Site veiligheid testers verwachten dat deze header geset is.</div> + +<div> </div> + +<p class="blockIndicator note">Nota: <code>nosniff</code> wordt enkel toegepast op "<code>script</code>" en"<code>style</code>" types. Het toepassen van de <code>nosniff</code> op afbeeldingen bleek niet <a href="https://github.com/whatwg/fetch/issues/395">compatibel te zijn met bestaande websites.</a></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>nee</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">X-Content-Type-Options: nosniff +</pre> + +<h2 id="Directives">Directives</h2> + +<dl> + <dt><code>nosniff</code></dt> + <dd>Blokkeert een aanvraag van het aangevraagde type als + <ul> + <li>"<code>style</code>" en het MIME type niet "<code>text/css</code>" zijn, of</li> + <li>"<code>script</code>" en het MIME type zijn niet een <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript MIME type</a>.</li> + </ul> + </dd> +</dl> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + + + +<p>{{Compat("http.headers.X-Content-Type-Options")}}</p> + +<h2 id="Verder_lezen">Verder lezen</h2> + +<ul> + <li>{{HTTPHeader("Content-Type")}}</li> + <li>De <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">originele Microsoft definitie</a> van X-Content-Type-Options.</li> + <li>De <a href="https://observatory.mozilla.org/">Mozilla Observatory</a> tool voor het testen van de configuratie (waaronder deze header) van Websites voor veiligheid en bewaking</li> + <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Beperken van MIME Confusion aanvallen in Firefox</a></li> + <li><a href="https://fetch.spec.whatwg.org/#corb">Cross-Origin Read Blocking (CORB)</a></li> + <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explainer</a></li> +</ul> diff --git a/files/nl/web/http/index.html b/files/nl/web/http/index.html new file mode 100644 index 0000000000..b847d235b5 --- /dev/null +++ b/files/nl/web/http/index.html @@ -0,0 +1,87 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is een <a href="https://en.wikipedia.org/wiki/Application_Layer">applicatie-laag</a> protocol voor het versturen van hypermedia documenten, zoals HTML. Het was ontworpen voor communicatie tussen web browsers en web servers, maar het kan ook worden gebruikt voor andere doeleinden. HTTP volgt een klassiek <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, waarbij een client een verbinding opent om een aanvraag te doen en vervolgens wacht op een reactie. HTTP is een <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, Dit betekend dat de server geen data (state) bewaard tussen twee aanvragen. Hoewel het meestal gebaseerd is op een TCP/IP laag, kan het ook worden gebruikt op elk andere betrouwbare <a href="http://en.wikipedia.org/wiki/Transport_Layer">transport laag</a>; dat houd in, een protocol dat niet ongezien berichten verliest zoals UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Leer hoe je HTTP moet gebruiken met handleidingen en tutorials.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">Overzicht van HTTP</a></dt> + <dd>De basis functies van het client-server protocol: wat het kan doen en het beoogde gebruik.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is erg belangrijk voor snelle websites. Dit artikel beschrijft de verschillende methodes van caching en hoe HTTP Headers gebruikt worden om het te gebruiken.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>Hoe cookies werken is gedefinieerd door <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolutie van HTTP</a></dt> + <dd>Een korte beschrijving van de veranderingen van de vroege versies van HTTP, het moderne HTTP/2 en verder.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security richtlijnen</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">Een doorsnee HTTP-sessie</a></dt> + <dd>LatShows and explains the flow of a usual HTTP session.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referentie">Referentie</h2> + +<p>Blader door gedetailleerde HTTP-referentiedocumentatie.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP berichtheaders worden gebruikt om een bron of het gedrag van de server of client te beschrijven. Eigen headers kunnen toegevoegd worden door gebruik te maken van het <code>X-</code> voorvoegsel; anderen in een <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA-register</a>, waarvan de originele inhoud gedefinieerd is in <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA houd ook een <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">register van voorgestelde nieuwe HTTP-berichtheaders</a> bij.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP-richtlijnen</a></dt> + <dd>De {{HTTPHeader("Content-Security-Policy")}} antwoordheaderresponse header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Tools_en_bronnen">Tools en bronnen</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools om je cache-gerelateerde headers te controleren.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Hoe Browsers Werken</a></dt> + <dd>Een zeer uitgebreid artikel over browser internals en het aanvraagverloop door het HTTP protocol. Een MUST-READ voor elke webontwikkelaar.</dd> +</dl> +</div> +</div> diff --git a/files/nl/web/http/status/100/index.html b/files/nl/web/http/status/100/index.html new file mode 100644 index 0000000000..366ce793ea --- /dev/null +++ b/files/nl/web/http/status/100/index.html @@ -0,0 +1,48 @@ +--- +title: 100 Continue +slug: Web/HTTP/Status/100 +tags: + - HTTP + - Informatief + - Status code +translation_of: Web/HTTP/Status/100 +--- +<div>{{HTTPSidebar}}</div> + +<div>De HTTP <strong><code>100 Continue</code></strong> informatie status reactie code geeft aan dat alles tot nu toe in orde is en dat de client door moet gaan met de aanvraag of het moet negeren wanneer deze al is afgerond.</div> + +<div> </div> + +<div>Om een server de request's headers te laten checken, moet een client een {{HTTPHeader("Expect")}} <code>: 100-continue</code> versturen als een header in zijn originele aanvraag en een <code>100 Continue</code> status code ontvangen in de reactie voor dat de body wordt verstuurd.</div> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">100 Continue</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Titel</th> + </tr> + <tr> + <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_ondersteuning">Browser ondersteuning</h2> + +<p class="hidden">De ondersteuningstabel in deze pagina is gegenereerd van gestructureerde data. Als je wil bijdragen aan deze data, ga dan naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>en stuur ons een pull request.</p> + +<p>{{Compat("http.status.100")}}</p> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{HTTPHeader("Expect")}}</li> + <li>{{HTTPStatus(417)}}</li> +</ul> diff --git a/files/nl/web/http/status/200/index.html b/files/nl/web/http/status/200/index.html new file mode 100644 index 0000000000..98e26f75df --- /dev/null +++ b/files/nl/web/http/status/200/index.html @@ -0,0 +1,50 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>De HTTP <strong><code>200 OK</code></strong> statuscode geeft aan dat het verzoek is geslaagd. Een 200 response kan standaard gecached worden.</p> + +<p>De betekenis van deze status hangt af van de HTTP-requestmethode:</p> + +<ul> + <li>{{HTTPMethod("GET")}}: De bron is opgehaald en overgebracht via de body.</li> + <li>{{HTTPMethod("HEAD")}}: De entiteitheaders bevinden zich in de body.</li> + <li>{{HTTPMethod("POST")}}: De bron die het resultaat van een actie beschrijft is overgebracht via de body.</li> + <li>{{HTTPMethod("TRACE")}}: De body bevat het bericht van het verzoek zoals ontvangen door de server.</li> +</ul> + +<p>Vaak is het resultaat van een succesvolle {{HTTPMethod("PUT")}} of een {{HTTPMethod("DELETE")}} niet een <code>200</code><code>OK</code> maar een {{HTTPStatus("204")}} <code>No Content</code> (of een {{HTTPStatus("201")}} <code>Created</code> als de bron voor de eerste keer geüpload wordt).</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">200 OK</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Titel</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompabiliteit">Browsercompabiliteit</h2> + +<p class="hidden">De compabiliteitstabel op deze pagina wordt gegenereerd van gestructureerde data. Wilt bijdragen aan deze data, bezoek dan alstublieft <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> +</ul> diff --git a/files/nl/web/http/status/301/index.html b/files/nl/web/http/status/301/index.html new file mode 100644 index 0000000000..7e90b586cd --- /dev/null +++ b/files/nl/web/http/status/301/index.html @@ -0,0 +1,47 @@ +--- +title: 301 Moved Permanently +slug: Web/HTTP/Status/301 +tags: + - HTTP + - Herverbinden + - Referentie + - Status code +translation_of: Web/HTTP/Status/301 +--- +<div>{{HTTPSidebar}}</div> + +<p>De HTTP <code><strong>301 Moved Permanently</strong></code> herverbind status reactie code geeft aan dat het opgevraagde onderdeel permanent is verplaatst naar de URL aangegeven in de {{HTTPHeader("Location")}} headers. Een browser herverbind met deze pagina, en zoekmachines updaten hun links naar het onderdeel.</p> + +<p>Zelfs als de specificaties het verplichten de methode, en de body, niet aan te passen wanneer de herverbinding plaatsvind, voldoen niet alle user-agents hieraan. Er wordt nogsteeds gebruik gemaakt van buggy software. Het wordt daarom aangeraden de <code>301</code> code alleen als reactie te gebruiken voor {{HTTPMethod("GET")}} of {{HTTPMethod("HEAD")}} methodes en gebruik te maken van {{HTTPStatus("308")}} <code>Permanent Redirect</code>, aangezien de methode aanpassingen uitdrukkelijk verboden zijn met deze status.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">301 Moved Permanently</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Titel</th> + </tr> + <tr> + <td>{{RFC("7231", "301 Redirect Permanently" , "6.4.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_ondersteuning">Browser ondersteuning</h2> + +<p class="hidden">De ondersteuningstabel in deze pagina is gegenereerd van gestructureerde data. Als je wil bijdragen aan deze data, ga dan naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>en stuur ons een pull request.</p> + +<p>{{Compat("http.status.301")}}</p> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li> + <li>{{HTTPStatus("302")}} <code>Found</code>, the temporary redirect</li> +</ul> diff --git a/files/nl/web/http/status/index.html b/files/nl/web/http/status/index.html new file mode 100644 index 0000000000..e490502369 --- /dev/null +++ b/files/nl/web/http/status/index.html @@ -0,0 +1,171 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - NeedsTranslation + - Status codes + - TopicStub +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors. Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p> + +<h2 id="Information_responses">Information responses</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching too.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> +</dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br> + GET: The resource has been fetched and is transmitted in the message body.<br> + HEAD: The entity headers are in the message body.<br> + POST: The resource describing the result of the action is transmitted in the message body.<br> + TRACE: The message body contains the request message as received by the server</dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>This response means that server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt><code>402 Payment Required</code></dt> + <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfill it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/nl/web/index.html b/files/nl/web/index.html new file mode 100644 index 0000000000..8a3013117c --- /dev/null +++ b/files/nl/web/index.html @@ -0,0 +1,87 @@ +--- +title: Webtechnologie voor ontwikkelaars +slug: Web +tags: + - Landing + - Web +translation_of: Web +--- +<p>Het Open Web biedt ongelooflijke kansen voor ontwikkelaars. Om optimaal van deze technologieën te profiteren, dient u te weten hoe u ze moet gebruiken. Hieronder vindt u de koppelingen naar de documentatie van MDN over webtechnologieën.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Webtechnologieën">Webtechnologieën</h2> + +<h3 id="Basis">Basis</h3> + +<dl> + <dt><a href="/nl/docs/Web/HTML">HTML</a></dt> + <dd><strong>HyperText Markup Language (HTML)</strong> is de opmaaktaal die wordt gebruikt om de inhoud van een webpagina in een goed gestructureerde opmaak te definiëren.</dd> + <dt><a href="/nl/docs/Web/CSS">CSS</a></dt> + <dd><strong>Cascading Style Sheets (CSS)</strong> worden gebruikt om de vormgeving van webinhoud te beschrijven.</dd> + <dt><a href="/nl/docs/Web/HTTP">HTTP</a></dt> + <dd><strong>Hypertext Transfer Protocol (HTTP)</strong> wordt gebruikt om HTML- en andere hypermediadocumenten op het web af te leveren.</dd> +</dl> + +<h3 id="Programmeren">Programmeren</h3> + +<dl> + <dt><a href="/nl/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> is de programmeertaal die in de browser wordt uitgevoerd en wordt gebruikt om geavanceerde interactieve websites en -applicaties voor veilig browsergedrag te bouwen.</dd> + <dt><a href="/nl/docs/Web/Reference/API">Web-API’s</a></dt> + <dd>Web Application Programming Interfaces (Web-API’s) worden gebruikt om verschillende taken uit te voeren, zoals het manipuleren van de <a href="/nl/docs/DOM">DOM</a>, het afspelen van audio of video of het genereren van 3D-graphics. + <ul> + <li><a href="/nl/docs/Web/API" title="/docs/Web/API">Web-API-interfacereferentie</a> geeft een overzicht van alle objecttypen die u kunt gebruiken als u voor het web ontwikkelt.</li> + <li>De <a href="/nl/docs/WebAPI">WebAPI</a>-pagina geeft een overzicht van alle API’s voor communicatie, hardwaretoegang en andere API’s die nuttig zijn voor applicaties.</li> + <li>De <a href="/nl/docs/Web/Events">Event-referentie</a> geeft een overzicht van alle gebeurtenissen die u kunt gebruiken om interessante dingen die in uw webpagina of applicatie hebben plaatsgevonden, te volgen en er op te reageren.</li> + </ul> + </dd> +</dl> + +<h3 id="Graphics">Graphics</h3> + +<dl> + <dt><a href="/nl/docs/SVG">SVG</a></dt> + <dd>Met Scalable Vector Graphics kunt u afbeeldingen als sets van vectoren (lijnen) en vormen beschrijven, zodat ze makkelijk zijn te schalen, ongeacht de grootte waarin ze zijn opgesteld.</dd> + <dt><a href="/nl/docs/Web/WebGL" title="/docs/Web/WebGL">WebGL</a></dt> + <dd>WebGL brengt 3D-graphics naar het Web door een API die nauw samenwerkt met OpenGL ES 2.0, dat in HTML {{HTMLElement("canvas")}}-elementen kan worden gebruikt.</dd> +</dl> + +<h3 id="Audio_video_en_multiemedia">Audio, video en multiemedia</h3> + +<h3 id="Overige">Overige</h3> + +<dl> + <dt><a href="/nl/docs/Web/MathML">MathML</a></dt> + <dd>De Mathematical Markup Language maakt het mogelijk om complexe wiskundige vergelijkingen en syntaxis weer te geven.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Documentatie_per_type">Documentatie per type</h2> + +<dl> + <dt><a href="/nl/docs/Web/Guide">Handleiding voor webontwikkelaars</a></dt> + <dd>De Handleiding voor ontwikkelaars biedt bruikbare tutorials om u daadwerkelijk dingen te laten doen met behulp van webtechnologieën.</dd> + <dt><a href="/nl/docs/Web/Tutorials">Tutorials voor webontwikkelaars</a></dt> + <dd>Een lijst met tutorials waarbij stap voor stap de API’s, technologieën en brede themagebieden worden uitgelegd.</dd> + <dt><a href="/nl/docs/Web/Reference">Referenties</a></dt> + <dd> + <div class="note">Deze pagina biedt koppelingen naar alle referentie-informatie over MDN, maar is nog in ontwikkeling.</div> + </dd> +</dl> + +<h2 id="Andere_onderwerpen">Andere onderwerpen</h2> + +<dl> + <dt><a href="/nl/docs/Web/Apps">Webapplicaties ontwikkelen</a></dt> + <dd>Documentatie voor ontwikkelaars van webapplicaties; webapps zijn eenmalig geschreven en overal te implementeren apps voor mobiel, desktop en Firefox OS.</dd> + <dt><a href="/nl/docs/Web/Accessibility">Toegankelijkheid</a></dt> + <dd>Toegankelijkheid in webontwikkeling betekent het voor zo veel mogelijk mensen mogelijk maken om websites te gebruiken, zelfs wanneer deze mensen beperkt zijn in hun mogelijkheden. Hier leveren we informatie over het ontwikkelen van webinhoud zodat deze toegankelijk wordt.</dd> + <dt><a href="/nl/docs/Web/Security">Beveiliging</a></dt> + <dd>Verzekeren dat uw website of open webapp goed is beveiligd, is cruciaal.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/nl/docs/tag/Web">Alles bekijken...</a></span></p> diff --git a/files/nl/web/javascript/aan_de_slag/index.html b/files/nl/web/javascript/aan_de_slag/index.html new file mode 100644 index 0000000000..850c3c13d8 --- /dev/null +++ b/files/nl/web/javascript/aan_de_slag/index.html @@ -0,0 +1,338 @@ +--- +title: Aan de slag (Handleiding Javascript) +slug: Web/JavaScript/Aan_de_slag +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<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/grammar_and_types/index.html b/files/nl/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..db1b096ae6 --- /dev/null +++ b/files/nl/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,638 @@ +--- +title: Grammar and types +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Dit hoofdstuk behandelt de basics van de JavaScript grammatica, declaratie van variabelen, datatypen en literalen.</p> + +<h2 id="Basis">Basis</h2> + +<p>De syntax van JavaScript heeft veel weg van Java, maar is ook beïnvloed door Awk, Perl en Python.</p> + +<p>JavaScript is hoofdlettergevoelig en maakt gebruik van de Unicode-tekenset.</p> + +<p>In JavaScript worden instructies {{Glossary("Statement", "statements")}} genoemd. Deze worden gescheiden door een puntkomma (;). Spaties, tabs en regeleinden worden whitespaces genoemd. De broncode van JavaScript wordt gescanned van links naar rechts en wordt geconverteerd in een rij van input elementen ofwel tokens, control characters, line terminators, opmerkingen of whitespaces. ECMAScript definieert ook bepaalde keywords en literalen en heeft regels voor het automatisch invoegen van puntkomma's (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) aan het eine van statements. Echter, het is aanbevolen om altijd puntkomma's aan het einde van statements te plaatsen; dit voorkomt neveneffecten. Voor meer informatie, zie de gedetailleerde referentie over de <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">lexical grammar</a> van JavaScript.</p> + +<h2 id="Opmerkingen">Opmerkingen</h2> + +<p>De syntax van opmerkingen is hetzelfde als in C++ en veel andere programmeertalen:</p> + +<pre class="brush: js">// 1-regel opmerking + +/* dit is een langere, + meerdere regels opmerking + */ + +/* Je kan opmerkingen /* niet nesten */ SyntaxError */</pre> + +<h2 id="Declaraties">Declaraties</h2> + +<p>Er zijn drie soorten declaraties in JavaScript.</p> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declareer een variabele en mogelijk initialiseren naar een waarde.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declareer een block scope variabele en mogelijk initialiseren naar een waarde.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declareer een alleen-lezen benoemde constante.</dd> +</dl> + +<h3 id="Variabelen">Variabelen</h3> + +<p>Je kunt variabelen gebruiken als symbolische waarden in je applicatie. De namen van variabelen, genaamd <span style="line-height: 1.5;">{{Glossary("Identifier", "identifiers")}}, voldoen aan bepaalde conventies.</span></p> + +<p><span style="line-height: 1.5;">Een JavaScript identifier moet beginnen met een letter, underscore (_) of dollarteken ($); volgende karakters kunnen ook nummers zijn (0-9). Omdat JavaScript hoofdlettergevoelig is, behoren tot de letters karakters "A" tot en met "Z" (hoofdletters) en de karakters "a" tot en met "z" (kleine letters).</span></p> + +<p>Je kunt ISO 8859-1 of Unicode letters zoals å en ü gebruiken in identifiers. Je kunt ook de <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> als karakters gebruiken in identifiers.</p> + +<p>Voorbeelden van toegestane namen zijn <code>Aantal_hits</code>, <code>temp99</code>, en <code>_naam</code>.</p> + +<h3 id="Variabelen_declareren">Variabelen declareren</h3> + +<p>Je kunt variabelen declareren op drie manieren:</p> + +<ul> + <li>Met het keyword{{jsxref("Statements/var", "var")}}. Bijvoorbeeld <code>var x = 42</code>. Deze syntax kan worden gebruikt voor het declareren van zowel lokale als globale variabelen.</li> + <li>Door simpelweg een waarde toe te wijzen. Bijvoorbeeld <code>x = 42</code>. Dit declareert altijd een globale variabele. Dit genereert een stricte JavaScript waarschuwing. Je zou deze manier niet moeten gebruiken.</li> + <li>Met het keyword {{jsxref("Statements/let", "let")}}. Bijvoorbeeld <code>let y = 13</code>. Deze syntax kan worden gebruikt om een lokale blokvariabele te declareren. Zie ook <a href="#Variable_scope">Variable scope</a> verderop.</li> +</ul> + +<h3 id="Variabelen_evalueren">Variabelen evalueren</h3> + +<p>Een door <code>var</code> or <code>let</code> gedeclareerde variabele zonder gespecificeerde initiële waarde heeft de waarde {{jsxref("undefined")}}.</p> + +<p>Een poging om een niet-gedeclareerde variabele te gebruiken resulteert in een {{jsxref("ReferenceError")}} exceptie:</p> + +<pre class="brush: js">var a; +console.log("De waarde van a is " + a); // logs "De waarde van a is undefined" +console.log("De waarde van b is " + b); // throws ReferenceError exception +</pre> + +<p>Je kunt <code>undefined</code> gebruiken om te bepalen of een variabele een waarde heeft. In de volgende code heeft de variabele <code>input</code> geen waarde toegewezen gekregen en het <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> statement evalueert naar <code>true</code>;</p> + +<pre class="brush: js">var input; +if(input === undefined){ + doeDit(); +} else { + doeDat(); +} +</pre> + +<p>De <code>undefined</code> waarde gedraagt zich als <code>false</code> in de context van een booleaanse waarde. Bijvoorbeeld, de vogende code voert de functie <code>myFunction</code> uit omdat het <code>myArray</code> element <code>undefined</code> is:</p> + +<pre class="brush: js">var myArray = []; +if (!myArray[0]) myFunction(); +</pre> + +<p>De <code>undefined</code> waarde converteert naar <code>NaN</code> als deze wordt gebruikt in numerike context.</p> + +<pre class="brush: js">var a; +a + 2; // Evalueert naar NaN</pre> + +<p>A;s je een {{jsxref("null")}} variabele declareert, dan gedraagt deze zich als 0 in een numerike context en als <code>false</code> in een booleaanse context. Bijvoorbeeld:</p> + +<pre class="brush: js">var n = null; +console.log(n * 32); // Zal 0 tonen in de console +</pre> + +<h3 id="Variable_bereik_(scope)">Variable bereik (scope)</h3> + +<p>Als je een variabele declareert buiten een functie, dan wordt dit een <em>globale</em> variabele genoemd, omdat deze beschikbaar is voor alle code in het document. Als je een variabele in een functie declareert, dan wordt dit een <em>lokale</em> variabele genoemd, want deze is alleen beschikbaar binnen die functie.</p> + +<p>Voor ECMAScript 6 had JavaScript nog geen <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">block statement</a> scope. Een variabele gedeclareerd in een blok was lokaal voor de functie waarin het blok geplaatst is. De volgende code zal bijvoorbeeld 5 loggen, omdat het bereik van <code>x</code> de volledige functie waarin <code>x</code> is gedeclareerd, niet enkel het (in dit geval <code>if</code> statement) blok.</p> + +<pre class="brush: js">if (true) { + var x = 5; +} +console.log(x); // 5 +</pre> + +<p>Dit gedrag verandert wanneer de <code>let</code> declaratie werd geïntroduceerd in ECMAScript 6.</p> + +<pre class="brush: js">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y is niet gedefinieerd +</pre> + +<h3 id="Variable_hoisting_(variabele_ophijsen)">Variable hoisting (variabele ophijsen)</h3> + +<p>Een andere ongebruikelijke eigenschap van variabelen in JavaScript is dat je kan refereren naar een variabele die pas later in de code wordt gedeclareerd, zonder een exceptie te krijgen. Dit concept staat bekend als <em><strong style="line-height: 1.5;">hoisting </strong></em><strong style="line-height: 1.5;">(ophijsen)</strong><span style="line-height: 1.5;">; variabelen in JavaScript worden als het ware opgehesen naar het begin van de functie of statement. Echter, variabelen die opgehesen worden resulteren in een waarde <code>undefined</code>, ook als de variabele later wordt geïnitialiseerd.</span></p> + +<pre class="brush: js">/** + * Voorbeeld 1 + */ +console.log(x === undefined); // logs "true" +var x = 3; + +/** + * Voorbeeld 2 + */ +// retourneert een waarde undefined +var myvar = "my value"; + +(function() { + console.log(myvar); // undefined + var myvar = "local value"; +})(); +</pre> + +<p>Dit voorbeeld wordt hetzelfde geïnterpreteerd als:</p> + +<pre class="brush: js">/** + * Voorbeeld 1 + */ +var x; +console.log(x === undefined); // logs "true" +x = 3; + +/** + * Voorbeeld 2 + */ +var myvar = "my value"; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = "local value"; +})(); +</pre> + +<p>Door <em>hoisting</em> zouden alle <code>var</code> statements in een functie zo dicht mogelijk aan het begin van de functie moeten worden gedeclareerd. Dit leidt tot een verbeterde duidelijkheid van de code.</p> + +<h3 id="Globale_variabelen">Globale variabelen</h3> + +<p>Globale variabelen zijn in feite eigenschappen van het <em>globale object</em>. Op webpgina's is het globale object {{domxref("window")}}, dus je kunt globale variabelen aanroepen met <code>window.<em>variable</em></code>.</p> + +<p>Zodoende is het ook mogelijk om globale variabelen die in een ander window of frame zijn gedeclareerd aan te roepen door de naam van het window of frame te specificeren. Bijvoorbeeld, als een variabele genaamd <code>telefoonnummer</code> is gedeclareerd in een document, dan kan deze variabele vanuit een frame worden aangeroepen met <code>parent.telefoonnummer</code>.</p> + +<h3 id="Constanten">Constanten</h3> + +<p>Het is mogelijk om alleen-lezen constanten te declareren met het {{jsxref("Statements/const", "const")}} keyword.</p> + +<p>De syntax van een constante identifier is hetzelfde als voor een variabele identifier: de naam moet beginnen met een letter, underscore of dollarteken en kan alfabetische, numerieke of underscorekarakters bevatten.</p> + +<pre class="brush: js">const prefix = '212'; +</pre> + +<p>Een constante kan niet van waarde worden veranderd of opnieuw worden gedeclareerd tijdens het runnen van het script. Een constante moet worden geïnitialiseerd.</p> + +<p>De scope (bereik) regels voor constanten zijn hetzelfde als voor <code>let</code> blokbereik variabelen. Als het <code>const</code> keyword wordt weggelaten, dan wordt aangenomen dat de identifier een variabele representeert.</p> + +<p>Het is niet mogelijk om een constante te declareren met dezelfde naam als een functie of variabele in hetzelfde bereik. Bijvoorbeeld:</p> + +<pre class="brush: js">// DIT RESULTEERT IN EEN ERROR +function f() {}; +const f = 5; + +// DIT OOK +function f() { + const g = 5; + var g; + + //statements +} +</pre> + +<h2 id="Datastructuren_en_types">Datastructuren en types</h2> + +<h3 id="Datatypes">Datatypes</h3> + +<p>De meest recente ECMAScript standaarden definiëren zeven datatypes:</p> + +<ul> + <li>Zes datatypes zijn {{Glossary("Primitive", "primitieven")}}: + <ul> + <li>{{Glossary("Boolean")}}. <code>true</code> en <code>false</code>.</li> + <li>{{Glossary("null")}}. Een speciaal keyword voor het aangeven van een nullwaarde. Omdat JavaScript hoofdlettergevoelig is, is <code>null</code> niet hetzelfde als <code>Null</code>, <code>NULL</code>, en elke andere variant.</li> + <li>{{Glossary("undefined")}}. Een top-level eigenschap met een ongedefinieerde waarde.</li> + <li>{{Glossary("Number")}}. <code>42</code> of <code>3.14159</code>.</li> + <li>{{Glossary("String")}}. "Hello World"</li> + <li>{{Glossary("Symbol")}} (nieuw in ECMAScript 6). Een datatype wiens instanties uniek en onveranderbaar zijn.</li> + </ul> + </li> + <li>en {{Glossary("Object")}}</li> +</ul> + +<p>Ondanks dit kleine aantal datatypes, geven ze de mogelijkheid om zinvolle functies te schrijven voor applicaties. {{jsxref("Object", "Objects")}} en {{jsxref("Function", "functions")}} zijn de andere fundamentele elementen in de taal. Je kan objecten zien als benoemde containers voor waarden en functies als procedures die de applicatie kan uitvoeren.</p> + +<h3 id="Datatype_conversie">Datatype conversie</h3> + +<p>JavaScript is een <em>dynamic typed</em> taal. Dat betekent dat het niet nodig is om een datatype op te geven bij het declareren van een variabele en dat datatypes automatisch worden geconverteerd tijdens het uitvoeren van een script. Een variabele kan bijvoorbeeld als volgt worden gedeclareerd:</p> + +<pre class="brush: js">var answer = 42; +</pre> + +<p>en later kan dezelfde variabele een string toegewezen krijgen:</p> + +<pre class="brush: js">answer = "Thanks for all the fish..."; +</pre> + +<p>Omdat JavaScript <em>dynamically typed</em> is, leidt deze toewijzing niet tot een foutmelding.</p> + +<p>In expressies waar numerieke en string waarden met de + operator worden gecombineerd, converteert JavaScript de numerieke waarde naar een string. Bijvoorbeeld:</p> + +<pre class="brush: js">x = "Het antwoord " + 42 // "Het antwoord is 42" +y = 42 + " is het antwoord" // "42 is het antwoord" +</pre> + +<p>In statements met andere operatoren converteert JavaScript numerike waarden niet naar strings. Bijvoorbeeld±</p> + +<pre class="brush: js">"37" - 7 // 30 +"37" + 7 // "377" +</pre> + +<h3 id="Strings_naar_Numbers_converteren">Strings naar Numbers converteren</h3> + +<p>In gevallen waarin een numerieke waarde in het geheugen wordt gerepresenteerd als een string, zijn er mogelijkheden voor conversie:</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt</code> retourneert enkel gehele getallen. Het is aanbevolen om altijd een radix mee te geven aan <code>parseInt</code>. De radixparameter wordt gebruikt om te specificeren welk numeriek systeem moet worden gebruikt.</p> + +<p>Een andere manier om getallen uit strings te extraheren is met de <code>+</code> (unaire plus) operator:</p> + +<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 +// Note: de haakjes zijn toegevoegd voor de duidelijkheid, maar niet vereist.</pre> + +<h2 id="Literalen">Literalen</h2> + +<p>Je kunt literalen gebruiken om waarden te representeren in JavaScript. Dit zijn vaste waarden, geen variabelen, die letterlijk in het script staan.. Deze sectie beschrijft de volgende type literalen:</p> + +<ul> + <li>{{anch("Array literals")}}</li> + <li>{{anch("Boolean literals")}}</li> + <li>{{anch("Floating-point literals")}}</li> + <li>{{anch("Integers")}}</li> + <li>{{anch("Object literals")}}</li> + <li>{{anch("RegExp literals")}}</li> + <li>{{anch("String literals")}}</li> +</ul> + +<h3 id="Array_literalen">Array literalen</h3> + +<p>Een array literaal is een lijst van nul of meerdere expressies. Elke expressie representeert een array element omgeven door vierkante haakjes <code>([])</code>.</p> + +<p>Het volgende voorbeeld creëert een array <code>koffies</code> met drie elementen en een lengte van 3:</p> + +<pre class="brush: js">var koffies = ["Espresso", "Cappuccino", "Zwart"]; +</pre> + +<div class="note"> +<p><strong>Note :</strong> Een array literaal is een soort object initialisator. Zie <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Using Object Initializers</a>.</p> +</div> + +<p>Als een array wordt gecreëerd met een literaal in een top-leven script, dan interpreteert JavaScript de array elke keer dat het de expressie die de array literaal bevat evalueert. Een literaal die gebruikt wordt in een functie wordt iedere keer dat de functie wordt aangeroepen opnieuw gecreëerd.</p> + +<p>Array literalen zijn ook <code>Array</code> objecten. Zie {{jsxref("Array")}} en <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> voor meer details over <code>Array</code> objecten.</p> + +<h4 id="Extra_komma's_in_array_literalen">Extra komma's in array literalen</h4> + +<p>Je hoeft niet alle elementen in een array literaal te specificeren. Als je twee komma's achter elkaar plaatst, dan wordt er op die plek in de array een <code>undefined</code> element toegevoegd. Bijvoorbeeld:</p> + +<pre class="brush: js">var kleuren = ["rood", , "groen"]; +</pre> + +<p>Deze array heeft twee elementen met waarden en 1 leeg element. (<code>kleuren[0]</code> is "rood", <code>kleuren[1]</code> is <code>undefined</code>, en <code>kleuren[2]</code> is "groen").</p> + +<p>Als een komma aan het einde van een lijst elementen wordt geplaatst, dan wordt deze genegeerd. In het volgende voorbeeld is de lengte van de array 3. Er is geen <code>mijnPlaatsen[3]</code>.</p> + +<div class="note"> +<p><strong>Note :</strong> Aan het einde geplaatste komma's kunnen fouten veroorzaken in oude versies van browsers. Het is beter om deze weg te laten.</p> +</div> + +<pre class="brush: js">var mijnPlaatsen = ['thuis', , 'school', ]; +</pre> + +<p>In het volgende voorbeeld is de lengte van de array 4 en <code>mijnPlaatsen</code><code>[0]</code> en <code>mijnPlaatsen[2] ontbreken.</code></p> + +<pre class="brush: js">var mijnPlaatsen = [ , 'home', , 'school']; +</pre> + +<p>In het volgende voorbeeld is de lengte van de array 4 en <code>mijnPlaatsen[1]</code> en<code>mijnPlaatsen[3]</code> ontbreken. Alleen de laatste komma wordt genegeerd.</p> + +<pre class="brush: js">var mijnPlaatsen = ['home', , 'school', , ]; +</pre> + +<p>Het begrijpen van het gedrag van extra komma's is belangrijk voor het begrijpen van JavaScript als een programmeertaal. Echter, het expliciet benoemen van ontbrekende elementen met het keyword <code>undefined</code> verbetert de duidelijkheid en onderhoudbaarheid van de code.</p> + +<h3 id="Boolean_literalen">Boolean literalen</h3> + +<p>Het Booleaanse type heeft twee literale waarden: <code>true</code> en <code>false</code>.</p> + +<p>Verwar de primitieven Boolean waarden <code>true</code> en <code>false</code> niet met de true en false waarden van het Boolean object. Het Boolean object is een omhulsel voor het primitieve Boolean datatype. Zie {{jsxref("Boolean")}} voor meer informatie.</p> + +<h3 id="Integers">Integers</h3> + +<p>Integers kunnen worden uitgedrukt in decimaal (radix 10), hexadecimaal (radix 16), octaal (radix 8) en binair (radix 2).</p> + +<ul> + <li>Decimale integer literalen bestaan uit een rij van cijfers zonder 0 (nul) aan het begin.</li> + <li>Een 0 (nul) (of 0o of 0O) aan het begin van een integer literaal geeft aan dat de integer in het octale stelsel is uitgedrukt. Octale integers kunnen enkel bestaan uit de cijfers 0 tot en met 7.</li> + <li>0x (of 0X) aan het begin geeft hexadecimale notatie aan. Hexadecimale integers kunnen bestaan uit de cijfers 0 tot en met 9 en de letters a tot en met F en A tot en met F.</li> + <li> + <p>0b (of 0B) aan het begin geeft binarye notatie aan. Binaire integers kunnen bestaan uit de cijfers 0 en 1.</p> + </li> +</ul> + +<p>Enkele voorbeelden van Integer literalen zijn:</p> + +<pre class="eval">0, 117 en -345 (decimaal, radix 10) +015, 0001 en -0o77 (octaal, radix 8) +0x1123, 0x00111 en -0xF1A7 (hexadecimaal, "hex" or radix 16) +0b11, 0b0011 en -0b11 (binair, radix 2) +</pre> + +<p>Voor meer informatie, zie <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p> + +<h3 id="Floating-point_literalen">Floating-point literalen</h3> + +<p>Een floating-point literaal kan bestaan uit de volgende onderdelen:</p> + +<ul> + <li>Een decimale integer eventueel voorafgegaan door een "+" of "-" teken),</li> + <li>Een decimaalscheiding punt ("."),</li> + <li>Een fractie (decimaal nummer),</li> + <li>Een exponent.</li> +</ul> + +<p>Het exponent gedeelte is een "e" of "E" gevolgd door een integer, welke kan worden voorafgegaan door een "+" of "-". Een floating point literaal moet minstens 1 cijfer hebben en een decimaalscheiding punt óf een "e" (of"E").</p> + +<p>Meer beknopt, de syntax is:</p> + +<pre class="eval">[(+|-)][cijfers][.cijfers][(E|e)[(+|-)]cijfers] +</pre> + +<p>Bijvoorbeeld:</p> + +<pre class="eval">3.1415926 +-.123456789 +-3.1E+12 +.1e-23 +</pre> + +<h3 id="Object_literalen">Object literalen</h3> + +<p>Een object literaal is een lijst van nul of meerdere paren van namen en waarden van eigenschappen, ingesloten door accolades (<code>{}</code>). Een object literaal kan niet worden gebruikt aan het begin van een statement. Dit zou leiden tot een foutmelding of gedraagt zich niet zoals verwacht, omdat de <code>{</code> zal worden geïnterpreteerd als het begin van een blok.</p> + +<p>De volgende code is een voorbeeld van een object literaal. Het eerste element van het <code>auto</code> object definieert de eigenschap <code>mijnAuto</code> en wijst de string "VW" toe; de tweede eigenschap krijgt het resultaat van de aanroep van functie <code>autoTypes("Honda")</code> toegewezen; het derde element, de <code>special</code> eigenschap, krijgt een bestaande variabele toegewezen (<code>sales</code>).</p> + +<pre class="brush: js">var sales = "Toyota"; + +function carTypes(name) { + if (name === "Honda") { + return name; + } else { + return "Sorry, we verkopen geen " + name + "."; + } +} + +var auto = { mijnAuto: "VW", getAuto: autoTypes("Honda"), + special: sales }; + +console.log(auto.mijnAuto); // VW +console.log(auto.getAuto); // Honda +console.log(auto.special); // Toyota +</pre> + +<p>Namen van objecteigenschappen kunnen ook numerieke literalen zijn. Waarden van objecteigenschappen kunnen ook weer objecten zijn (geneste objecten). Het volgende voorbeeld gebruikt deze mogelijkheden:</p> + +<pre class="brush: js">var auto = { veelAutos: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(auto.veelAutos.b); // Jeep +console.log(auto[7]); // Mazda +</pre> + +<p>De namen van objecteigenschappen kunnen elke string zijn, ook de lege string (<code>""</code>). Als de naam van een eigenschap geen geldige JavaScript {{Glossary("Identifier","identifier")}} of getal is, moet deze worden ingesloten door quotes (als een string). Deze eigenschappen kunnen dan niet worden aangeroepen als een punt (<code>.</code>) eigenschap, maar kunnen wel worden opgevraagd en waarden toegekend krijgen met de array notatie (<code>[]</code>). Zie voorbeeld:</p> + +<pre class="brush: js">var aparteEigenschapNamen = { + "": "Een lege string", + "!": "Bang!" +} +console.log(aparteEigenschapNamen.""); // SyntaxError: Unexpected string +console.log(aparteEigenschapNamen[""]); // Een lege string +console.log(aparteEigenschapNamen.!); // SyntaxError: Unexpected token ! +console.log(aparteEigenschapNamen["!"]); // Bang!</pre> + +<p>Object literalen zijn uitgebreid in ES2015. Het is hierdoor mogelijk om het prototype in te stellen tijdens constructie, <code>foo: foo</code> constructies in te korten, methodes te definiëren, super aanroepen te doen en dynamische eigenschapnamen te berekenen. Dit brengt object literalen en klasse declaratie dichter bij elkaar.</p> + +<pre class="brush: js">var obj = { + // __proto__ + __proto__: theProtoObj, + // Shorthand for ‘handler: handler’ + handler, + // Methods + toString() { + // Super calls + return "d " + super.toString(); + }, + // Computed (dynamic) property names + [ 'prop_' + (() => 42)() ]: 42 +};</pre> + +<p>Let op:</p> + +<pre class="brush: js">var foo = {a: "alpha", 2: "two"}; +console.log(foo.a); // alpha +console.log(foo[2]); // two +//console.log(foo.2); // Error: missing ) after argument list +//console.log(foo[a]); // Error: a is not defined +console.log(foo["a"]); // alpha +console.log(foo["2"]); // two +</pre> + +<h3 id="RegExp_literalen">RegExp literalen</h3> + +<p>Een regex literaal is een patron ingesloten door slashes (<code>/</code>). Het volgende voorbeeld toont een regex literaal:</p> + +<pre class="brush: js">var re = /ab+c/;</pre> + +<h3 id="String_literalen">String literalen</h3> + +<p>Een string literaal is een rij van nul of meerdere karakters ingesloten door dubbele (<code>"</code>) of enkele (<code>'</code>) quotes. Het quoteteken voor de string moet hetzelfde type quote zijn als de quote aan het einde. Voorbeelden van String literalen:</p> + +<pre class="brush: js">"foo" +'bar' +"1234" +"een regel \n nog een regel" +"Henk's kat" +</pre> + +<p>Je kunt elke methode van het String object aanroepen op een String literaal. JavaScript converteert de string literaal automatisch naar een tijdelijk String object en roept dan de methode aan. Daarna wordt het tijdelijke String object genegeerd. De <code>String.length</code> eigenschap kan ook worden aangeroepen op string literalen.</p> + +<pre class="brush: js">// Print het aantal karakters in de string. +console.log("Henk zijn kat".length) // 13 +</pre> + +<p>In ES2015 zijn template literalen ook beschikbaar. Template strings bieden syntactische <em>sugar</em> voor het construeren van strings. Dit lijkt op <em>string interpolation</em> zoals in onder andere Perl en Python. Aan een string kan een <em>tag</em> worden toegevoegd voor het invoegen van bijvoorbeeld variabelen op plekken in de string. Deze methode vermijdt injectie-aanvallen en de benodigdheid van datastructuren voor het representeren van variabele strings.</p> + +<pre class="brush: js">// Simpele string literaal +`In JavaScript is '\n' een new-line karakter.` + +// Multiline strings +`In JavaScript mag + dit niet.` + +// String interpolation +var naam = "Bob", wanneer = "vandaag"; +`Hallo ${naam}, hoe gaat het ${wanneer}?` + +// Construct an HTTP request prefix is used to interpret the replacements and construction. +POST `http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> + +<p>Het gebruik van string literalen is aanbevolen, tenzij je specifiek het String object nodig hebt.. Zie {{jsxref("String")}} voor details over <code>String</code> objecten.</p> + +<h4 id="Gebruik_van_speciale_karakters_in_strings">Gebruik van speciale karakters in strings</h4> + +<p>Naast gewone karakters kunnen ook speciale karakters worden gebruikt in strings, zoals in het volgende voorbeeld:</p> + +<pre class="brush: js">"een regel \n nog een regel" +</pre> + +<p>De volgende tabel toont de speciale karakters die in JavaScript strings kunnen worden gebruikt.</p> + +<table class="standard-table"> + <caption>Table: JavaScript speciale karakters</caption> + <thead> + <tr> + <th scope="col">Karakter</th> + <th scope="col">Betekenis</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Null Byte</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Form feed (nieuwe pagina)</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>New line (nieuwe regel)</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Carriage return (naar begin van de regel)</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tab</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Verticale tab</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Apostrof of enkel aanhalingsteken</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Dubbel aanhalingsteken</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Backslash karakter</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td> + <p>Het karakter met de Latijn-1 encodering gespecificeerd door tot 3 octale cijfers XXX tussen 0 en 377. Bijvoorbeeld \251 is de octale code voor het copyrightsymbool.</p> + </td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td> + <p>Het karakter met de Latijn-1 encodering gespecificeerd door de hexadecimale cijfers XX tussen 00 en FF. Bijvoorbeeld \xA9 is de hexadecimale code voor het copyrightsymbool.</p> + </td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td> + <p>Het Unicode-karakter gespecificeerd door de 4 hexadecimale cijfers XXXX. Bijvoorbeeld \u00A9 is de Unicode voor het copyright symbook. Zie <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>.</p> + </td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td>Unicode code point escapes. Bijvoorbeeld \u{2F804} is hetzelfde als de eencoudige Unicode escapes \uD87E\uDC04.</td> + </tr> + </tbody> +</table> + +<h4 id="Escapekarakters">Escapekarakters</h4> + +<p>Voor karakters die niet in de tabel staan wordt de voorafgaande backslash genegeerd, maar dit gebruik is verouderd en moet worden ontweken.</p> + +<p>Je kunt een quoteteken invoegen in een string door voor het teken een backslash (<code>\</code>) toe te voegen. Dit staat bekend als <em>escaping</em> van het quoteteken. Bijvoorbeeld:</p> + +<pre class="brush: js">var quote = "Hij las \"The Cremation of Sam McGee\" door R.W. Service."; +console.log(quote); +</pre> + +<p>Het resultaat hiervan zou zijn:</p> + +<pre class="eval">Hij las "The Cremation of Sam McGee" door R.W. Service. +</pre> + +<p>Om een backslash in de string toe te voegen, moet het backslash tegen worden geëscaped. Bijvoorbeeld, om het bestandspad <code>c:\temp</code> in een string voor te stellen staat in JavaScript het volgende:</p> + +<pre class="brush: js">var home = "c:\\temp"; +</pre> + +<p>Het is ook mogelijk om nieuwe regels in de code te escapen. De backslash en nieuwe regel worden beide niet in de string opgenomen.</p> + +<pre class="brush: js">var str = "deze string \ +is verspreid \ +over meerdere\ +regels." +console.log(str); +// deze string is verspreid over meerdere regels. +</pre> + +<p>Alhoewel JavaScript geen "heredoc" syntax heeft, kan je wel een newline karakter samen met een escape karakter gebruiken, zoals in het volgende voorbeeld:</p> + +<pre class="brush: js">var poem = +"Roses are red,\n\ +Violets are blue.\n\ +I'm schizophrenic,\n\ +And so am I." +</pre> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<p>Dit hoofdstuk focust op de basis syntax voor declaraties en types. Om meer te leren over de JavaScript programmeertaal constructies, zie de volgende hoofdstukken in de guide:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li> +</ul> + +<p>In het volgende hoofdstuk nemen we een kijkje in de control flow constructies en error handling</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/nl/web/javascript/guide/index.html b/files/nl/web/javascript/guide/index.html new file mode 100644 index 0000000000..df03cf1f46 --- /dev/null +++ b/files/nl/web/javascript/guide/index.html @@ -0,0 +1,119 @@ +--- +title: JavaScript Guide +slug: Web/JavaScript/Guide +tags: + - Guide + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Guide +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<div class="summary"> +<p><span class="seoSummary">The JavaScript Guide shows you how to use <a href="/en-US/docs/Web/JavaScript">JavaScript</a> and gives an overview of the language. If you want to get started with JavaScript or programming in general, consult the articles in the <a href="/en-US/Learn">learning area</a>. If you need exhaustive information about a language feature, have a look at the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</span></p> +</div> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">About JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical</a> operators<br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Template strings</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p>Arrays<br> + Typed arrays</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections_and_structured_data">Keyed collections and structured data</a></span> + <p>Maps, WeakMaps<br> + Sets, WeakSets<br> + JSON</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p>Creating objects<br> + Object initializer<br> + Inheritance<br> + Getter and setter</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p>Prototype-based OOP<br> + Properties and methods<br> + Inheritance</p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p>Iterable protocol<br> + Iterator protocol<br> + Generators</p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p>Proxy<br> + Reflect</p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/nl/web/javascript/guide/reguliere_expressies/index.html b/files/nl/web/javascript/guide/reguliere_expressies/index.html new file mode 100644 index 0000000000..7b37d5ed31 --- /dev/null +++ b/files/nl/web/javascript/guide/reguliere_expressies/index.html @@ -0,0 +1,757 @@ +--- +title: Reguliere Expressies +slug: Web/JavaScript/Guide/Reguliere_Expressies +tags: + - JavaScript + - RegExp + - regex + - reguliere expressies +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary">Reguliere expressies zijn patronen om combinaties van karakters in strings mee te vinden. In JavaScript zijn reguliere expressies ook objecten. Deze patronen worden gebruikt met de {{jsxref("RegExp.exec", "exec")}} en {{jsxref("RegExp.test", "test")}} methoden van {{jsxref("RegExp")}}, en met de {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, en {{jsxref("String.split", "split")}} methoden van {{jsxref("String")}}. Dit hoofdstuk beschrijft reguliere expressies in JavaScript.</p> + +<h2 id="Een_reguliere_expressie_maken">Een reguliere expressie maken</h2> + +<p>Een reguliere expressie kan op een van twee manieren gemaakt worden:</p> + +<p>Met behulp van een letterlijke reguliere expressie, die bestaat uit een patroon tussen slash-karakters:</p> + +<pre class="brush: js">var re = /ab+c/; +</pre> + +<p>Letterlijke reguliere expressies worden gecompileerd op het moment dat het script geladen is. Als de reguliere expressie constant blijft kan dit de prestaties verbeteren.</p> + +<p>Of door de constructor-functie van het {{jsxref("RegExp")}} object te gebruiken, op de volgende manier:</p> + +<pre class="brush: js">var re = new RegExp('ab+c'); +</pre> + +<p>Het gebruik van de constructor-functie biedt runtime-compilatie van de reguliere expressie. Gebruik de constructor functie als je weet dat het reguliere expressie patroon zal veranderen, of als je het patroon niet weet en uit een andere bron krijgt, zoals input van een gebruiker.</p> + +<h2 id="Typen_speciale_karakters">Typen speciale karakters</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Stellingen</a></dt> + <dd>Geven op een bepaalde manier aan dat een overeenkomst mogelijk is. Stellingen bevatten 'lookahead', 'lookbehind' en conditionele expressies.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Grenzen</a></dt> + <dd>Wijzen op de begin- en eindpunten van regels en woorden.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Karakter Klassen</a></dt> + <dd>Differentieer tussen verschillende soorten karakters zoals, bijvoorbeeld, tussen letters en cijfers.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Groepen en Bereiken</a></dt> + <dd>Geef groepen en bereiken van expressie karakters aan.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Kwantificeerders</a></dt> + <dd>Geef hoeveelheden karakters of expressies aan om te vinden.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Properties">Unicode Eigenschappen</a></dt> + <dd>Differentieer op basis van unicode karakter eigenschappen zoals, bijvoorbeeld, hoofd- en kleine letters, wiskundige symbolen, en punctuatie.</dd> +</dl> + +<h2 id="Een_reguliere_expressie_schrijven">Een reguliere expressie schrijven</h2> + +<p>Een reguliere expressie bestaat uit eenvoudige karakters zoals <code>/abc/</code>, of een combinatie van eenvoudige en speciale karakters, zoals <code>/ab*c/</code> of <code>/Hoofdstuk (\d+)\.\d*/</code>. Het laatste voorbeeld bevat haakjes die gebruikt worden als geheugen mechanisme. De overeenkomst die met dit deel gemaakt is wordt onthouden voor later gebruik., zoals beschreven in <a href="#Using_parenthesized_substring_matches">Using parenthesized substring matches</a>.</p> + +<h3 id="Eenvoudige_patronen_gebruiken">Eenvoudige patronen gebruiken</h3> + +<p>Eenvoudige patronen bestaan uit karakters waarvoor je een directe overeenkomst wilt vinden. Het patroon <code>/abc/</code> bijvoorbeeld komt alleen overeen met karakter combinaties als de karakters 'abc' samen voorkomen in exact die volgorde. Zo'n overeenkomst zou successvol zijn in de strings "Hi, do you know your abc's?" en "The latest airplane designs evolved from slabcraft." In beide gevallen is de overeenkomst de substring 'abc'. Er is geen overeenkomst met de string 'Grab crab' omdat hoewel het de substring 'ab c' bevat, het niet de precieze substring 'abc' bevat.</p> + +<h3 id="Speciale_karakters_gebruiken">Speciale karakters gebruiken</h3> + +<p>Als het zoeken naar een overeenkomst meer vergt dan een directe overeenkomst, zoals het vinden van een of meerdere b's, of het vinden van witregels/ruimte, bevat het patroon speciale karakters. Het patroon <code>/ab*c/</code> bijvoorbeeld komt overeen met elke combinatie karakters waarbij een enkele 'a' gevolgd wordt door nul of meerdere b's. (<code>*</code> betekent 0 of meer gevallen van het voorgaande item) en dan onmiddelijk gevolgd door 'c'. In de string "cbbabbbbcdebc," komt het patroon overeen met de substring 'abbbbc'.</p> + +<p>Onderstaande tabel geeft een volledige lijst en beschrijving van de speciale karakters die gebruikt kunnen worden in reguliere expressies.</p> + +<table class="standard-table"> + <caption>Speciale karakters in reguliere expressies</caption> + <thead> + <tr> + <th scope="col">Karakter</th> + <th scope="col">Betekenis</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td> + <td> + <p>Matched volgens de volgende regels:<br> + <br> + Een backslash die voorafgaat aan een niet-speciaal karakter geeft aan dat het volgende karakter speciaal is en niet letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, een 'b' zonder een voorafgaande '\' matched kleine-letter b's waar die ook voorkomen — Het karakter zal letterlijk worden geïnterpreteerd. Maar de opeenvolging van '\b' komt niet overeen met wat voor karakter dan ook; het duidt op een <a href="#special-word-boundary" title="#special-word-boundary">woordgrens</a>.<br> + <br> + Een backslash die voorafgaat aan een speciaal karakter geeft aan dat het volgende karakter niet speciaal is en letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, het patroon <code>/a*/</code> vertrouwt op het speciale karakter '<code>*</code>' om 0 of meerdere a's te matchen. Het patroon <code>/a\*/</code> in contrast, noteert de '<code>*</code>' als niet-speciaal, wat matches met strings zoals 'a' mogelijk maakt.</p> + + <p>Vergeet niet om de <code>\</code> zelf te escapen bij het gebruiken van de RegExp("patroon") notatie — <code>\</code> is ook een escape karakter in strings.</p> + </td> + </tr> + <tr> + <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td> + <td>Matched het begin van de input. Matched ook direct na een line break karakter als de multiline vlag ingesteld is op 'true'.<br> + <br> + Als voorbeeld, <code>/^A/</code> matched niet de 'A' in "uit Amsterdam", maar matched wel de 'A' in "Apenstaartje".<br> + <br> + De '<code>^</code>' heeft een verschillende betekenis wanneer het voorkomt als het eerste karakter in een karakterset patroon. Zie <a href="#special-negated-character-set" title="#special-negated-character-set">complemented character sets</a> voor details en een voorbeeld.</td> + </tr> + <tr> + <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td> + <td> + <p>Matched het einde van de input. Matched ook direct voor een line break karakter als de multiline vlag is ingesteld.</p> + + <p>Als voorbeeld, <code>/t$/</code> matched niet de 't' in "beter", maar matched wel in "beet".</p> + </td> + </tr> + <tr> + <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td> + <td> + <p>Matched de voorafgaande expressie 0 of meerdere malen. Equivalent aan <code>{0,}</code>.</p> + + <p>Als voorbeeld, <code>/bo*/</code> matched 'boo' in "de grote boom" en 'b' in "bar" maar niets in "hallo".</p> + </td> + </tr> + <tr> + <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td> + <td> + <p>Vind de voorafgaande expressie 1 of meerdere malen. Equivalent aan <code>{1,}</code>.</p> + + <p>Als voorbeeld, <code>/a+/</code> matched de 'a' in "pan" and alle a's in "haaaaaaatsjoe", maar niets in "zzp".</p> + </td> + </tr> + <tr> + <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td> + <td> + <p>Matched de voorafgaande expressie 0 of 1 maal. Equivalent aan <code>{0,1}</code>.<br> + <br> + Als voorbeeld, <code>/e?le?/</code> matched de 'el' in "angel" en de 'le' in "angle" en ook de 'l' in "oslo".</p> + + <p>Als het direct na de quantifiers *, +, ?, or {} wordt gebruikt maakt het deze niet-gretig (matched het minst mogelijke aantal karakters), in tegenstelling tot de standaard, die gretig is (matched zo veel mogelijk karakters als mogelijk). Bijvoorbeeld, <code>/\d+/</code> toepassen op "123abc" matched "123". Echter, <code>/\d+?/</code> toepassen op diezelfde string matched alleen de "1".</p> + + <p>Wordt ook gebruikt in lookahead stellingen, zoals beschreven in de <code>(x(?=y)</code> en <code>(x(?!y)</code> van deze tabel.<br> + </p> + </td> + </tr> + <tr> + <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td> + <td> + <p>(De decimale punt) matched welk individueel karakter dan ook, met uitzondering van de newline.</p> + + <p>Als voorbeeld, <code>/.n/</code> matched 'an' and 'on' in "nay, an apple is on the tree", maar niet 'nay'.</p> + + <p>Wanneer de <code>s</code> ("dotAll") vlag is ingesteld op 'true' matched het ook newline karakters.</p> + </td> + </tr> + <tr> + <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td> + <td> + <p>Matched 'x' en onthoudt de match, zoals het volgende voorbeeld toont. De haakjes worden <em>capturing parentheses</em> genoemd<br> + <br> + De '<code>(foo)</code>' en '<code>(bar)</code>' in het patroon <code>/(foo) (bar) \1 \2/</code> matchen en onthouden de eerste twee woorden in de string "foo bar foo bar". De <code>\1</code> en <code>\2</code> geven de eerste en tweede substring matches tussen haakjes weer - <code>foo</code> and <code>bar</code>, en matchen de laatste twee woorden van de string. Let op dat <code>\1</code>, <code>\2</code>, ..., <code>\n</code> worden gebruikt in het matchende gedeelte van de regex, voor meer informatie, zie <a href="#special-backreference">\n</a> beneden. In het vervangings gedeelte van een regex moet de syntax <code>$1</code>, <code>$2</code>, ..., <code>$n</code> worden gebruikt, e.g.: <code>'bar foo'.replace(/(...) (...)/, '$2 $1')</code>. <code>$&</code> betekent de gehele gevonden string.</p> + </td> + </tr> + <tr> + <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td> + <td>Matched 'x' maar onthoudt de match niet. De haakjes heten <em>non-capturing </em>haakjes, en maken het mogelijk om sub-expressies te definiëren voor regular expression operators om mee te werken. Overweeg de voorbeeld expressie <code>/(?:foo){1,2}/</code>. Als de expressie <code>/foo{1,2}/</code> was, zouden de <code>{1,2}</code> karakters alleen van toepassing zijn op de laatste 'o' in 'foo'. met de non-capturing haakjes, is <code>{1,2}</code> van toepassing op het gehele woord 'foo'. Voor meer informatie, zie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_parentheses">Using parentheses</a>.</td> + </tr> + <tr> + <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td> + <td> + <p>Matched 'x' alleen als 'x' gevolgd wordt door 'y'. Dit heet een 'lookahead'.</p> + + <p>Als voorbeeld, <code>/Jack(?=Sprat)/</code> matched alleen 'Jack' als het gevolgd wordt door 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> matched alleen 'Jack' als het gevolgd wordt door 'Sprat' of 'Frost'. Echter, noch 'Sprat' noch 'Frost' is onderdeel van de match resultaten.</p> + </td> + </tr> + <tr> + <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td> + <td> + <p>Matched 'x' alleen als 'x' niet gevolgd wordt door 'y'. Dit heet een negated lookahead.</p> + + <p>Als voorbeeld, <code>/\d+(?!\.)/</code> matched alleen een nummer als het niet gevolgd wordt door een decimale punt. De reguliere expressie <code>/\d+(?!\.)/.exec("3.141")</code> matched '141' maar niet '3.141'.</p> + </td> + </tr> + <tr> + <td><code>(?<=<em>y</em>)<em>x</em></code></td> + <td> + <p>Matched <code><em>x</em></code> alleen als <code><em>x</em></code> wordt voorafgegaan door <code><em>y</em></code>.Dit heet een 'lookbehind'.</p> + + <p>Als voorbeeld, /<code>(?<=Jack)Sprat/</code> matched "Sprat" alleen als het wordt voorafgegaan door "Jack".<br> + <code>/(?<=Jack|Tom)Sprat/</code> matched "Sprat" alleen als het wordt voorafgegaan door "Jack" or "Tom".<br> + Echter, noch "Jack" noch "Tom" maken deel uit van de match resultaten.</p> + </td> + </tr> + <tr> + <td><code>(?<!<em>y</em>)<em>x</em></code></td> + <td> + <p>Matched <code><em>x</em></code> alleen als <code><em>x</em></code> niet wordt voorafgegaan door <code><em>y</em></code>. Dit heet een 'negated lookbehind'.</p> + + <p>Als voorbeeld, <code>/(?<!-)\d+/</code> matched een nummer alleen als het niet wordt voorafgegaan door een min-teken.<br> + <code>/(?<!-)\d+/.exec('3')</code> matched "3".<br> + <code>/(?<!-)\d+/.exec('-3')</code> wordt niet gevonden omdat aan het nummer een min-teken voorafgaat.</p> + </td> + </tr> + <tr> + <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td> + <td> + <p>Matched 'x', of 'y' (indien er geen match is voor 'x').</p> + + <p>Als voorbeeld, <code>/groene|rode/</code> matched 'groene' in "groene appel" en 'rode' in "rode appel." De volgorde van 'x' en 'y' maakt uit. <code>a*|b</code> matched bijvoorbeeld de lege string in "b", maar <code>b|a*</code> matched "b" in dezelfde string.</p> + </td> + </tr> + <tr> + <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td> + <td>Matched de voorafgaande expressie precies n maal. N moet een positief getal zijn.<br> + <br> + Als voorbeeld, <code>/a{2}/</code> matched de 'a' in "candy" niet, maar matched wel alle a's in "caandy," en de eerste twee a's in "caaandy."</td> + </tr> + <tr> + <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n,}</code></a></td> + <td> + <p>Matched de voorafgaande expressie tenminste n maal. N moet een positief getal zijn.</p> + + <p>Als voorbeeld, /a{2,}/ matched "aa", "aaaa" en "aaaaa" maar niet "a"</p> + </td> + </tr> + <tr> + <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td> + <td> + <p>Waar <code>n</code> en <code>m</code> positieve getallen zijn en <code>n <= m</code>. Matched tenminste <code>n</code> en maximaal <code>m</code> keer de voorafgaande expressie. Als <code>m</code> is weggelaten, wordt het behandeld als ∞.</p> + + <p>Als voorbeeld, <code>/a{1,3}/</code> matched niets in "cndy", de 'a' in "candy," de eerste twee a's in "caandy," en de eerste drie a's in "caaaaaaandy". Let op dat als "caaaaaaandy" wordt gematched, de match "aaa" is, ook al heeft de originele string meer a's er in staan.</p> + </td> + </tr> + <tr> + <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td> + <td>Karakter set. Dit type patroon matched een van de karakters tussen de haken, inclusief <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings" title="JavaScript Guide: Grammar and types § Using special characters in strings">escape sequences</a>. Speciale karakters zoals de punt(<code>.</code>) en asterisk(<code>*</code>) zijn niet speciaal binnen een karakter set, en hoeven niet geëscaped te worden. Je kan een reeks karakters specificeren door een streepje te gebruiken , zoals het volgende voorbeeld illustreert.<br> + <br> + Het patroon<code> [a-d]</code>, wat dezelfde match uitvoert als <code>[abcd]</code>, matched de 'b' in "brisket" en de 'c' in "city". De patronen <code>/[a-z.]+/ </code>en <code>/[\w.]+/</code> matchen de gehele string "test.i.ng".</td> + </tr> + <tr> + <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td> + <td> + <p>Een genegeerde karakter set, dat wil zeggen het matched alles wat niet binnen de haakjes staat. Je kan een reeks karakters specificeren door een streepje te gebruiken. Alles wat werkt in een normale karakter set werkt ook hier.</p> + + <p>Als voorbeeld, <code>[^abc]</code> is hetzelfde als <code>[^a-c]</code>. Ze matchen als eerste 'r' in "brisket" en 'h' in "chop."</p> + </td> + </tr> + <tr> + <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td> + <td> + <p>Matched een backspace (U+0008). Je hebt vierkante haakjes nodig om een letterlijk backspace karakter te matchen. (Niet te verwarren met <code>\b</code>.)</p> + </td> + </tr> + <tr> + <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td> + <td> + <p>Matched een <em>woordgrens</em>. een woordgrens matched de positie tussen een woord karakter gevolgd door een niet-woord karakter, of tussen een niet-woord karakter gevolgd door een woord karakter, of thet begin van de string, of het einde van de string. Een woordgrens is geen "karakter" om te matchen; net als een anker wordt een woordgens niet toegevoegd aan de match. In andere woorden, de lengte van een gematchede woordgrens is nul. (Niet te verwarren met [\b]</p> + + <p>Voorbeelden met de input string "moon":</p> + + <p><code>/\bm/</code> matched omdat de <code>\b</code> zich aan het begin van de string bevindt; de \b in <code>/oo\b/</code> matched niet omdat de \b zowel voorafgegaan wordt als gevolgd wordt door woord karakters; de \b in <code>/oon\b/</code> matched omdat het aan het zich einde van de string bevindt; de \b in <code>/\w\b\w/</code> zal nooit iets matchen, omdat het zowel voorafgegaan en gevolgd wordt door een woordkarakter.</p> + + <div class="note"> + <p><strong>N.B.:</strong> JavaScript's reguliere expressie engine definieert een specifieke groep karakters als "woord" karakters. Enig karakter niet in groep wordt als non-woord karakter beschouwd. Deze groep karakters is redelijk beperkt: het bestaat enkel uit het Romeinse alfabet in zowel hoofd- als kleine letters, decimale getallen en het underscore karakter. Geaccentueerde karakters zoals "é" of "ü" worden helaas behandelt als non-woord karakters voor wat betreft woordgrenzen, evenals ideografische karakters (e.g. Chinees, Japans, Koreaans) in het algemeen.</p> + </div> + </td> + </tr> + <tr> + <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td> + <td> + <p>Matched een non-woordgrens. Dit matched de volgende gevallen:</p> + + <ul> + <li>Voor het eerste karakter van de string</li> + <li>Na het laatste karakter van de string</li> + <li>Tussen twee woord karakters</li> + <li>Tussen twee niet-woord karakters</li> + <li>Een lege string</li> + </ul> + + <p>Als voorbeeld, <code>/\B../</code> matched 'oo' in "noonday", en <code>/y\B./</code> matched 'ye' in "possibly yesterday."</p> + </td> + </tr> + <tr> + <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td> + <td> + <p>Waar X een karakter is in de reeks van A tot Z. Matched een control karakter in een string.</p> + + <p>Als voorbeeld, <code>/\cM/</code> matched control-M (U+000D) in een string.</p> + </td> + </tr> + <tr> + <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td> + <td> + <p>Matched een numeriek (digit) karakter. Equivalent aan <code>[0-9]</code>.</p> + + <p>Als voorbeeld, <code>/\d/</code> of <code>/[0-9]/</code> matched '2' in "B2 is het kamernummer"</p> + </td> + </tr> + <tr> + <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td> + <td> + <p>Matched een niet-numeriek karacter. Equivalent aan <code>[^0-9]</code>.</p> + + <p>Als voorbeeld, <code>/\D/</code> or <code>/[^0-9]/</code> matched 'B' in "B2 is het kamernummer"</p> + </td> + </tr> + <tr> + <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td> + <td>Matched een form feed (U+000C).</td> + </tr> + <tr> + <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td> + <td>Matched een line feed (U+000A).</td> + </tr> + <tr> + <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td> + <td>Matched een carriage return (U+000D).</td> + </tr> + <tr> + <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td> + <td> + <p>Matched een witruimte karacter, inclusief spatie, tab, form feed, line feed. Equivalent aan <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>Als voorbeeld, <code>/\s\w*/</code> matches ' bar' in "foo bar."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td> + <td> + <p>Matched een karakter anders dan witruimte. Equivalent aan <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>Als voorbeeld, <code>/\S*/</code> matched 'foo' in "foo bar."</p> + </td> + </tr> + <tr> + <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td> + <td>Matched een tab (U+0009).</td> + </tr> + <tr> + <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td> + <td>Matched een verticale tab (U+000B).</td> + </tr> + <tr> + <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td> + <td> + <p>Matched elk alfanumeriek karakters met inbegrip van de underscore. Equivalent aan <code>[A-Za-z0-9_]</code>.</p> + + <p>Als voorbeeld, <code>/\w/</code> matched 'a' in "apple," '5' in "$5.28," en '3' in "3D."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td> + <td> + <p>Matched een niet-woord karakter. Equivalent aan <code>[^A-Za-z0-9_]</code>.</p> + + <p>Als voorbeeld, <code>/\W/</code> of <code>/[^A-Za-z0-9_]/</code> matched '%' in "50%."</p> + </td> + </tr> + <tr> + <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td> + <td> + <p>Waarbij n een positief getal is, een terugreferentie naar de laatste substring die de <em>n</em>de groep tussen ronde haakjes in de reguliere expressie matchde (linker haakjes tellend).</p> + + <p>Als voorbeeld, <code>/apple(,)\sorange\1/</code> matched 'apple, orange,' in "apple, orange, cherry, peach."</p> + </td> + </tr> + <tr> + <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td> + <td> + <p>Matched een NULL (U+0000) karakter. Volg dit niet met nog een getal, want <code>\0<digits></code> is een octale <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings" title="JavaScript Guide: Grammar and types § Using special characters in strings">escape sequence</a>. Gebruik in plaats daarvan <code>\x00</code>.</p> + </td> + </tr> + <tr> + <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td> + <td> + <p>Matched het karakter met de code hh (twee hexadecimale getallen)</p> + </td> + </tr> + <tr> + <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td> + <td> + <p>Matched het karakter met de code hhhh (vier hexadecimale getallen).</p> + </td> + </tr> + <tr> + <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td> + <td> + <p>(enkel als de u vlag is ingesteld) Matched het karakter met de Unicode-waarde hhhh (hexadecimale getallen).</p> + </td> + </tr> + </tbody> +</table> + +<p>Invoer van gebruikers escapen die als letterlijke string binnen een reguliere expressie behandeld moet worden—die anders als een speciaal karakter gezien zou worden—kan bereikt worden met eenvoudige vervanging:</p> + +<pre>function escapeRegExp(string) { + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string +} +</pre> + +<p>De g na de reguliere expressie is een optie of vlaggetje wat globaal zoekt, dus in de hele string kijkt en alle vondsten teruggeeft. Dit wordt in detail beneden uitgelegd in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Advanced Searching With Flags</a></p> + +<h3 id="Ronde_haakjes_gebruiken">Ronde haakjes gebruiken</h3> + +<p>Ronde haakjes om een deel van het reguliere expressie patroon zorgen ervoor dat een deel van de gevonden substring wordt onthouden. Eenmaal onthouden kan de substring opgehaald worden voor ander gebruik, zoals beschreven in <a href="#Using_parenthesized_substring_matches">Using Parenthesized Substring Matches.</a></p> + +<p>Als voorbeeld, het patroon <code>/Chapter (\d+)\.\d*/</code> illustreert additionele ontsnapte en bijzondere karakters en geeft aan dat een deel van het patroon moet worden onthouden. Het vind precies de karakters 'Chapter' gevolgd door een of meer numerieke karakters (<code>\d</code> betekent ieder numeriek karakter en <code>+</code> betekent 1 of meer keer), gevolgd door een decimale punt (wat een bijzonder karakter is uit zichzelf; \ voorafgaand aan de punt betekend dat het patroon moet zoeken naar het letterlijke karakter '.'), gevolgd door enig numeriek karakter 0 of meer keer. (<code>\d</code> betekent ieder numeriek karakter, <code>*</code> betekent 0 of meer keer). Daarnaast worden de ronde haakjes gebruikt om het eerste gevonden numerieke karakters te onthouden.</p> + +<p>Dit patroon wordt gevonden in "Open Chapter 4.3, paragraph 6" en "4' wordt onthouden. Het patroon wordt niet gevonden in "Chapter 3 en 4" omdat de string geen punt bevat na de '3'.</p> + +<p>Om een substring te vinden zonder het gevonden deel te onthouden kan binnen de ronde haakjes <code>?:</code> voor het patroon geplaatst worden. Als voorbeeld, <code>(?:\d+)</code> vind een of meer numerieke karakters maar onthoudt de gevonden karakters niet.</p> + +<h2 id="Werken_met_reguliere_expressies">Werken met reguliere expressies</h2> + +<p>Reguliere expressies worden gebruikt met de <code>RegExp</code> methoden <code>test</code> en <code>exec</code> en met de <code>String</code> methoden <code>match</code>, <code>replace</code>, <code>search</code>, and <code>split</code>. Deze methoden zijn in detail uitgelegd in de <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript referentie</a></p> + +<table class="standard-table"> + <caption>Methoden die reguliere expressies gebruiken</caption> + <thead> + <tr> + <th scope="col">Methode</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("RegExp.exec", "exec")}}</td> + <td> + <p>Een <code>RegExp</code> methode die zoekt naar een vondst in een string. Het geeft een lijst (array) met informatie terug of null bij geen vondst.</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.test", "test")}}</td> + <td> + <p>Een <code>RegExp</code> methode die op een vondst test in een string. geeft true of false terug.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}</td> + <td> + <p>Een <code>String</code> methode die zoekt naar een vondst in een string. Het geeft een array met informatie terug of null bij geen vondst.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.matchAll", "matchAll")}}</td> + <td> + <p>Een <code>String</code> methode die een iterator teruggeeft met alle vondsten, inclusief opgeslagen (capturing) groepen</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.search", "search")}}</td> + <td> + <p>Een <code>String</code> methode die op een vondst in een string test. Het geeft de index van de vonst terug of -1 indien niets gevonden is.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.replace", "replace")}}</td> + <td> + <p>Een <code>String</code> methode die zoekt naar en vondst in een string en de gevonden substring vervangt met een andere substring.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td> + <p>Een <code>String</code> methode die een reguliere expressie of een vaste string gebruikt om een string op te delen in een lijst (array) van substrings.</p> + </td> + </tr> + </tbody> +</table> + +<p>Gebruik de <code>test</code> of <code>search</code> methode wanneer je wilt weten of een string een patroon bevat; gebruik voor meer informatie (maar langzamere executie) de <code>exec</code> of <code>match</code> methode. Als je <code>exec</code> of <code>match</code> gebruikt en als er vondsten zijn, dan geven deze methoden een lijst (array) terug en updaten de eigenschappen van het betreffende reguliere expressie object en ook van het voorgedefinieerde reguliere expressie object, <code>RegExp</code>. Als niets wordt gevonden geeft de <code>exec</code> methode null terug, wat teruggeleid wordt naar <code>false</code>.</p> + +<p>In het volgende voorbeeld gebruikt het script de <code>exec</code> methode om een vondst te doen in een string.</p> + +<pre class="brush: js">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Als je geen toegang nodig hebt tot de eigenschappen van de reguliere expressie is dit script een alternatieve manier om <code>myArray</code> te creëren:</p> + +<pre class="brush: js">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); + // gelijk aan "cdbbdbsbz".match(/d(b+)d/g); echter, + // "cdbbdbsbz".match(/d(b+)d/g) heeft als resultaat Array [ "dbbd" ], terwijl + // /d(b+)d/g.exec('cdbbdbsbz') als resultaat heeft Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]. +</pre> + +<p>(Zie <a href="#g-different-behaviors">g different behaviors</a> voor verdere info over de verschillende werkingen.)</p> + +<p>Als je een reguliere expressie wil opbouwen uit een string, is dit script nog een alternatief:</p> + +<pre class="brush: js">var myRe = new RegExp('d(b+)d', 'g'); +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Met dit script is de vondst een success en geeft het een lijst (array) terug en update de eigenschappen die in de volgende tabel worden getoond:</p> + +<table class="standard-table"> + <caption>Resultaten van reguliere expressie executie.</caption> + <thead> + <tr> + <th scope="col">Object</th> + <th scope="col">Eigenschap of index</th> + <th scope="col">Beschrijving</th> + <th scope="col">In dit voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td></td> + <td> + <p>De gevonden string en alle onthouden substrings.</p> + </td> + <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td> + <p>De 0-gebaseerde index van de vondst in de invoer string.</p> + </td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>De originele string</td> + <td><code>"cdbbdbsbz"</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>De laatste gevonden karakters.</td> + <td><code>"dbbd"</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td> + <p>De index vanaf waar de volgende match gestart moet worden. (deze eigenschap is alleen ingesteld als de reguliere expressie de g optie gebruikt, beschreven in <a href="#Advanced_searching_with_flags">Advanced Searching With Flags</a>.)</p> + </td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td> + <p>De tekst van het patroon. Geüpdate op het moment dat de reguliere expressie wordt gecreërd, niet geëxecuteerd.</p> + </td> + <td><code>"d(b+)d"</code></td> + </tr> + </tbody> +</table> + +<p>Zoals getoond in het tweede formulier van dit voorbeeld kan je een reguliere expressie gebruiken die gemaakt is met een object initializer zonder het aan een variabele toe te kennen. Echter, als je dit doet is ieder voorval een nieuwe reguliere expressie. Om deze reden, als je deze vorm gebruikt zonder het aan een variabele toe te kennen, kan je vervolgens niet de eigenschappen van de reguliere expressie verkrijgen. Stel dat je bijvoorbeeld dit script hebt:</p> + +<pre class="brush: js">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +console.log('The value of lastIndex is ' + myRe.lastIndex); + +// "The value of lastIndex is 5" +</pre> + +<p>Echter, als je dit script hebt:</p> + +<pre class="brush: js">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); +console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex); + +// "The value of lastIndex is 0" +</pre> + +<p>De voorvallen van <code>/d(b+)d/g</code> in de twee statements zijn verschillende reguliere expressie objecten en hebben daarom verschillende waarden voor hun <code>lastIndex</code> eigenschap. Als je toegang nodig hebt tot de eigenschappen van een reguliere expressie die gecreërd is met een object initializer, moet je het eerst toekennen aan een variabele.</p> + +<h3 id="Using_parenthesized_substring_matches_2"><a id="Using_parenthesized_substring_matches" name="Using_parenthesized_substring_matches">Using parenthesized substring matches</a></h3> + +<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> + +<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p> + +<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = 'John Smith'; +var newstr = str.replace(re, '$2, $1'); +console.log(newstr); + +// "Smith, John" +</pre> + +<h3 id="Advanced_searching_with_flags_2"><a name="Advanced_searching_with_flags">Advanced searching with flags</a></h3> + +<p>Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p> + +<table class="standard-table"> + <caption>Regular expression flags</caption> + <thead> + <tr> + <th scope="col">Flag</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Global search.</td> + </tr> + <tr> + <td><code>i</code></td> + <td>Case-insensitive search.</td> + </tr> + <tr> + <td><code>m</code></td> + <td>Multi-line search.</td> + </tr> + <tr> + <td><code>s</code></td> + <td>Allows <code>.</code> to match newline characters.</td> + </tr> + <tr> + <td><code>u</code></td> + <td>"unicode"; treat a pattern as a sequence of unicode code points</td> + </tr> + <tr> + <td><code>y</code></td> + <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td> + </tr> + </tbody> +</table> + +<p>To include a flag with the regular expression, use this syntax:</p> + +<pre class="brush: js">var re = /pattern/flags; +</pre> + +<p>or</p> + +<pre class="brush: js">var re = new RegExp('pattern', 'flags'); +</pre> + +<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p> + +<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p> + +<pre class="brush: js">var re = /\w+\s/g; +var str = 'fee fi fo fum'; +var myArray = str.match(re); +console.log(myArray); + +// ["fee ", "fi ", "fo "] +</pre> + +<p>You could replace the line:</p> + +<pre class="brush: js">var re = /\w+\s/g; +</pre> + +<p>with:</p> + +<pre class="brush: js">var re = new RegExp('\\w+\\s', 'g'); +</pre> + +<p>and get the same result.</p> + +<p id="g-different-behaviors">The behavior associated with the '<strong><code>g</code></strong>' flag is different when the <code>.exec()</code> method is used. (The roles of "class" and "argument" get reversed: In the case of <code>.match()</code>, the string class (or data type) owns the method and the regular expression is just an argument, while in the case of <code>.exec()</code>, it is the regular expression that owns the method, with the string being the argument. Contrast <em><code>str.match(re)</code></em> versus <em><code>re.exec(str)</code></em>.) The '<code><strong>g</strong></code>' flag is used with the <strong><code>.exec()</code></strong> method to get iterative progression.</p> + +<pre class="brush: js">var xArray; while(xArray = re.exec(str)) console.log(xArray); +// produces: +// ["fee ", index: 0, input: "fee fi fo fum"] +// ["fi ", index: 4, input: "fee fi fo fum"] +// ["fo ", index: 7, input: "fee fi fo fum"]</pre> + +<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following examples show some uses of regular expressions.</p> + +<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3> + +<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name last) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p> + +<pre class="brush: js">// The name string contains multiple spaces and tabs, +// and may have multiple spaces between first and last names. +var names = 'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand '; + +var output = ['---------- Original String\n', names + '\n']; + +// Prepare two regular expression patterns and array storage. +// Split the string into array elements. + +// pattern: possible white space then semicolon then possible white space +var pattern = /\s*;\s*/; + +// Break the string into pieces separated by the pattern above and +// store the pieces in an array called nameList +var nameList = names.split(pattern); + +// new pattern: one or more characters then spaces then characters. +// Use parentheses to "memorize" portions of the pattern. +// The memorized portions are referred to later. +pattern = /(\w+)\s+(\w+)/; + +// Below is the new array for holding names being processed. +var bySurnameList = []; + +// Display the name array and populate the new array +// with comma-separated names, last first. +// +// The replace method removes anything matching the pattern +// and replaces it with the memorized string—the second memorized portion +// followed by a comma, a space and the first memorized portion. +// +// The variables $1 and $2 refer to the portions +// memorized while matching the pattern. + +output.push('---------- After Split by Regular Expression'); + +var i, len; +for (i = 0, len = nameList.length; i < len; i++) { + output.push(nameList[i]); + bySurnameList[i] = nameList[i].replace(pattern, '$2, $1'); +} + +// Display the new array. +output.push('---------- Names Reversed'); +for (i = 0, len = bySurnameList.length; i < len; i++) { + output.push(bySurnameList[i]); +} + +// Sort by last name, then display the sorted array. +bySurnameList.sort(); +output.push('---------- Sorted'); +for (i = 0, len = bySurnameList.length; i < len; i++) { + output.push(bySurnameList[i]); +} + +output.push('---------- End'); + +console.log(output.join('\n')); +</pre> + +<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3> + +<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p> + +<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p> + +<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> + var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; + function testInfo(phoneInput) { + var OK = re.exec(phoneInput.value); + if (!OK) + window.alert(phoneInput.value + ' isn\'t a phone number with area code!'); + else + window.alert('Thanks, your phone number is ' + OK[0]); + } + </script> + </head> + <body> + <p>Enter your phone number (with area code) and then click "Check". + <br>The expected format is like ###-###-####.</p> + <form action="#"> + <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button> + </form> + </body> +</html> +</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/nl/web/javascript/guide/werken_met_objecten/index.html b/files/nl/web/javascript/guide/werken_met_objecten/index.html new file mode 100644 index 0000000000..a2dffff1b8 --- /dev/null +++ b/files/nl/web/javascript/guide/werken_met_objecten/index.html @@ -0,0 +1,497 @@ +--- +title: Werken met objecten +slug: Web/JavaScript/Guide/Werken_met_objecten +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary">JavaScript is ontworpen op een simpel object-georiënteerde paradigma. Een object is een verzameling eigenschappen, en een eigenschap is een associatie tussen een naam (of een sleutel) en een waarde. De waarde van een eigenschap kan een functie zijn, in welk geval de eigenschap bekend staat als een methode. Naast objecten die zijn gedefinieerd in de browser, kunt u uw eigen objecten definiëren. In dit hoofdstuk wordt beschreven hoe u objecten, eigenschappen, functies en methoden kunt gebruiken en hoe u uw eigen objecten kunt maken.</p> + +<h2 id="Objecten_overzicht">Objecten overzicht</h2> + +<p>Objecten in JavaScript, net zoals in veel andere programmeertalen, kunnen worden vergeleken met objecten in het echte leven. Het begrip objecten in JavaScript kan worden begrepen met echte, tastbare objecten.</p> + +<p>In JavaScript is een object een zelfstandige entiteit, met eigenschappen en type. Vergelijk het bijvoorbeeld met een kopje. Een kopje is een voorwerp, met eigenschappen. Een kopje heeft een kleur, een ontwerp, gewicht, een materiaal waaruit het bestaat, enz. Op dezelfde wijze kunnen JavaScript objecten eigenschappen hebben die hun karakteristieken definiëren.</p> + +<h2 id="Objecten_en_eigenschappen">Objecten en eigenschappen</h2> + +<p>Een JavaScript-object heeft eigenschappen die daarmee samenhangen. Een eigenschap van een object kan worden uitgelegd als een variabele die is gekoppeld aan het object. Objecteigenschappen zijn in principe hetzelfde als gewone JavaScript-variabelen, behalve de koppeling bij objecten. De eigenschappen van een object bepalen de karakteristieken van het object. U krijgt toegang tot de eigenschappen van een object met een simpele stip-notatie:</p> + +<pre class="brush: js">objectName.propertyName +</pre> + +<p>Net als alle JavaScript variabelen, kunnen zowel de objectnaam (die een normale variabele zijn) en eigendomsnaam hoofdlettergevoelig zijn. U kunt een eigenschap definiëren door het toewijzen van een waarde. Laten we bijvoorbeeld een object maken met de naam myCar en geef het de eigenschappen als merk, model en jaar als volgt:</p> + +<pre class="brush: js">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>Niet-toegewezen eigenschappen van een object zijn {{jsxref("undefined")}} (en niet {{jsxref("null")}}).</p> + +<pre class="brush: js">myCar.color; // undefined</pre> + +<p>Eigenschappen van JavaScript-objecten kunnen toegankelijk of ingesteld worden met behulp van een haakjes notitie (voor meer details zie toegangsbeheerders). Objecten worden soms associatieve arrays genoemd, aangezien elke eigenschap wordt geassocieerd met een tekenreeks die kan worden gebruikt om toegang te krijgen. Zo kun je bijvoorbeeld de eigenschappen van het myCar-object openen:</p> + +<pre class="brush: js">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>Een object naam eigenschap kan een geldige JavaScript-string zijn, of iets dat kan worden omgezet in een tekenreeks, inclusief de lege tekenreeks. Echter, elke naam eigenschap die geen geldige JavaScript-identificatie is (bijvoor-beeld een naam eigenschap die een spatie of een koppelteken heeft, of dat begint met een nummer), kan alleen worden geopend met behulp van de vierkante haakjes notatie. Deze notatie is ook erg handig wanneer naam eigenschappen dynamisch worden bepaald (wanneer de naam eigenschap niet tot de runtime wordt bepaald). Voorbeelden zijn als volgt:</p> + +<pre class="brush: js">// four variables are created and assigned in a single go, +// separated by commas +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'Dot syntax'; +myObj['date created'] = 'String with space'; +myObj[str] = 'String value'; +myObj[rand] = 'Random Number'; +myObj[obj] = 'Object'; +myObj[''] = 'Even an empty string'; + +console.log(myObj); +</pre> + +<p>Houd er rekening mee dat alle toetsen in de notatie van de vierkante haakjes worden geconverteerd naar String type, omdat objecten in JavaScript alleen String type kunnen hebben als sleutel type. Bijvoorbeeld, in de bovenstaande code, wanneer de sleutel obj aan de myObj wordt toegevoegd, roept JavaScript de methode obj.toString () op en gebruikt u deze resultaatreeks als de nieuwe sleutel.</p> + +<p>U kunt ook eigenschappen krijgen door een stringwaarde te gebruiken die in een variabele is opgeslagen:</p> + +<pre class="brush: js">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p>U kunt de notitie van de haakjes gebruiken voor ... om te herhalen over alle optelbare eigenschappen van een object. Om te illustreren hoe dit werkt, geeft de volgende functie de eigenschappen van het object weer wanneer u het object en de objectnaam als argumenten voor de functie doorstuurt:</p> + +<pre class="brush: js">function showProps(obj, objName) { + var result = ''; + for (var i in obj) { + // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain + if (obj.hasOwnProperty(i)) { + result += objName + '.' + i + ' = ' + obj[i] + '\n'; + } + } + return result; +} +</pre> + +<p>Dus, de de functie aanroep <code>showProps(myCar, "myCar")</code> Zout het volgende retourneren:</p> + +<pre class="brush: js">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 id="Doorloop_de_eigenschappen_van_een_object">Doorloop de eigenschappen van een object</h2> + +<p>Uitgaande van ECMAScript 5 zijn er drie manieren om objecteigenschappen te kunnen bekijken/doorlopen:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops</li> + <li>Deze methode traceert alle berekenbare eigenschappen van een object en zijn prototype-keten</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Deze methode geeft een array met alle eigen (niet in de prototype-keten) opsombare naam eigenschappen ("keys") van een object <code>o</code> terug.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Deze methode geeft een array met al zijn naam eigenschappen (opsomming of niet) van een object <code>o</code> terug.</li> +</ul> + +<p>Vóór ECMAScript 5 was er geen native manier om alle eigenschappen van een object te overlopen. Dit kan echter worden bereikt met de volgende functie:</p> + +<pre class="brush: js">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat(Object.getOwnPropertyNames(objectToInspect)); + } + + return result; +} +</pre> + +<p>Dit kan handig zijn om 'verborgen' eigenschappen te onthullen (eigenschappen in de prototype-keten die niet door het object toegankelijk zijn, omdat een andere eigenschap eerder in de prototype-keten dezelfde naam heeft). Op deze manier kan er gemakkelijk een lijst van toegankelijke eigenschappen worden gemaakt. </p> + +<h2 id="Nieuwe_objecten_maken">Nieuwe objecten maken</h2> + +<p>JavaScript heeft een aantal voorgedefinieerde objecten. Daarnaast kunt u uw eigen objecten maken. U kunt een object maken met een objectinitiator. Als alternatief kunt u eerst een constructorfunctie maken en vervolgens een object oproepen die de functie in combinatie met de nieuwe operator invult.</p> + +<h3 id="Object_initialiseerders_gebruiken"><a id="Object initialiseerders gebruiken" name="Object initialiseerders gebruiken">Object initialiseerders gebruiken</a></h3> + +<p>Naast het maken van objecten die een constructorfunctie gebruiken, kunt u objecten maken met behulp van een objectinitiator. Het gebruik van objectinitialisatoren wordt soms aangeduid als het maken van objecten met letterlijke notatie. "Object initializer" is consistent met de terminologie die door C ++ wordt gebruikt.</p> + +<p>De syntaxis voor een object met een objectinitialiseerder is:</p> + +<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier... + 2: value_2, // or a number... + // ..., + 'property n': value_n }; // or a string +</pre> + +<p>Waar obj de naam van het nieuwe object is, is elke eigenschap_i een identificatie (een naam, een getal of een tekenreeks) en elke waarde_i is een uitdrukking waarvan de waarde is toegewezen aan het property_i. De obj en de opdracht zijn optioneel; Als u niet elders naar het object hoeft te verwijzen, hoeft u het niet toe te wijzen aan een variabele. (Houd er echter rekening mee dat u het object letterlijk tussen haakjes moet kunnen wikkelen wanneer het object verschijnt waar een verklaring wordt verwacht, om niet letterlijk te verwarren met een blokverklaring.)</p> + +<p>Objectinitialisatoren zijn expressies, en elke objectinitialiser resulteert in een nieuw object dat wordt gemaakt, wanneer de statement waarin het verschijnt is uitgevoerd. Identieke objectinitializers maken onderscheidende objecten die niet gelijk zijn aan elkaar. Objecten worden gecreëerd als een oproep naar een nieuw object () is gemaakt; Dat wil zeggen, objecten gemaakt van object letterlijke expressies zijn instances van object.</p> + +<p>De volgende statement maakt een object en wijst deze toe aan de variabele x als en alleen als de uitdrukkings cond waar is:</p> + +<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; +</pre> + +<p>Het volgende voorbeeld maakt myHonda met drie eigenschappen. Merk op dat de motoreigenschap ook een object is met eigen eigenschappen.</p> + +<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>U kunt ook objectinitieringen gebruiken om arrays te maken. Zie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p> + +<h3 id="Gebruik_van_een_constructor_functie">Gebruik van een constructor functie</h3> + +<p>Alternatief voor het maken van een object met deze twee stappen:</p> + +<ol> + <li>Definieer het objecttype door een constructorfunctie te schrijven. Er is een sterke conventie, met goede reden, om een hoofdletter te gebruiken.</li> + <li>Creer een instance van het object met <code>new</code>.</li> +</ol> + +<p>Om een objecttype te definiëren, creëer een functie voor het objecttype dat zijn naam, eigenschappen en methoden specificeert. Stel bijvoorbeeld dat u een objecttype voor auto's wilt maken. U wilt dat dit type object een auto wordt genoemd, en u wilt dat het eigenschappen voor make, model en jaar heeft. Om dit te doen, zou u de volgende functie schrijven:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Let op de manier om waarden aan de eigenschappen van het object toe te wijzen op basis van de waarden die aan de functie zijn overgedragen.</p> + +<p>Nu kunt u als volgt een object genaamd mycar maken:</p> + +<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Deze verklaring maakt mycar en wijst de opgegeven waarden toe voor zijn eigenschappen. Dan is de waarde van mycar.make de string "Eagle", mijncar.jaar is het geheel getal 1993, enzovoort.</p> + +<p>U kunt elk gewenst aantal car objecten maken door het aanroepen van new. Bijvoorbeeld,</p> + +<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p>Een object kan een eigenschap hebben dat zelf een ander object is. Stel bijvoorbeeld dat u een object genaamd person als volgt definieert:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>En installeer dan twee nieuwe persoon objecten als volgt:</p> + +<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Vervolgens kunt u de definitie van de auto omschrijven om een eigendom van een persoon die een persoon object heeft, als volgt te omvatten:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Om de nieuwe objecten te instantiëren, gebruik dan het volgende:</p> + +<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>Merk op dat in plaats van een letterlijke tekenreeks of integerwaarde bij het maken van nieuwe objecten de bovengenoemde uitspraken de voorwerpen rand overbrengen en kenmerken als de argumenten voor de eigenaren. Dan als u de naam van de eigenaar van car2 wilt ontdekken, kunt u toegang hebben tot de volgende accommodatie:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<p>Houd er rekening mee dat u altijd een eigenschap kunt toevoegen aan een eerder gedefinieerd object. Bijvoorbeeld de verklaring</p> + +<pre class="brush: js">car1.color = 'black'; +</pre> + +<p>Voegt een kleureigenschap toe aan car1, en geeft het een waarde van 'black' toe. Dit heeft echter geen invloed op andere objecten. Om de nieuwe eigenschap toe te voegen aan alle objecten van hetzelfde type, moet u de eigenschap toevoegen aan de definitie van het type auto-object.</p> + +<h3 id="Gebruik_van_de_Object.create_methode">Gebruik van de <code>Object.create</code> methode</h3> + +<p>Objecten kunnen ook worden gemaakt met de methode {{jsxref ("Object.create ()")}}. Deze methode kan erg handig zijn, omdat u het prototype object voor het object kunt maken dat u wilt maken zonder dat u een constructor function.type moet definiëren.</p> + +<pre class="brush: js">// Animal properties and method encapsulation +var Animal = { + type: 'Invertebrates', // Default value of properties + displayType: function() { // Method which will display type of Animal + console.log(this.type); + } +}; + +// Create new animal type called animal1 +var animal1 = Object.create(Animal); +animal1.displayType(); // Output:Invertebrates + +// Create new animal type called Fishes +var fish = Object.create(Animal); +fish.type = 'Fishes'; +fish.displayType(); // Output:Fishes</pre> + +<h2 id="Overerving">Overerving</h2> + +<p>Alle objecten in JavaScript overerven van ten minste één ander object. Het object dat wordt geërfd is bekend als het prototype, en de geërfde eigenschappen zijn te vinden in het prototype object van de constructor. Zie <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> voor meer informatie.</p> + +<h2 id="Objecteigenschappen_indexeren">Objecteigenschappen indexeren</h2> + +<p>U kunt verwijzen naar een eigenschap van een object, hetzij door zijn eigendomsnaam of door zijn ordinale index. Als u voor het eerst een eigenschap definieert, moet u het altijd bij zijn naam noemen, en als u eerst een eigenschap definieert met een index, moet u het altijd door de index refereren.</p> + +<p>Deze beperking is van toepassing wanneer u een object en zijn eigenschappen maakt met een constructorfunctie(zoals eerder met het Car-object type) en wanneer u afzonderlijke eigenschappen expliciet definieert(bijvoorbeeld, <code>myCar.color = "red"</code>). Als u eerst een objecteigenschap definieert met een index, zoals <code>myCar[5] = "25 mpg"</code>, verwijst u vervolgens alleen naar de eigenschap als <code>myCar[5]</code>.</p> + +<p>De uitzondering op deze regel zijn objecten die uit HTML worden gereflecteerd, zoals de formulier array. U kunt altijd naar objecten in deze arrays verwijzen door hun ordernummer (op basis van waar ze in het document verschijnen) of hun naam (indien gedefinieerd). ). Als de tweede <FORM> -code in een document bijvoorbeeld een NAME-kenmerk van "myForm" heeft, kunt u verwijzen naar het formulier als <code>document.forms[1]</code> of <code>document.forms["myForm"]</code> of <code>document.forms.myForm</code>.</p> + +<h2 id="Definiëren_van_eigenschappen_voor_een_objecttype">Definiëren van eigenschappen voor een objecttype</h2> + +<p>U kunt een eigenschap toevoegen aan een eerder gedefinieerd objecttype door het eigenschap prototype te gebruiken. Dit definieert een eigenschap die wordt gedeeld door alle objecten van het opgegeven type, in plaats van door slechts één instantie van het object. De volgende code voegt een kleureigenschap toe aan alle objecten van het type auto, en geeft vervolgens een waarde toe aan de kleureigenschap van het object <code>car1</code>.</p> + +<pre class="brush: js">Car.prototype.color = null; +car1.color = 'black'; +</pre> + +<p>Zie het <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> van het <code>Functie</code>object in de <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> voor meer informatie.</p> + +<h2 id="Methodes_definiëren">Methodes definiëren</h2> + +<p>Een <em>method</em> is een functie die geassocieerd wordt met een object, of, simpel gezegd, een methode is een eigen-schap van een object dat een functie is. Methoden worden gedefinieerd zoals de normale functies zijn ge-definieerd, behalve dat ze als eigendom van een object moeten worden toegewezen. Zie ook <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> voor meer details. Een voorbeeld is:</p> + +<pre class="brush: js">objectName.methodname = function_name; + +var myObj = { + myMethod: function(params) { + // ...do something + } + + // OR THIS WORKS TOO + + myOtherMethod(params) { + // ...do something else + } +}; +</pre> + +<p>Waar objectnaam een bestaand object is, methodname is de naam die u aan de methode toewijst en functienaam is de naam van de functie.</p> + +<p>U kunt dan de methode in de context van het object als volgt noemen:</p> + +<pre class="brush: js">object.methodname(params); +</pre> + +<p>U kunt methoden voor een objecttype definiëren door een methode-definitie in de objectconstructorfunctie op te nemen. U kunt een functie definiëren die de eigenschappen van de eerder gedefinieerde autoobjecten wilt opmaken en weergeven; bijvoorbeeld,:</p> + +<pre class="brush: js">function displayCar() { + var result = 'A Beautiful ' + this.year + ' ' + this.make + + ' ' + this.model; + pretty_print(result); +} +</pre> + +<p>Waar <code>pretty_print</code> een functie is om een horizontale regel en een tekenreeks weer te geven. Let op het gebruik van <code>this</code> verwijzend naar het object waartoe de methode behoort.</p> + +<p>Van deze functie <code>car</code> kun je een methode maken door het toevoegen van een statement.</p> + +<pre class="brush: js">this.displayCar = displayCar; +</pre> + +<p>Naar de objectdefinitie. Dus, de volledige definitie van auto zou nu lijken</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p>Dan kunt u de displayCar-methode voor elk van de objecten als volgt noemen:</p> + +<pre class="brush: js">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 id="Het_gebruik_van_this_voor_object_referenties">Het gebruik van <code>this</code> voor object referenties</h2> + +<p>JavaScript heeft een speciaal zoekwoord, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, dat u binnen een methode kunt gebruiken om naar het huidige object te verwijzen. Stel bijvoorbeeld dat u een functie heeft genaamd <code>validate,</code> die een object's eigenschaps waarde, gegeven de object's hoge en lage waarde valideert:</p> + +<pre class="brush: js">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) { + alert('Invalid Value!'); + } +} +</pre> + +<p>Vervolgens kunt u <code>validate</code> in elke form element's onchange event handler aanroepen, gebruikmakend van this om het element door te geven zoals in het volgende voorbeeld:</p> + +<pre class="brush: html"><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</pre> + +<p>In het algemeen verwijst dit naar het aanroepende object in een methode.</p> + +<p>In combinatie met de <code>form</code> eigenschap, <code>kan dit verwijzen naar het ouderformulier van het huidige object</code>. In het volgende voorbeeld, bevat het formulier <code>myForm</code> een <code>Text</code> object en een button. Wanneer de gebruiker op de button klikt, wordt de waarde van het tekstobject ingesteld op de naam van het formulier. De knop <code>onclick</code> event handler gebruikt dit <code>this.form</code> to om te verwijzen naar het ouder formulier, <code>myForm</code>.</p> + +<pre class="brush: html"><form name="myForm"> +<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> +<p><input name="button1" type="button" value="Show Form Name" + onclick="this.form.text1.value = this.form.name"> +</p> +</form></pre> + +<h2 id="Definitie_van_getters_en_setters">Definitie van getters en setters</h2> + +<p>Een <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is een methode die de waarde van een specifieke eigenschap krijgt. Een setter is een methode die de waarde van een specifieke eigenschap bepaalt. U kunt getters en setters definiëren op elk voorgedefinieerd kern object of door gebruiker gedefinieerd object dat de toevoeging van nieuwe eigenschappen ondersteunt. De syntaxis voor het definiëren van getters en setters maakt gebruik van de object letterlijke syntaxis.</p> + +<p><code>Het volgende illustreert hoe getters en setters kunnen werken voor een gebruiker gedefinieerd object o</code>.</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log(o.a); // 7 +console.log(o.b); // 8 +o.c = 50; +console.log(o.a); // 25 +</pre> + +<p>De <code>o</code> objecten eigenschappen zijn:</p> + +<ul> + <li><code>o.a</code> — een nummer</li> + <li><code>o.b</code> — een getter die <code>o.a</code> teruggeeft met 1 erbij geteld</li> + <li><code>o.c</code> — een setter die de waarde van <code>o.a</code> instelt op de helft van de waarde van <code>o.c</code></li> +</ul> + +<p>Houd er rekening mee dat de functie namen van getters en setters gedefinieerd in een object letterlijk met behulp van "[gs] et property ()" (in tegenstelling tot __define [GS]etter__) niet de namen van de getters zelf zijn, hoewel de "[gs]et Property()" syntax zou ju kunnen misleiden anders te denken. Om een functie te noemen in een getter of setter met behulp van de "[gs]et property () "syntax, definieer u een expliciet genoemde functie met behulp van <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineProperty">Object.defineProperty</a></code> (of de <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global +Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code> legacy fallback).</p> + +<p>De volgende code illustreert hoe getters en setters het {{jsxref ("Date")}} prototype kunnen uitbreiden om een jaar eigenschap toe te voegen aan alle gevallen van de vooraf gedefinieerde Date class. Het maakt gebruik van de bestaande GetFullYear- en setFullYear-methoden van de Date-klasse om de getter en setter van het jaar te ondersteunen.</p> + +<p>Deze uitspraken definiëren een getter en setter voor het jaar eigenschap:</p> + +<pre class="brush: js">var d = Date.prototype; +Object.defineProperty(d, 'year', { + get: function() { return this.getFullYear(); }, + set: function(y) { this.setFullYear(y); } +}); +</pre> + +<p>Deze statements gebruiken de getter en setter in een Datum object:</p> + +<pre class="brush: js">var now = new Date(); +console.log(now.year); // 2000 +now.year = 2001; // 987617605170 +console.log(now); +// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 +</pre> + +<p>In principe, getters en setters kunnen beide</p> + +<ul> + <li>Gedefinieerd met behulp van <a href="#Object initialiseerders gebruiken">object initializers</a>, of</li> + <li>Toegevoegd worden aan een object op elk moment met behulp van een getter of setter toevoegingsmethode.</li> +</ul> + +<p>Bij het definiëren van getters en setters met behulp van <a href="#Object initialiseerders gebruiken">object initializers</a> alles wat u hoeft te doen is het prefix van een getter methode met get en een setter methode met set. Natuurlijk mag de getter-methode geen parameter verwachten, terwijl de setter-methode precies een parameter verwacht (de nieuwe waarde die wordt ingesteld). Bijvoorbeeld:</p> + +<pre class="brush: js">var o = { + a: 7, + get b() { return this.a + 1; }, + set c(x) { this.a = x / 2; } +}; +</pre> + +<p>Getters en setters kunnen ook op elk moment na creatie aan een object worden toegevoegd met de methode Object.defineProperties. De eerste parameter van deze methode is het object waarop u de getter of setter wilt definiëren. De tweede parameter is een object waarvan de eigenschap namen getter of setter namen zijn en waarvan de eigenschapswaarden objecten zijn om de getter- of setterfuncties te definiëren. Hier is een voorbeeld dat dezelfde getter en setter definieert in het vorige voorbeeld:</p> + +<pre class="brush: js">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property +console.log(o.b); // Runs the getter, which yields a + 1 or 6 +</pre> + +<p>Welke van de twee te kiezen vormen hangt af van uw programmeerstijl en taak. Als u gaat voor de objectinitiator wanneer u een prototype definieert, zal u waarschijnlijk meestal de eerste vorm kiezen. Dit formulier is compacter en natuurlijker. Als u later wel getters en setters moet toevoegen, omdat u het prototype of het specifieke object niet hebt geschreven, dan is de tweede vorm het enige mogelijke formulier. De tweede vorm vertegenwoordigt waarschijnlijk het dynamische karakter van JavaScript, maar het kan de code moeilijk lezen en begrijpen.</p> + +<h2 id="Verwijderen_van_eigenschappen">Verwijderen van eigenschappen</h2> + +<p>U kunt een niet-overgenomen eigenschap verwijderen door gebruik te maken van de delete operator. De volgende code toont aan hoe u een eigenschap verwijdert.</p> + +<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b. +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// Removes the a property, leaving myobj with only the b property. +delete myobj.a; +console.log ('a' in myobj); // yields "false" +</pre> + +<p>U kunt ook <code>delete</code> gebruiken om een globale variabele te verwijderen als het <code>var sleutelwoord</code> niet gebruikt werd om de variabele te verklaren:</p> + +<pre class="brush: js">g = 17; +delete g; +</pre> + +<h2 id="Objecten_vergelijken">Objecten vergelijken</h2> + +<p>In JavaScript zijn objecten een referentietype. Twee afzonderlijke objecten zijn nooit gelijk, ook al hebben ze dezelfde eigenschappen. Alleen het vergelijken van datzelfde object-referentie met zichzelf geeft waar.</p> + +<pre class="brush: js">// Twee variabelen, twee verschillende object met de dezelfde eigenschappen +var fruit = {name: 'apple'}; +var fruitbear = {name: 'apple'}; + +fruit == fruitbear; // geeft false +fruit === fruitbear; // geeft false</pre> + +<pre class="brush: js">// Twee variabelen, één object +var fruit = {name: 'apple'}; +var fruitbear = fruit; // wijs referentie van fruit object referentie toe aan fruitbear + +// hier verwijzen fruit en fruitbear naar hetzelfde object +fruit == fruitbear; // return true +fruit === fruitbear; // return true +</pre> + +<pre class="brush: js">fruit.name = 'grape'; +console.log(fruitbear); // geeft { name: "grape" } terug ipv { name: "apple" } +</pre> + +<p>Voor meer informatie over vergelijkingsoperators, bekijk <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>Dieper duiken in de materie, lees over de <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li> + <li>Meer leren over ECMAScript 2015 classes (Een nieuwe manier om objecten te maken), lees het <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> hoofdstuk.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/nl/web/javascript/index.html b/files/nl/web/javascript/index.html new file mode 100644 index 0000000000..f6ff26c9b6 --- /dev/null +++ b/files/nl/web/javascript/index.html @@ -0,0 +1,102 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Landing + - Leer + - landingspagina +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) is een lichtgewicht, geïnterpreteerde programmeertaal met <a href="https://en.wikipedia.org/wiki/First-class_functions">eersteklas functies</a>. Hoewel het het beste bekend staat als de scripttaal voor webpagina's, wordt het ook door <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">vele niet-browser omgevingen</a> gebruikt, zoals <a class="external" href="https://nodejs.org/">node.js</a> en <a href="https://couchdb.apache.org/">Apache CouchDB</a>. JS is een <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based programming">prototype-gebaseerd</a>, multi-paradigma, dynamische scripttaal, welke object-georiënteerde, imperatieve-, en functionele programmeerstijlen ondersteunt. Lees meer <a href="/en-US/docs/Web/JavaScript/About_JavaScript">over JavaScript</a>.</p> + +<p>Deze sectie van de site is toegewijd aan de JavaScript taal zelf, en niet de delen die specifiek zijn voor webpagina's of andere omgevingen. Voor informatie over {{Glossary("API","APIs")}} die specifiek zijn voor webpagina's, bekijk alsjeblieft <a href="/nl/docs/Web/Reference/API">Web APIs</a> en <a href="/nl/docs/DOM">DOM</a>.</p> + +<p>De standaard voor JavaScript is <a href="/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Met de ingang van 2012 ondersteunen alle moderne browsers volledig ECMAScript 5.1. Op 17 juni 2015, publiceerde <a href="http://www.ecma-international.org">ECMA International</a> de zesde hoofdversie (<em>major version</em>) van ECMAScript, dit heet officieel ECMAScript 2015, en wordt in het algemeen vaker aangeduid als ECMAScript 2015 of ES2015. Sindsdien worden de ECMAScript standaarden op jaarlijkse basis vrijgegeven. Deze documentatie verwijst naar de laatste ontwerpversie (<em>draft version</em>), dat momenteel ECMAScript 2018 is.</p> + +<p>Verwar JavaScript niet met de <a href="https://nl.wikipedia.org/wiki/Java_(programmeertaal)">Java programmertaal</a>. Beiden "Java" and "JavaScript" zijn handelsmerken of geregistreerde handelsmerken van Oracle in de VS en andere landen. Daarentegen hebben de twee programmeertalen hele verschillende syntaxis, semantiek en toepassingen.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Leer hoe je kan programmeren in JavaScript met behulp van gidsen en tutorials.</p> + +<h3 id="Inleidende_artikelen">Inleidende artikelen</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript Gids</a></dt> + <dd>Als JavaScript nieuw voor je is, zal deze gids je begeleiden door de "script"taal.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Overzicht van JavaScript technologieën</a></dt> + <dd>Introductie over het landschap van JavaScript in een webbrowser.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introductie van het Objectgeoriënteerde JavaScript</a></dt> + <dd>Een introductie tot de concepten van het objectgeoriënteerd programmeren in JavaScript.</dd> +</dl> + +<h3 id="Gemiddeld">Gemiddeld</h3> + +<dl> + <dt><a href="/nl/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Een herintroductie van Javascript</a></dt> + <dd>Een overzicht voor diegenen die "denken" dat ze Javascript kennen</dd> + <dt> <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">JavaScript data structuren</a></strong></dt> + <dd>Een overzicht van Javascript structuren.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Vergelijkingen en gelijkheid tussen gelijkenissen</a>.</dt> + <dd>JavaScript voorziet 3 verschillende waarde-vergelijkings-operaties: strenge gelijkheid met <code>===</code>, losse gelijkheid door <code>==</code>, en de {{jsxref("Global_Objects/Object/is", "Object.is()")}} methode.</dd> +</dl> + +<h3 id="Geavanceerd">Geavanceerd</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Overerving </a><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">en de prototype-ketting </a></dt> + <dd>Uitleg over het vaak onbegrepen en onderschatte prototype-gebaseerde oververing.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strenge modus</a></dt> + <dd>Een strengere variant van JavaScript, voor snellere prestaties en eenvoudiger debuggen.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript getypte arrays</a></dt> + <dd>JavaScript getypte arrays bieden een mechanisme voor toegang tot ruwe binaire gegevens.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Geheugen Management</a></dt> + <dd>Levenscyclus van geheugen en garbage collection in JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Concurrency-model en Event Loop</a></dt> + <dd>JavaScript heeft een gelijktijdigheidsmodel dat is gebaseerd op een "gebeurtenislus".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referenties">Referenties</h2> + +<p>Surf door de complete <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript referentie</a> documentatie.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standaard objecten</a></dt> + <dd>Leer de ingebouwde objecten kennen: {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, en meer.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressies en operatoren</a></dt> + <dd>Leer meer over het gedrag van JavaScript z'n operatoren: {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">voorrang van operatoren</a>, en meer.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements en declaraties</a></dt> + <dd>Leer hoe {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, en meer JavaScript statements en keywords werken.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functies</a></dt> + <dd>Leer om te werken met JavaScript z'n functies om je eigen applicaties te ontwikkelen.</dd> +</dl> + +<h2 id="Tools_Bronnen">Tools & Bronnen</h2> + +<p>Handige tools voor het schrijven en debuggen van jouw JavaScript-code.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, en meer.</dd> + <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Verander, debug, en monitor CSS, HTML, en JavaScript live op elke webpagina.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>Met een JavaScript-shell kun je snel fragmenten van JavaScript-code testen.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>Samenwerken gemakkelijk gemaakt.</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow vragen getagd met "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versies en release notes</a></dt> + <dd>Blader door de functiegeschiedenis en implementatiestatus van JavaScript.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Bewerk JavaScript, CSS, HTML en krijg live resultaten. Gebruik externe bronnen en werk online samen met uw team.</dd> +</dl> +</div> +</div> diff --git a/files/nl/web/javascript/reference/errors/index.html b/files/nl/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/nl/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/nl/web/javascript/reference/errors/not_defined/index.html b/files/nl/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..9fb12d7937 --- /dev/null +++ b/files/nl/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,70 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +tags: + - Foutmelding + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Foutmelding">Foutmelding</h2> + +<pre class="syntaxbox">ReferenceError: "x" is not defined +</pre> + +<h2 id="Type_fout">Type fout</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="Wat_is_er_fout_gegaan">Wat is er fout gegaan?</h2> + +<p>Er is ergens een niet bestaande variabele genoemd. Deze variabele moet je declareren, of je moet er voor zorgen dat deze beschikbaar is in het script of {{Glossary("scope")}}.</p> + +<div class="note"> +<p><strong>Notitie:</strong> Wanneer je een library (zoals jQuery) laadt, zorg er dan voor dat die geladen is voordat je de library's variabelen wilt gebruiken, zoals "$". Zet de {{HTMLElement("script")}} tag die de library laadt, voor de code die de variabele gebruikt.</p> +</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Variabele_niet_gedefineerd">Variabele niet gedefineerd</h3> + +<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined +</pre> + +<p>De "foo" variable is nergens gedefineerd. De variabele moet een string zijn, zodat de {{jsxref("String.prototype.substring()")}} method kan werken.</p> + +<pre class="brush: js example-good">var foo = "bar"; +foo.substring(1); // "ar"</pre> + +<h3 id="Verkeerde_scope">Verkeerde scope</h3> + +<p>Een variabele moet beschikbaar zijn in de huidige context of execution. Variabelen gedefineerd binnen een <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functie</a> kunnen niet van ergens anders buiten de functie worden benarderd, omdat de variabele alleenmaar in de scope van de functie gedefineerd is</p> + +<pre class="brush: js example-bad">function numbers () { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError num1 is not defined.</pre> + +<p>Maar, een functie kan alle andere variabelen benaderen in de scope waarin hij gedefineerd is. Oftewel, een functie die in de global scope is gedefineerd, kan alle variabelen benaderen in de global scope.</p> + +<pre class="brush: js example-good">var num1 = 2, + num2 = 3; + +function numbers () { + return num1 + num2; +} + +console.log(num1); // 2</pre> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{Glossary("Scope")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Declareren van variabelen in de JavaScript Guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Function scope in de JavaScript Guide</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/errors/unexpected_token/index.html b/files/nl/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..264e8f5858 --- /dev/null +++ b/files/nl/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,48 @@ +--- +title: 'SyntaxError: Onverwacht teken' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Boodschap">Boodschap</h2> + +<pre class="syntaxbox">SyntaxError: expected expression, got "x" +SyntaxError: expected property name, got "x" +SyntaxError: expected target, got "x" +SyntaxError: expected rest argument name, got "x" +SyntaxError: expected closing parenthesis, got "x" +SyntaxError: expected '=>' after argument list, got "x" +</pre> + +<h2 id="type_Error">type Error</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Wat_ging_er_mis">Wat ging er mis?</h2> + +<p>A specifieke taalconstructie werd verwacht, maar er werd iets anders geboden. Dit kan een simpele typfout zijn.</p> + +<p>Er wordt een specifieke opbouw van de expressie verwacht, maar een andere werd "aangeboden". Het kan zijn dat een simpele typefout hiervan de oorzaak is.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Expression_verwacht">Expression verwacht</h3> + +<p>Bijvoorbeeld, bij het uitvoeren van een functie zijn geen comma's toegelaten op het einde van de regel. JavaScript verwacht dan nog een argument dat in feite eender welke expression kan zijn.</p> + +<pre class="brush: js example-bad">Math.max(2, 42,); +// SyntaxError: expected expression, got ')' +</pre> + +<p>De juiste methode is om de comma te verwijderen of een bijkomend argument toe te voegen:</p> + +<pre class="brush: js example-good">Math.max(2, 42); +Math.max(2, 42, 13+37); +</pre> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/functions/index.html b/files/nl/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..377a256fec --- /dev/null +++ b/files/nl/web/javascript/reference/functions/index.html @@ -0,0 +1,612 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Function + - Functions + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>Functions are not the same as procedures. A function always returns a value, whereas a procedure might not.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is <code>undefined</code>.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Pass object reference to the function */ + myFunc(mycar); + + /* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ + console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details):</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator functions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<div class="note"> +<p><strong>Note:</strong> Generator functions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<div class="note"> +<p><strong>Note:</strong> Default and rest parameters are <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<div class="note"> +<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p> +</div> + +<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x == 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y == 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Conditionally_defining_a_function">Conditionally defining a function</h2> + +<p>Functions can be conditionally defined using either //function statements// (an allowed extension to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> standard) or the <code>Function</code> constructor. Please note that such <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">function statements are no longer allowed in ES5 strict</a>. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.</p> + +<p>In the following script, the <code>zero</code> function is never defined and cannot be invoked, because '<code>if (0)</code>' evaluates its condition to false:</p> + +<pre class="brush: js">if (0) { + function zero() { + document.writeln("This is zero."); + } +} +</pre> + +<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p> + +<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p> + +<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p> + +<pre class="brush: js">if (0) { + var zero = function() { + document.writeln("This is zero."); + } +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/functions/rest_parameters/index.html b/files/nl/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..e4c2acae46 --- /dev/null +++ b/files/nl/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,183 @@ +--- +title: Rest parameters +slug: Web/JavaScript/Reference/Functions/rest_parameters +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>De <strong>rest parameter</strong> syntax laat ons toe om een onbepaald aantal argumenten te vertegenwoordigen als een array.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">function(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Als het laatst genoemd argument van een functie wordt voorafgegaan door ..., dan wordt dit een array waarvan de elementen van 0 tot theArgs.length worden doorgegeven als eigenlijke argumenten aan de functie.</p> + +<p>In het bovestaande voorbeeld, verzameld theArgs als derde argument van de functie. Alle opeenvolgende argumenten die na a en b zijn toegevoegd in de argumenten lijst.</p> + +<h3 id="Verschillen_tussen_de_rest_parameter_en_het_arguments_object">Verschillen tussen de rest parameter en het arguments object</h3> + +<p>Er zijn drie belangrijke verschillen tussen de rest parameters en het <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> object:</p> + +<ul> + <li>rest parameters zijn alleen de argumenten die niet via een andre naam aan de functie zijn doorgegeven, terwijl het arguments object wel alle argumenten bevat die zijn doorgegeven.</li> + <li>het <code>arguments</code> object is niet echt een array, terwijl de rest parameters wel een instantie van een <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> zijn, waardoor je methodes zoals <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> en <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a></code> rechtstreeks kan gebruiken.</li> + <li>de argumenten object heeft extra functionaliteit specifiek voor zichzelf (zoals de <code>callee</code> property).</li> +</ul> + +<h3 id="Van_arguments_tot_een_array">Van arguments tot een array</h3> + +<p>Rest parameters zijn ingevoerd om de standaardcode die werd veroorzaakt door het arguments object te verminderen.</p> + +<pre class="brush: js">// Voor rest parameters, kwam je het volgende wel eens tegen: +function f(a, b){ + var args = Array.prototype.slice.call(arguments, f.length); + + // … +} + +// Wat net hetzelfde is als: + +function f(a, b, ...args) { + +} +</pre> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>Aangezien theArgs een array is, kunt u de telling van de elementen verkrijgen met het behulp van de eigenschap <strong>.length</strong>:</p> + +<pre class="brush: js">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<p>In het volgende voorbeeld, gebruiken we de <strong>rest parameter</strong> voor het verzamelen vanaf het tweede argument tot het einde. We vermenigvuldigen deze vervolgens met de eerste:</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(function (element) { + return multiplier * element; + }); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>Het volgende voorbeeld toont aan dat je Array methodes kan gebruiken op <strong>rest parameters</strong> maar niet op het <strong>arguments</strong> object:</p> + +<pre class="brush: js">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5,3,7,1)); // toont 1,3,5,7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // dit zal nooit gebeuren +} + +// gooit een TypeError: arguments.sort is not a function +console.log(sortArguments(5,3,7,1)); +</pre> + +<p>Om Array methodes op het <strong>arguments</strong> object te gebruiken, moet je het eerst converteren naar een echte array.</p> + +<h2 id="Specificatie">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>34</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/concat/index.html b/files/nl/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..b224c3fe3d --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Methode(2) + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p><code>De <strong>concat()</strong></code> methode geeft een nieuwe array terug bestaande uit de array waarop het is aangeroepen samengevoegd met de array(s) en/of waarden die zijn geleverd als argumenten.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>var <var>nieuwe_array</var> = <var>oude_array</var>.concat(waarde1[, waarde2[, ...[, waardeN]]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>waardeN</code></dt> + <dd>Arrays en/of waarden om te concateneren in een nieuwe array. Zie de beschrijving voor details.</dd> +</dl> + +<h3 id="Returnwaarde">Returnwaarde</h3> + +<p>Een nieuwe instantie van type {{jsxref("Array")}}.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code>concat</code> maakt een nieuwe array bestaande uit de elementen in het object waarop het is aangeroepen, gevolgd door voor ieder argument de elementen van dat argument (als het argument een array is) of het argument zelf (als het argument geen array is).</p> + +<p><code>concat</code> verandert <code>this</code> niet en ook niet de als argument gegeven arrays, maar levert in plaats daarvan een <em>shallow copy</em> welke kopieën bevat van dezelfde elementen gecombineerd van de orginele arrays. Elementen van de orginele arrays worden als volgt gekopiëerd in de nieuwe array:</p> + +<ul> + <li>Objectreferenties (en niet het daardwerkelijke object): <code>concat</code> kopieert objectreferenties in de nieuwe array. Zowel de orginele array als de nieuwe array verwijzen naar dezelfde objecten. Dit betekent, als een verwezen object gewijzigd wordt, de wijzigingen zichtbaar zijn in zowel de nieuwe als de orginele array.</li> + <li>Strings en getallen (niet {{jsxref("Global_Objects/String", "String")}} en {{jsxref("Global_Objects/Number", "Number")}} objects): <code>concat</code> kopieert de waarden van strings en getallen in de nieuwe array.</li> +</ul> + +<div class="note"> +<p><strong>Opmerking:</strong> Concateneren van array(s)/waarde(n) laat de orginelen onaangetast. Bovendien zal iedere operatie op de nieuwe array geen effect hebben op de orginele array en vice versa.</p> +</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Concateneren_van_twee_arrays">Concateneren van twee arrays</h3> + +<p>De volgende code concateneert twee arrays</p> + +<pre class="brush: js">var alfa = ['a', 'b', 'c'], + nummer = [1, 2, 3]; + +var alfaNummeriek = alfa.concat( nummer ); + +console.log(alfaNummeriek); // Resultaat: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Concateneren_van_drie_arrays">Concateneren van drie arrays</h3> + +<p>De volgende code concateneert drie arrays</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var nums = num1.concat(num2, num3); + +console.log(nums); // Resultaat: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Concateneren_van_waarden_naar_een_array">Concateneren van waarden naar een array</h3> + +<p>De volgende code concateneert drie waarden naar een array:</p> + +<pre class="brush: js">var alfa = ['a', 'b', 'c']; + +var alfaNumeriek = alfa.concat(1, [2, 3]); + +console.log( alfaNumeriek); +// Resultaat: ['a', 'b', 'c', 1, 2, 3] +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Eerste definitie. Geïmplementeerd in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basis support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basis support</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — toevoegen/verwijderen van elementen aan het einde van de array</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — toevoegen/verwijderen van elementen aan het begin van de array</li> + <li>{{jsxref("Array.splice", "splice")}} — toevoegen/verwijderen van elementen op een gespecificeerde locatie van de array</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – control flattening.</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/entries/index.html b/files/nl/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..add0b7439a --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,132 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>entries()</strong></code> funtie geeft een nieuw <code><strong>Array Iterator</strong></code> object dat de key/value paren bevat voor elk onderdeel van de array.</p> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +console.log(iterator.next().value); // [0, 'a'] +console.log(iterator.next().value); // [1, 'b'] +console.log(iterator.next().value); // [2, 'c'] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>a</var>.entries()</pre> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>Een nieuw {{jsxref("Array")}} iterator object.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="De_for…of_loop">De <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> loop</h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</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">Opmerkingen</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Standaard definitie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</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>{{CompatChrome("38")}}</td> + <td>{{CompatGeckoDesktop("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Android</th> + <th>Chrome voor Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/every/index.html b/files/nl/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..36834fec57 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,191 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>every()</strong></code> methode controleert of alle elementen in de array slagen voor de test die opgelegd wordt in de opgegeven functie.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + +<p class="hidden">De broncode van dit interactieve voorbeeld wordt bewaard in een GitHub repository. Als je wilt bijdragen aan het interactieve voorbeelden project, clone dan <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull request pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Functie die elk element checkt, gebruikt 3 argumenten: + <dl> + <dt><code>currentValue</code> (verplicht)</dt> + <dd>Het huidige element wat wordt verwerkt in het array.</dd> + <dt><code>index</code> (optioneel)</dt> + <dd>De index van het huidige element wat wordt verwerkt in het array.</dd> + <dt><code>array</code> (optioneel)</dt> + <dd>Het array waarop de methode <code>every</code> werd aangeroepen.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Optioneel. Deze waarde wordt gebruikt als <code>this</code> wanneer <code>callback</code> wordt uitgevoerd.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code><strong>true</strong></code> als de callback functie een {{Glossary("truthy")}} waarde terug geeft voor elk element uit het array; anders, <code><strong>false</strong></code>.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>every</code> methode voert voor elk element in het array de <code>callback</code> functie uit tot een element een {{Glossary("falsy")}} waarde teruggeeft. Wanneer een element met deze waarde gevonden wordt, geeft de <code>every</code> methode gelijk <code>false</code> terug. Als <code>callback</code> een {{Glossary("truthy")}} terug geeft voor alle elementen in het array zal <code>every</code> <code>true</code> terug geven. <code>callback</code> wordt alleen aangeroepen voor elementen in het array met een waarde; het wordt niet aangeroepen voor elementen die zijn gedeleted of nooit een waarde hebben gekregen.</p> + +<p><code>callback</code> wordt aangeroepen met 3 argumenten: de waarde van het element, de index van het element, en het Array object dat wordt doorlopen.</p> + +<p>Wanneer een <code>thisArg</code> parameter wordt meegegeven aan <code>every</code> zal dit gebruikt worden als de <code>this</code> waarde van de <code>callback</code>. Indien dit niet wordt meegeven wordt <code>undefined</code> gebruikt als <code>this</code> waarde. De voor de callback uiteindelijk gebruikte this waarde wordt bepaald volgens <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">de normale regels om this te bepalen voor een functie</a>.</p> + +<p><code>every</code> verandert het array waarop het wordt aangeroepen niet.</p> + +<p>De set van elementen die verwerkt zal worden door <code>every</code> wordt bepaald voor de eerste aanroep van <code>callback</code>. Elementen die na het aanroepen van <code>every</code> worden toegevoegd aan het array zullen niet door <code>callback</code> worden bezocht. Als bestaande elementen in het array worden gewijzigd zal de waarde die naar de <code>callback</code> gestuurd wordt de waarde zijn zoals deze was toen <code>every</code> aangeroepen werd; verwijderde elementen worden niet bezocht door <code>callback</code>.</p> + +<p><code>every</code> werkt als een "voor alle" kwantor in de wiskunde en de logica. In het bijzonder voor een lege array, hier wordt <code>true</code> terug gegeven. (Het is "<a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">vacuously true</a>" dat alle element van een <a href="https://nl.wikipedia.org/wiki/Lege_verzameling">lege set</a> voldoen aan welke gegeven conditie dan ook.)</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Test_grootte_van_alle_array_elementen">Test grootte van alle array elementen</h3> + +<p>Het volgende voorbeeld checkt of alle elementen in het array groter zijn dan 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Met_arrow_functies">Met arrow functies</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> geven een kortere syntax voor dezelfde check.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> is vanaf de 5e editie toegevoegd aan de ECMA-262 standaard; hierdoor is het mogelijk niet aanwezig in andere implementies van de standaard. Je kunt hier omheen werken door de volgende code toe te voegen aan je script. Hiermee geef je <code>every</code> de mogelijkheid om gebruikt te worden in implementaties die dat in beginsel niet ondersteunen. Dit algoritme is gelijk aan het algoritme in ECMS-262, 5e editie. Hierbij moet er van uit gegaan worden dat <code>Object</code> en <code>TypeError</code> hun originele waarde hebben en dat <code>callbackfn.call</code> de originele waarde van {{jsxref("Function.prototype.call")}} checkt.</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiele definitie. Geimplementeerd in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">De compatibility tabel op deze pagina is gegenereerd van gestructureerde data. Als je wilt bijdragen aan deze data, If you'd like to contribute to the data, clone dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/fill/index.html b/files/nl/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..205f12011a --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,142 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +tags: + - Functies +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">De <code><strong>fill()</strong></code> functie verandert alle elementen in een array naar statische waarde. Vanaf de eerste index (standaard <code>0</code>) tot de laatste index (standaard <code>array.length</code>). De functie geeft de aangepaste array terug.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div> + +<p class="hidden">De bron van dit interactieve voorbeeld is opgeslagen in een GitHub repository. Als u wilt bijdragen aan het interactieve voorbeelden project, clone dan graag <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull verzoek.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Waarde om de array mee te vullen. (Let op, alle elementen in de array krijgen exact deze waarde.)</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Start index, standaard <code>0</code>.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Laatste index, standaard <code>arr.length</code>.</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>De aangepaste array, gevuld met <code>value</code>.</p> + +<h2 id="Description">Description</h2> + +<ul> + <li>Als <code>start</code> negatief is, dan wordt het uitgevoerd als <code>array.length + start</code>.</li> + <li>Als <code>end</code> negatief is, dan wordt het uitgevoerd als <code>array.length + end</code>.</li> + <li><code>fill</code> is bedoeld als generiek: de <code>this</code> waarde hoeft geen <code>Array</code> object te zijn.</li> + <li><code>fill</code> is een muterende functie: het verandert de array zelf een geeft deze array terug, niet een kopie ervan.</li> + <li>Als de eerste parameter een object is, dan zal iedere positie in de array hieraan refereren.</li> +</ul> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Step 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Step 11. + var finalValue = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 12. + while (k < finalValue) { + O[k] = value; + k++; + } + + // Step 13. + return O; + } + }); +} +</pre> + +<p>Als verouderde JavaScript engines ondersteund moeten worden, welke <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> </code> niet ondersteunen, dan is het beter om helemaal geen polyfill <code>Array.prototype</code> functies te gebruiken, aangezien ze dan niet non-enumerable te maken zijn.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Fill_toepassen">Fill toepassen</h3> + +<pre class="brush: js notranslate">[1, 2, 3].fill(4) // [4, 4, 4] +[1, 2, 3].fill(4, 1) // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2) // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1) // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3) // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2) // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5) // [1, 2, 3] +Array(3).fill(4) // [4, 4, 4] +[].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3} + +// Een enkel object, waaraan door iedere positie in de array gerefereerd wordt: +let arr = Array(3).fill({}) // [{}, {}, {}] +arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div> +<div class="hidden">De compatibiliteits-tabel op deze pagina is gegenereerd fuit gestructureerde data. Als u wilt bijdragen aan de data, kijk dan op <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull verzoek.</div> + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/filter/index.html b/files/nl/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..433300acaa --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,217 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>filter()</strong></code> method maakt een nieuwe array aan met enkel die elementen die de test doorstaan van een functie naar keuze.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>var new_array = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Functie, onderwerpt ieder element aan een test. Wordt aangeroepen met argumenten <code>(element, index, array)</code>. Levert als resultaat de waarde <code>true</code> om het element te behouden, of anders <code>false</code>.</dd> + <dt><code>thisArg</code></dt> + <dd>Optioneel. Te gebruiken als de <code>this</code> waarde, wanneer een <code>callback</code> wordt uitgevoerd.</dd> +</dl> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code>filter()</code> roept een geleverde <code>callback</code> functie één keer aan voor ieder element van een array en maakt een nieuwe array aan met alle waarden waarvoor de <code>callback</code> <a href="/en-US/docs/Glossary/Truthy">een waarde welke kan worden omgezet naar <code>true (truthy values)</code></a> retourneert. <code>callback</code> wordt alleen aangeroepen voor indices van de array, welke een waarde bezitten; deze wordt niet gebruikt voor indices welke zijn verwijderd, of welke nooit een waarde hebben verkregen. Array elements die niet de <code>callback</code> test doorstaan, worden simpelweg overgeslagen en worden niet in de nieuwe array opgenomen.</p> + +<p><code>callback</code> wordt aangeroepen met drie argumenten:</p> + +<ol> + <li>de waarde (value) van het element</li> + <li>de index van het element</li> + <li>het Array object dat wordt veranderd</li> +</ol> + +<p>Wanneer een <code>thisArg</code> parameter wordt toegevoegd aan <code>filter</code>, zal deze worden doorgegeven aan <code>callback</code> wanneer deze wordt aangeroepen, om gebruikt te worden als <code>this</code> waarde. In het andere geval zal de waarde <code>undefined</code> worden gebruikt als <code>this</code> waarde. De <code>this</code> waarde, uiteindelijk zichtbaar in <code>callback</code> wordt bepaald door <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">de gebruikelijke regels om de <code>this</code> waarde te bepalen voor een functie</a>.</p> + +<p><code>filter()</code> verandert de array zelf niet, van waaruit deze als method wordt aangeroepen.</p> + +<p>De reeks (range) van elementen welke door <code>filter()</code> onderhanden wordt genomen, wordt al voor de eerste aanroep van <code>callback</code> bepaald. Elementen, die aan de originele array worden toegevoegd nadat de <code>filter()</code> method was aangeroepen, zullen niet worden onderworpen aan <code>callback</code>. Indien bestaande elementen worden gewijzigd, of verwijderd, dan zal hun waarde, zoals overgedragen aan <code>callback</code>, de waarde zijn als die is, op het moment dat <code>filter()</code> ze bezoekt; elementen die worden verwijderd worden ook niet in behandeling genomen.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Filter_lage_waarden">Filter lage waarden</h3> + +<p>Het volgende voorbeeld gebruikt <code>filter()</code> om een gefilterde array aan te maken, waarbij alle waarden onder de 10 zijn verwijderd.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Filter_foutieve_items_van_JSON">Filter foutieve items van JSON</h3> + +<p>Het volgende voorbeeld gebruikten <code>filter()</code> voor een gefilterde json van alle elementen met een numerieke <code>id</code>.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function filterByID(obj) { + if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) { + return true; + } else { + invalidEntries++; + return false; + } +} + +var arrByID = arr.filter(filterByID); + +console.log('Gefilterde Array\n', arrByID); +// Gefilterde Array +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 4 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> werd toegevoegd aan de ECMA-262 standaard in de 5de editie; als deze kan het zijn dat deze niet in alle toepassingen van de standaard voorkomt. Als alternatief kun je de volgende code aan het begin van je scripts zetten, waardoor het gebruik van <code>filter()</code> word toegestaan binnen ECMA-262 implementaties, die dit nog niet van nature ondersteunen. Het algoritme is precies die, zoals gespecificeerd in ECMA-262, 5de editie, aangenomen dat <code>fn.call</code> resulteert in de beginwaarde van {{jsxref("Function.prototype.call()")}}, en dat {{jsxref("Array.prototype.push()")}} nog zijn originele waarde heeft.</p> + +<pre class="brush: js">if (!Array.prototype.filter) { + Array.prototype.filter = function(fun/*, thisArg*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var res = []; + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t) { + var val = t[i]; + + // NOTE: Technically this should Object.defineProperty at + // the next index, as push can be affected by + // properties on Object.prototype and Array.prototype. + // But that method's new, and collisions should be + // rare, so use the more-compatible alternative. + if (fun.call(thisArg, val, i, t)) { + res.push(val); + } + } + } + + return res; + }; +} +</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('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiele definitie. Geimplementeerd in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/find/index.html b/files/nl/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..2d9443ef47 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,224 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>find()</strong></code>-methode geeft de <strong>waarde</strong> van het <strong>eerste array element </strong>dat aan de testfunctie voldoet terug. Als geen van de elementen uit het array aan de testfunctie voldoen, dan wordt {{jsxref("undefined")}} teruggegeven.</p> + +<p>Zie ook de {{jsxref("Array.findIndex", "findIndex()")}}-methode, die de <strong>index</strong> van het gevonden element in de array teruggeeft in plaats van de waarde zelf.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Functie om voor alle waarden in de array uit te voeren, die drie argumenten accepteert: + <dl> + <dt><code>element</code></dt> + <dd>Het huidige element uit de array dat wordt verwerkt.</dd> + <dt><code>index</code></dt> + <dd>De index van het huidige element uit de array dat wordt verwerkt.</dd> + <dt><code>array</code></dt> + <dd>De array waarop <code>find</code> werd aangeroepen.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Optioneel. Object om voor <code>this</code> te gebruiken tijdens het uitvoeren van <code>callback</code>.</dd> +</dl> + +<h3 id="Retourwaarde">Retourwaarde</h3> + +<p>Een waarde in de array als een element aan de testfunctie voldoet, anders {{jsxref("undefined")}}.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>find</code>-methode voert de <code>callback</code>-functie eenmaal per aanwezig element in de array uit, totdat er één wordt gevonden waarvoor <code>callback</code> een waarde true teruggeeft. Als een dergelijk element wordt gevonden, geeft <code>find</code> direct de waarde van dat element terug. In andere gevallen geeft <code>find</code> {{jsxref("undefined")}} terug nadat alle elementen uit de array zijn doorlopen. <code>callback</code> wordt alleen aangeroepen voor indexen van de array waaraan een waarde is toegekend; de functie wordt niet aangeroepen voor indexen die zijn verwijderd of waaraan nooit een waarde is toegekend.</p> + +<p><code>callback</code> wordt aangeroepen met drie argumenten: de waarde van het element, de index van het element en het Array-object waarover wordt geïtereerd.</p> + +<p>Als een <code>thisArg</code>-parameter aan <code>find</code> wordt meegegeven, wordt deze voor elke aanroep van <code>callback</code> gebruikt als de waarde voor <code>this</code>. Als er geen waarde voor is opgegeven, wordt {{jsxref("undefined")}} gebruikt.</p> + +<p><code>find</code> wijzigt de array waarop de methode wordt aangeroepen niet.</p> + +<p>Het bereik van de elementen die door <code>find</code> worden verwerkt, wordt ingesteld voor de eerste aanroep van <code>callback</code>. Elementen die aan de array worden toegevoegd nadat de aanroep naar <code>find</code> begint, worden niet door <code>callback</code> bezocht. Als een bestaand, maar nog niet bezocht element van de array door <code>callback</code> wordt gewijzigd, zal de waarde van dit element die aan <code>callback</code> wordt meegegeven de waarde worden die eraan was toegekend op het moment dat <code>find</code> de index van dat element bereikte; verwijderde elementen worden niet bezocht.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Een_object_in_een_array_zoeken_via_een_van_zijn_eigenschappen">Een object in een array zoeken via een van zijn eigenschappen</h3> + +<pre class="brush: js">var voorraad = [ + {naam: 'appels', aantal: 2}, + {naam: 'bananen', aantal: 0}, + {naam: 'kersen', aantal: 5} +]; + +function zoekKersen(fruit) { + return fruit.naam === 'kersen'; +} + +console.log(voorraad.find(zoekKersen)); // { naam: 'kersen', aantal: 5 }</pre> + +<h3 id="Een_priemgetal_in_een_array_zoeken">Een priemgetal in een array zoeken</h3> + +<p>Het volgende voorbeeld zoekt een element in de array dat een priemgetal is (of geeft {{jsxref("undefined")}} terug als er geen priemgetal is).</p> + +<pre class="brush: js">function isPriem(element) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPriem)); // niet gedefinieerd, niet gevonden +console.log([4, 5, 8, 12].find(isPriem)); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Deze methode is aan de ECMAScript 2015-specificatie toegevoegd en is mogelijk nog niet in alle JavaScript-implementaties beschikbaar. Met de volgende snippet kan <code>Array.prototype.find</code> echter worden ‘gepolyfilled’:</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + } + }); +}</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Eerste definitie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Android</th> + <th>Chrome voor Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/findindex/index.html b/files/nl/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..906d5465e2 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,177 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +tags: + - Méthode +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>De methode <code><strong>findIndex()</strong></code> geeft de <strong>index</strong> terug van het <strong>eerste element</strong> in de array waarvoor de gegeven functie voldoet. Indien er geen element wordt gevonden, zal -1 teruggegeven worden.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + +<p class="hidden">De broncode van dit interactieve voorbeeld is terug te vinden in een GitHub repository. Als je wil bijdragen aan het interactieve voorbeelden project, clone dan <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull request.</p> + +<div> </div> + +<p>Zie ook de methode {{jsxref("Array.find", "find()")}}, die een <strong>waarde</strong> teruggeeft van het gevonden element in plaats van de index.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>De functie die wordt uitgevoerd voor elk element in de array, met volgende drie argumenten: + <dl> + <dt><code>element</code></dt> + <dd>Het huidig te evalueren element uit de array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>De index van het huidig te evalueren element binnen de array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>De array waarop de methode <code>findIndex</code> was aangeroepen.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Optioneel. Het object dat als <code>this</code> kan gebruikt worden tijdens de uitvoer van <code>callback</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>De index binnen de array van het gevonden element; anders, <strong>-1</strong>.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De methode <code>findIndex</code> voert de <code>callback</code> function uit voor elke index uit de array <code>0..length-1</code> (inclusief) tot wanneer er een element is waarvoor <code>callback</code> een waarde teruggeeft overeenkomstig met <code>true</code>. Als zo een element wordt gevonden, dan geeft <code>findIndex</code> onmiddellijk de index terug van deze iteratie. Als de functie voor geen enkel element voldoet of als <code>length</code> van de array 0 is, zal <code>findIndex</code> -1 teruggeven. In tegenstelling tot andere array methodes zoals Array#some, wordt <code>callback</code> ook aangeroepen ook voor indexen zonder element in de array.</p> + +<p><code>callback</code> heeft drie argumenten: de waarde van het element, de index van het element, en het Array element dat wordt doorlopen.</p> + +<p>Als een <code>thisArg</code> parameter wordt opgegeven voor <code>findIndex</code> zal het gebruikt worden als <code>this</code> bij elke aanroep van <code>callback</code>. Als het niet wordt opgegeven dan wordt {{jsxref("undefined")}} gebruikt.</p> + +<p><code>findIndex</code> past de array waarop het wordt aangeroepen niet aan.</p> + +<p>De reeks van elementen verwerkt door <code>findIndex</code> wordt opgemaakt voor de eerste aanroep van <code>callback</code>. Elementen die aan de array worden toegevoegd na de aanroep van <code>findIndex</code> zullen niet worden doorlopen door <code>callback</code>. Als een bestaand element, dat nog niet werd doorlopen, aangepast wordt door <code>callback</code>, dan zal deze waarde doorgegeven aan <code>callback</code>; verwijderde elementen worden ook doorlopen.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Vind_de_index_van_een_priemgetal_in_een_array">Vind de index van een priemgetal in een array</h3> + +<p>Het volgende voorbeeld toont hoe een priemgetal kan gevonden worden in een array met getallen (of -1 als er geen priemgetal in de array zit).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h3 id="Vind_index_met_een_arrow_function">Vind index met een arrow function</h3> + +<p>Het volgende voorbeeld toont hoe een element uit de array fruits kan gevonden worden met de arrow function syntax.</p> + +<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Als je echt verouderde JavaScript engines moet blijven ondersteunen die <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> niet supporteren, is het beter van <code>Array.prototype</code> methodes helemaal niet te voorzien als polyfill, omdat je ze toch niet niet-enumereerbaar kan maken.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">De compatibility tabel van deze pagina werd gegenereerd uit gestructureerde data. Als je wil bijdragen verwijzen we naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/includes/index.html b/files/nl/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..104c9a7705 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,220 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>De methode <code><strong>includes()</strong></code> controleert of de opgegeven waarde aanwezig is in een reeks of niet. Als dit waar is geeft het <code>true</code>, anders <code>false</code>.</p> + +<pre class="brush: js">var a = [1, 2, 3]; +a.includes(2); // true +a.includes(4); // false</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre><var>arr</var>.includes(<var>zoekWaarde[</var>, <var>vanIndex]</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>zoekWaarde</code></dt> + <dd>Het element om te zoeken.</dd> + <dt><code>vanIndex</code> {{optional_inline}}</dt> + <dd>De positie binnen de array waar begonnen wordt met het zoeken naar <code>zoekWaarde</code>. Een negatieve waarde zoekt oplopend uit de index van array.length + vanIndex. Standaard 0.</dd> +</dl> + +<h3 id="Antwoord_waarde">Antwoord waarde</h3> + +<p>Een {{jsxref("Boolean")}}. <code>true</code> als de <code>zoekWaarde</code> is gevonden. <code>false</code> als dit niet het geval is. de 0 (nul) worden als gelijk gezien. -0 is gelijk aan 0 en +0. <code>false</code> staat niet gelijk aan 0</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Voorbeelden</strong></span></font></p> + +<p> </p> + +<pre class="brush: js">[1, 2, 3].includes(2); // true <em>(waar)</em> +[1, 2, 3].includes(4); // false <em>(niet waar)</em> +[1, 2, 3].includes(3, 3); // false <em>(niet waar)</em> +[1, 2, 3].includes(3, -1); // true <em>(waar)</em> +[1, 2, NaN].includes(NaN); // true <em>(waar) </em>(NaN betekent "Not A Number" oftewel "geen nummer" in het Engels) +</pre> + +<p> </p> + +<h3 id="fromIndex_is_groter_dan_of_gelijk_aan_de_array_lengte"><code>fromIndex</code> is groter dan of gelijk aan de array lengte</h3> + +<p>Als <code>fromIndex</code> groter of gelijk is aan de lengte van de array, wordt er <code>false</code> geantwoord. De array zal niet doorzocht worden.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false <em>(niet waar)</em> +arr.includes('c', 100); // false <em>(niet waar)</em></pre> + +<h3 id="De_berekende_index_is_minder_dan_0">De berekende index is minder dan 0</h3> + +<p>Als <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">vanIndex</span></font> negatief is, zal de berekende index worden berekend om te worden gebruikt als een positie in de array waarop moet worden gezocht naar <code>zoekElement</code>. Als de berekende index lager is dan 0, wordt de hele array doorzocht.</p> + +<pre class="brush: js">// array lengte is 3 +// vanIndex is -100 +// berekende index is 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true <em>(waar)</em> +arr.includes('b', -100); // true <em>(waar)</em> +arr.includes('c', -100); // true <em>(waar)</em></pre> + +<h3 id="includes()_gebruiken_als_een_algemene_methode"><code>includes()</code> gebruiken als een algemene methode</h3> + +<p>De <code>includes()</code> methode is natuurlijk algemeen. Het is niet nodig dat <code>deze</code> waarde een Array is. Het onderstaande voorbeeld laat de <code>includes()</code> methode zien in een functie's <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argumenten</a> lijst. </p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true <em>(waar)</em> + console.log([].includes.call(arguments, 'd')); // false <em>(niet waar)</em> +})('a','b','c');</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(searchElement, elementK) is true, return true. + // c. Increase k by 1. + // NOTE: === provides the correct "SameValueZero" comparison needed here. + if (o[k] === searchElement) { + return true; + } + k++; + } + + // 8. Return false + return false; + } + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td>{{CompatNo}}</td> + <td>14</td> + <td>34</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>{{CompatGeckoMobile("43")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/index.html b/files/nl/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..37394ccd2e --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,485 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>De JavaScript <strong><code>Array</code></strong> klasse is een globaal object dat wordt gebruikt bij de constructie van arrays; <a href="https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language">een hoog-geplaatst</a>, lijstachtig object.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Arrays zijn lijstachtige objecten waarvan het prototype methoden heeft om te iterereren, muteren en kopiëren. Noch de lengte van een Javascript-array, noch de typen elementen staan vast. Aangezien de lengte van een array op elk moment kan veranderen en gegevens kunnen worden opgeslagen op niet-aangrenzende locaties, is het niet gegarandeerd dat de gegevensplekken in de Javascript-array vast staan. Over het algemeen zijn dit handige kenmerken; maar als deze functies niet wenselijk zijn voor jouw specifieke gebruik, kun je overwegen om <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> te gebruiken.</p> + +<p>Arrays kunnen geen tekenreeksen gebruiken als elementindexen (zoals in een associatieve array), maar moeten hele getallen gebruiken. Een element instellen of ophalen met behulp van de haakjesnotatie <em>(of puntnotatie) </em>zal geen element uit de array ophalen of instellen. Maar zal proberen om een variabele uit de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Properties">object property collection</a> van de array op te halen of in te stellen. De objecteigenschappen van de array en de lijst met arrayelementen zijn namelijk gescheiden en de kopie- en mutatiebewerkingen van de array kunnen niet worden toegepast op deze benoemde eigenschappen</p> + +<h3 id="Alledaagse_handelingen">Alledaagse handelingen</h3> + +<p><strong>Maak een Array aan</strong></p> + +<pre class="brush: js">let fruit = ["Appel", "Banaan"]; + +console.log(fruit.length); +// 2 +</pre> + +<p><strong>Toegang tot (indexeren van) een Array-item</strong></p> + +<pre class="brush: js">let eerste = fruit[0]; +// Appel + +let laatste = fruit[fruit.length - 1]; +// Banaan +</pre> + +<p><strong>Itereer over een Array</strong></p> + +<pre class="brush: js">fruit.forEach(function (item, index, array) { + console.log(item, index); +}); +// Appel 0 +// Banaan 1 +</pre> + +<p><strong>Toevoegen op het eind van de Array</strong></p> + +<pre class="brush: js">let nieuweLengte = fruit.push("Sinaasappel"); +// ["Appel", "Banaan", "Sinaasappel"] +</pre> + +<p><strong>Verwijder op het eind van de Array</strong></p> + +<pre class="brush: js">let laatste = fruit.pop(); // verwijder de Sinaasappel op het eind +// ["Appel", "Banaan"]; +</pre> + +<p><strong>Verwijder van de eerste plaats van een array</strong></p> + +<pre class="brush: js">let eerste = fruit.shift(); // verwijder appel van de eerste plaats +// ["Banaan"]; +</pre> + +<p><strong>Voeg toe aan de eerste plaats van een Array</strong></p> + +<pre class="brush: js">let nieuweLengte = fruit.unshift("Aardbei") // voeg de aarbei toe op de eerste plaats +// ["Aardbei", "Banaan"]; +</pre> + +<p><strong>Zoek de index van een item in de Array</strong></p> + +<pre class="brush: js">fruit.push("Mango"); +// ["Aardbei", "Banaan", "Mango"] + +let positie = fruit.indexOf("Banaan"); +// 1 +</pre> + +<p><strong>Verwijder een item van de indexpositie</strong></p> + +<pre class="brush: js">let verwijderItem = fruit.splice(positie, 1); // hiermee kan je een item verwijderen +// ["Aardbei", "Mango"] +</pre> + +<p><strong>Kopieer een array</strong></p> + +<pre class="brush: js">let Kopie = fruit.slice(); // hiermee maak je een kopie van de matrix +// ["Aardbei", "Mango"] +</pre> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Een JavaScript-array wordt geïnitialiseerd met de gegeven elementen, behalve in het geval dat een enkel argument wordt doorgegeven aan de Array-constructor en dat argument een getal is. (Zie hieronder.) Merk op dat dit speciale geval alleen van toepassing is op JavaScript-arrays die zijn gemaakt met de Array-constructor, niet op array-literals die zijn gemaakt met de haakjesyntaxis.</dd> + <dt><code>arrayLengte</code></dt> + <dd>Als het enige argument dat aan de constructor Array is doorgegeven, een geheel getal tussen 0 en 232-1 (inclusief) is, geeft dit een nieuwe JavaScript-array terug waarvan de lengte is ingesteld op dat aantal. Als het argument een ander getal is, wordt er een uitzondering {{jsxref ("RangeError")}} gegenereerd.</dd> + <dt></dt> +</dl> + +<h3 id="Toegang_tot_array-elementen">Toegang tot array-elementen</h3> + +<p>JavaScript-arrays zijn geïndexeerd vanaf nul: het eerste element van een array staat op index 0 en het laatste element staat op de index die gelijk is aan de waarde van de eigenschap {{jsxref ("Array.length", "length")}} van de array min 1.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.observe()")}} {{non-standard_inline}}</dt> + <dd>Asynchronously observes changes to Arrays, similar to {{jsxref("Object.observe()")}} for objects. It provides a stream of changes in order of occurrence.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/indexof/index.html b/files/nl/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..19d72e4ec5 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,244 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - Méthode + - indexof + - zoeken +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>indexOf()</strong></code> methode retourneert het index getal behorende bij het gegeven element in een array. Indien het element niet is gevonden wordt -1 geretourneerd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement</var>[, <var>fromIndex</var> = 0])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Het te doorzoeken element in de Array.</dd> + <dt><code>fromIndex</code></dt> + <dd>De index waar vanaf gezocht moet worden. Als de index groter is dan de lengte van de array, dan wordt -1 geretourneerd welke inhoudt dat de array niet doorzocht is. Als de gegeven index een negatief getal is, wordt dit gebruikt als offset van het einde van de array. Opmerking: Als de gegeven index negatief is, wordt de array nog steeds van voren naar achteren doorzocht. Als de berekende index minder dan 0 is, dan wordt de gehele array doorzocht. Standaard: 0 (gehele array wordt doorzocht).</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>De eerste index van het element in de array; <strong>-1</strong> als het element niet is gevonden.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code><strong>indexOf()</strong></code> vergelijkt searchElement met elementen van de Array gebruikmakend van 'strict equality' (dezelfde methode zoals gebruikt door === of de gelijk-aan operator).</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Het_gebruik_van_indexOf()"><code>Het gebruik van indexOf()</code></h3> + +<p>De volgende voorbeelden gebruiken <code><strong>indexOf()</strong></code> om waarden in een array te lokalizeren. </p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Alle_voorvallen_vinden_van_een_element">Alle voorvallen vinden van een element</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Zoek_of_een_element_bestaat_in_de_array_of_niet_en_update_de_array">Zoek of een element bestaat in de array of niet en update de array</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('New veggies collection is : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' already exists in the veggies collection.'); + } +} + +var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; + +updateVegetablesCollection(veggies, 'spinach'); +// New veggies collection is : potato,tomato,chillies,green-papper,spinach +updateVegetablesCollection(veggies, 'spinach'); +// spinach already exists in the veggies collection. +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><strong><code>indexOf()</code></strong> werd aan de ECMA-262 standaard toegevoegd in de 5de editie; als zodanig kan het niet in alle browsers voorkomen. U kunt hier een workaround voor gebruiken door de volgende code te plaatsen in het begin van uw scripts. Hiermee kunt u <code><strong>indexOf()</strong> </code>gebruiken als er nog geen native support beschikbaar is. Dit algoritme vergelijkt hetgeen gespecificeerd in ECMA-262, 5de editie, aangenomen dat {{jsxref("Global_Objects/TypeError", "TypeError")}} en {{jsxref("Math.abs()")}} hun eigen waarden hebben.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 +// Referentie: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Let o be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let lenValue be the result of calling the Get + // internal method of o with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. If len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = +fromIndex || 0; + + if (Math.abs(n) === Infinity) { + n = 0; + } + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. Als n >= 0, dan Let k be n. + // 8. Anders, n<0, Let k be len - abs(n). + // Als k kleiner is dan 0, dan let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Herhaal, zolang k < len + while (k < len) { + // a. Let Pk be ToString(k). + // Dit is impliciet voor de linkerkant van de vergelijking + // b. Let kPresent be the result of calling the + // HasProperty internal method of o with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + // i. Let elementK be the result of calling the Get + // internal method of o with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Oorspronkelijke definitie. Geïmplementeerd in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</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>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Kenmerk</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>Basis Ondersteuning</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibiliteit_opmerkingen">Compatibiliteit opmerkingen</h2> + +<ul> + <li>Vanaf Firefox 47 {{geckoRelease(47)}}, retourneert deze methode niet meer <code>-0</code>. Bijvoorbeeld, <code>[0].indexOf(0, -0)</code> retourneert nu <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/isarray/index.html b/files/nl/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..19566a4ced --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,142 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>Array.isArray()</strong></code> bepaalt of de gegeven waarde een {{jsxref("Array")}} is. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Het te onderzoeken object.</dd> +</dl> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Indien het object een {{jsxref("Array")}} is, dan is <code>true</code> het resultaat, anders wordt dit <code>false</code>. </p> + +<p>Bekijk het artikel <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> voor nadere details.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: js">// alle van de volgende call resulteren in true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Weinig bekend: Array.prototype is zelf een array: +Array.isArray(Array.prototype); + +// alle van de volgende calls resulteren in false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>De volgende code zal de methode <code>Array.isArray()</code> aanmaken indien deze niet van huis uit werd meegegeven:</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificaties</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiele definitie. Geimplementeerd in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/map/index.html b/files/nl/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..8ac69797ad --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,324 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - ECMAScript6 + - JavaScript + - Méthode + - Prototype + - Referentie + - polyfill + - reeks +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>map()</strong></code> methode <strong>maakt een nieuwe array aan</strong> met als inhoud het resultaat van het aanroepen van de meegegeven functie op elk van de elementen uit de originele array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + +<p class="hidden">De broncode voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldproject, kunt u <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> klonen en ons een pull-verzoek sturen. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { + </var>// Return element for new_array<var> +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Functie die een element voor de nieuwe Array produceert en de volgende argumenten aanvaardt: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>Het huidige te verwerken element uit de array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>De index van het huidige te verwerken element in die array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>De array waarop <code>map</code> werd opgeroepen.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Waarde die moet gebruikt worden voor <code>this</code> bij het uitvoeren van <code>callback</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Een nieuwe array waarbij elk element het resultaat is van het oproepen van de functie op het overeenkomstige element uit de originele array.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code>map</code> roept de meegegeven <code>callback</code> functie <strong>één keer op voor elk element</strong> in een array, in volgorde, en maakt een nieuwe array met de resultaten. <code>callback</code> wordt enkel opgeroepen voor indices van de array die een waarde hebben, inclusief <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Het wordt niet opgeroepen voor element die niet (meer) in de array zitten (indices die nog nooit gezet zijn, die werden verwijderd of die nog nooit een waarde hebben gekregen).</p> + +<p>Aangezien <code>map</code> een nieuwe array aanmaakt, heeft het geen zin deze methode aan te roepen als je de geretourneerde array niet gebruikt; gebruik dan eerder <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> of <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Gebruik <code>map</code> niet als: A) je de geretourneerde array niet gebruikt, en/of B) de <code>callback</code> functie geen waarde retourneert.</p> + +<p><code>callback</code> wordt aangeroepen met drie argumenten: de waarde van het element, de index van het element en het Array object zelf dat wordt doorlopen.</p> + +<p>Als een <code>thisArg</code> parameter wordt meegegeven aan <code>map</code>, zal het gebruikt worden als <code>this</code> waarde voor de <code>callback</code> functie. Indien niet, wordt {{jsxref("undefined")}} gebruikt als zijn <code>this</code> waarde. De <code>this</code> waarde zoals <code>callback</code> ze uiteindelijk waarneemt, wordt bepaald volgens <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">de gewone regels voor het bepalen van <code>this</code> zoals waargenomen door een functie</a>.</p> + +<p><code>map</code> wijzigt de array waarop het wordt aangeroepen niet (ofschoon <code>callback</code>, indien aangeroepen, dat wél kan doen).</p> + +<p>Het aantal elementen dat wordt verwerkt door <code>map</code> wordt bepaald vooraleer de eerste aanroep van <code>callback</code> plaatsvindt. Elementen die worden toegevoegd aan de array nadat de aanroep van <code>map</code> is gebeurd zullen door <code>callback</code> niet worden behandeld. Als bestaande elementen van de array worden gewijzigd, dan zijn de waarden die worden doorgegeven aan <code>callback</code> de waarden op het moment dat <code>map</code> ze beschouwt. Elementen die worden verwijderd na het aanroepen van <code>map</code> en vóór ze werden beschouwd worden niet verwerkt.<br> + <br> + Voor de indices waarop de originele array lege plaatsen bevat, zal ook de resulterende array lege plaatsen bevatten.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Een_array_van_getallen_mappen_op_een_array_van_vierkantswortels">Een array van getallen mappen op een array van vierkantswortels</h3> + +<p>De volgende code neemt een array van getallen en creëert een nieuwe array die de vierkantswortels van die getallen bevat.</p> + +<pre class="brush: js notranslate">var getallen = [1, 4, 9]; +var vierkantsWortels = getallen.map(function(getal) { +return Math.sqrt(getal) +}); +// vierkantsWortels is nu [1, 2, 3] +// getallen is nog steeds [1, 4, 9] +</pre> + +<h3 id="Gebruik_van_map_om_objecten_te_herformateren_in_een_array">Gebruik van map om objecten te herformateren in een array</h3> + +<p>De volgende code neemt een array van objecten en creëert een nieuwe array die de geherformatteerde objecten bevat.</p> + +<pre class="brush: js notranslate">var kvArray = [{key: 1, value: 10}, + {key: 2, value: 20}, + {key: 3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], + +// kvArray is still: +// [{key: 1, value: 10}, +// {key: 2, value: 20}, +// {key: 3, value: 30}] +</pre> + +<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapping an array of numbers using a function containing an argument</h3> + +<p>The following code shows how map works when a function requiring one argument is used with it. The argument will automatically be assigned from each element of the array as map loops through the original array.</p> + +<pre class="brush: js notranslate">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles is now [2, 8, 18] +// numbers is still [1, 4, 9] +</pre> + +<h3 id="Using_map_generically">Using <code>map</code> generically</h3> + +<p>This example shows how to use map on a {{jsxref("String")}} to get an array of bytes in the ASCII encoding representing the character values:</p> + +<pre class="brush: js notranslate">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Using_map_generically_querySelectorAll">Using <code>map</code> generically <code>querySelectorAll</code></h3> + +<p>This example shows how to iterate through a collection of objects collected by <code>querySelectorAll</code>. This is because <code>querySelectorAll</code> returns a <strong><em>NodeList</em> </strong>which is a collection of objects.<br> + In this case we return all the selected options' values on the screen:</p> + +<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Easier way would be using {{jsxref("Array.from()")}} method.</p> + +<h3 id="Tricky_use_case">Tricky use case</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p> + +<p>It is common to use the callback with one argument (the element being traversed). Certain functions are also commonly used with one argument, even though they take additional optional arguments. These habits may lead to confusing behaviors.</p> + +<pre class="brush: js notranslate" dir="rtl">// Consider: +['1', '2', '3'].map(parseInt); +// While one could expect [1, 2, 3] +// The actual result is [1, NaN, NaN] + +// parseInt is often used with one argument, but takes two. +// The first is an expression and the second is the radix. +// To the callback function, Array.prototype.map passes 3 arguments: +// the element, the index, the array +// The third argument is ignored by parseInt, but not the second one, +// hence the possible confusion. See the blog post for more details +// If the link doesn't work +// here is concise example of the iteration steps: +// parseInt(string, radix) -> map(parseInt(value, index)) +// first iteration (index is 0): parseInt('1', 0) // results in parseInt('1', 0) -> 1 +// second iteration (index is 1): parseInt('2', 1) // results in parseInt('2', 1) -> NaN +// third iteration (index is 2): parseInt('3', 2) // results in parseInt('3', 2) -> NaN + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Actual result is an array of numbers (as expected) + +// Same as above, but using the concise arrow function syntax +['1', '2', '3'].map( str => parseInt(str) ); + +// A simpler way to achieve the above, while avoiding the "gotcha": +['1', '2', '3'].map(Number); // [1, 2, 3] +// but unlike `parseInt` will also return a float or (resolved) exponential notation: +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +</pre> + +<p>One alternative output of the map method being called with parseInt as a parameter runs as follows:</p> + +<pre class="brush: js notranslate">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Actual result of 10,NaN,2 may be unexpected based on the above description.</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>map</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>map</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, and {{jsxref("Array")}} have their original values and that <code>callback.call</code> evaluates to the original value of <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback/*, thisArg*/) { + + var T, A, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = arguments[1]; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">De compatibiliteitstabel op deze pagina wordt gegenereerd op basis van gestructureerde gegevens. Als u wilt bijdragen aan de gegevens, kijk dan op <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull-aanvraag.</div> + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/push/index.html b/files/nl/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..db5fe6e5b2 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,179 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Array + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>push()</strong></code> methode voegt een of meerdere elementen toe aan het einde van een array en geeft de nieuwe lengte van de array terug.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var>, ..., <var>elementN</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>De elementen om toe te voegen aan het einde van de array.</dd> +</dl> + +<h3 id="Geeft_terug">Geeft terug</h3> + +<p>De nieuwe {{jsxref("Array.length", "length")}} eigenschap van het object waarop deze methode is aangeroepen.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>push</code> methode voegt waardes toe aan een array.</p> + +<p><code>push</code> is opzettelijk generiek. Deze methode kan gebruikt worden met {{jsxref("Function.call", "call()")}} of {{jsxref("Function.apply", "apply()")}} op objecten welke op arrays lijken. De <code>push</code> methode rekent op een <code>length</code> eigenschap om te kunnen weten waar de nieuwe waardes toegevoegd moeten worden. Als de <code>length</code> eigenschap niet kan worden omgezet naar een getal, wordt de gebruikte index 0. Dit geldt ook wanneer <code>length</code> niet bestaat, in welk geval <code>length</code> gemaakt wordt, ook met waarde 0.</p> + +<p>De enige native, array-achtige objecten zijn {{jsxref("Global_Objects/String", "strings", "", 1)}}, hoewel zij niet geschikt zijn voor het gebruik van deze methode, omdat strings onveranderlijk zijn.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Elementen_aan_een_array_toevoegen">Elementen aan een array toevoegen</h3> + +<p>De volgende code maakt de <code>sports</code> array met twee elementen en voegt twee elementen er aan toe. De <code>total</code> variabele bevat de nieuwe lengte van de array.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Twee_arrays_samenvoegen">Twee arrays samenvoegen</h3> + +<p>Dit voorbeeld gebruikt {{jsxref("Function.apply", "apply()")}} om alle elementen van een tweede array te pushen.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// De tweede array in de eerste voegen +// Gelijk aan vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h3 id="Een_object_gebruiken_op_een_array-achtige_manier">Een object gebruiken op een array-achtige manier</h3> + +<p>Zoals hierboven gezegd is <code>push</code> opzettelijk generiek, wat we in ons voordeel kunnen gebruiken. <code>Array.prototype.push</code> werkt ook op objecten, zoals dit voorbeeld laat zien. We maken geen array om een verzameling objecten op te slaan. We slaan de verzameling op in het object zelf en gebruiken <code>call</code> op <code>Array.prototype.push</code> om de methode te laten denken dat we te maken hebben met een array en het werkt. Dit is te danken aan de manier waarop JavaScript toestaat om de context van uitvoer te bepalen.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem (elem) { + // obj.length wordt automatisch verhoogd elke keer dat een element wordt toegevoegd. + [].push.call(this, elem); + } +}; + +// Lege objecten toevoegen om het idee te laten zien +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Hoewel <code>obj</code> geen array is zorgt de <code>push</code> methode er voor dat <code>obj</code>'s <code>length</code> eigenschap wordt verhoogd, zoals ook zou gebeuren als dit gedaan zou worden op een echte array.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Eerste definitie. Geïmplementeerd in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/shift/index.html b/files/nl/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7187acb853 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>shift()</strong></code> methode verwijdert het <strong>eerste</strong> element van de array en geeft het element terug als resultaat. Deze methode wijzigt de lengte van de array.</p> + +<pre class="brush: js">var a = [1, 2, 3]; +var b = a.shift(); + +console.log(a); // [2, 3] +console.log(b); // 1 +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.shift()</pre> + +<h3 id="Return_value">Return value</h3> + +<p>Het verwijderde element van de array; {{jsxref("undefined")}} als de array leeg is.</p> + +<h2 id="Description">Description</h2> + +<p>De <code>shift</code> methode verwijdert het element met index nul en schuift de volgende waarden met hogere index, 1 positie terug. Het verwijderde element is het resultaat. Als de {{jsxref("Array.length", "length")}} property 0 is, is het resultaat {{jsxref("undefined")}} .</p> + +<p><code>shift</code> is bewust generiek; deze methode kan worden {{jsxref("Function.call", "aangeroepen", "", 1)}} of {{jsxref("Function.apply", "toegepast", "", 1)}} op op array gelijkende objecten. Objects zonder <code>length</code> property, die de laatste van een serie van opeenvolgende, op nul gebaseerde numerische properties reflecteren, kunnen zich op een niet betekenisvolle manier gedragen.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Removing_an_element_from_an_array">Removing an element from an array</h3> + +<p>De volgend code toont de <code>myFish</code> array voor en na het verwijderen van het eerste element. Het toont ook het verwijderde element:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish before:', JSON.stringify(myFish)); +// myFish before: ['angel', 'clown', 'mandarin', 'surgeon'] + +var shifted = myFish.shift(); + +console.log('myFish after:', myFish); +// myFish after: ['clown', 'mandarin', 'surgeon'] + +console.log('Removed this element:', shifted); +// Removed this element: angel +</pre> + +<h3 id="Using_shift()_method_in_while_loop">Using shift() method in while loop</h3> + +<p>De shift() methode wordt vaak gebruikt als een conditie in een while lus. In het volgende voorbeeld verwijdert elke iteratie het volgende element van de array totdat ze leeg is:</p> + +<pre class="brush: js">var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; + +while( (i = names.shift()) !== undefined ) { + console.log(i); +} +// Andrew, Edward, Paul, Chris, John +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/slice/index.html b/files/nl/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..d3dcaf0acb --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,269 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<p>{{JSRef}}<br> + De <code><strong>slice()</strong></code> method geeft een oppervlakkige kopie van een gedeelte van een array terug in een nieuwe array.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre> + +<h2 id="Parameters">Parameters</h2> + +<dl> + <dt><code>begin</code></dt> + <dd>Bij nul beginnende index (zero-based), van waaruit de extractie begint.</dd> + <dd>Bij een negatieve index, geeft <code>begin</code> het aantal plaatsen (offset) tot aan het einde van de reeks. <code>slice(-2)</code> extraheert de laatste twee elementen van de sequentie.</dd> + <dd>Indien <code>begin</code> niet gedefinieerd is, of gelijkwaardig is aan undefined, dan begint <code>slice</code> bij index <code>0</code>.</dd> + <dt><code>end</code></dt> + <dd>Bij nul beginnende index waarop de extractie gestopt wordt. <code>slice</code> extraheert tot aan, maar exclusief <code>end</code>.</dd> + <dd><code>slice(1,4)</code> extraheert het tweede element tot het vierde element (elementen met index 1, 2, en 3).</dd> + <dd>Als negatieve index, geeft <code>end</code> een afstand (offset) aan tot het einde van de reeks. <code>slice(2,-1)</code> extraheert het derde element tot het op twee na laatse element in de sequentie.</dd> + <dd>Indien <code>end</code> wordt weggelaten, dan zal <code>slice</code> tot het einde van de reeks toe extraheren (<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code>slice</code> verandert niet. Het retourneert een oppervlakkige kopie van elementen, ten opzichte van de oorspronkelijke array. Elementen van het origineel, worden als volgt gekopieerd en geretourneerd:</p> + +<ul> + <li>Voor object referenties (en dus niet het eigenlijke object), kopieert <code>slice</code> object referenties naar een nieuwe array. Zowel het origineel als ook de nieuwe array verwijzen naar hetzelfde object. Indien een object, waarnaar verwezen wordt, verandert, dan zullen de wijzigingen zowel in de nieuwe als bestaande array zichtbaar worden.</li> + <li>Voor strings en getallen (geen {{jsxref("String")}} en {{jsxref("Number")}} objects), kopieert <code>slice</code> strings en getallen naar de nieuwe array. Veranderingen aan een string of getal in de ene array zal de andere array niet beinvloeden.</li> +</ul> + +<p>Indien een nieuw element aan de ene array wordt toegevoegd, dan blijft de andere array onaangeroerd.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Geeft_een_gedeelte_van_een_bestaande_array">Geeft een gedeelte van een bestaande array</h3> + +<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; +var citrus = fruits.slice(1, 3); + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Gebruik_slice">Gebruik <code>slice</code></h3> + +<p>In het volgende voorbeeld, maakt <code>slice</code> een nieuwe array aan, <code>newCar</code>, uit <code>myCar</code>. Beide hebben een referentie aan het object <code>myHonda</code>. Wanneer de kleur van <code>myHonda</code> wordt gewijzigd, dan hebben beide arrays deze wisseling ondergaan.</p> + +<pre class="brush: js">// Using slice, create newCar from myCar. +var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']; +var newCar = myCar.slice(0, 2); + +// Display the values of myCar, newCar, and the color of myHonda +// referenced from both arrays. +console.log('myCar = ' + myCar.toSource()); +console.log('newCar = ' + newCar.toSource()); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Change the color of myHonda. +myHonda.color = 'purple'; +console.log('The new color of my Honda is ' + myHonda.color); + +// Display the color of myHonda referenced from both arrays. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Het script verwerkt dit als volgt:</p> + +<pre class="brush: js">myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h2 id="Array-achtige_objecten">Array-achtige objecten</h2> + +<p><code>De slice</code> method kan ook gebruikt worden om Array-like objects / collections om te zetten in een nieuwe Array. Je hoeft dan alleen de methode op zich aan het object te binden. De {{jsxref("Functions/arguments", "arguments")}} binnen een functie is een voorbeeld van een 'array-like object'.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Binding kan worden verkregen met de .<code>call</code> functie of {{jsxref("Function.prototype")}} en dit kan ook via reductie door gebruik te maken van <code>[].slice.call(arguments)</code> in plaats van de <code>Array.prototype.slice.call</code>. Hoe dan ook, het kan worden vereenvoudigd met {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Cross-browser_gedrag_in_de_hand_werken">Cross-browser gedrag in de hand werken</h2> + +<p>Host objecten zoals DOM-objecten, zijn volgens de spec niet verplicht zich te gedragen zoals in een Mozilla browser, wanneer een omzetting plaatsvindt volgens de Array.prototype.slice methode. IE browsers voor versie 9 doen dit bijvoorbeeld niet. De huidige browser versies van IE, Mozilla, Chrome, Safari en Opera ondersteunen het eerder beschreven oppervlakkige kopie ('shallow copy') gedrag en het is daarmee de-facto het standaard gedrag.<br> + Door onderstaande code vooraf te laten gaan aan de eigen code, kun je het toch mogelijk maken dat een browser zich zoals je zou verwachten gaat gedragen en er verder geen afwijkende browser specifieke code gebruikt hoeft te worden.</p> + +<pre class="brush: js">/** + * Shim for "fixing" IE's lack of support (IE < 9) for applying slice + * on host objects like NamedNodeMap, NodeList, and HTMLCollection + * (technically, since host objects have been implementation-dependent, + * at least before ES6, IE hasn't needed to work this way). + * Also works on strings, fixes IE < 9 to allow an explicit undefined + * for the 2nd argument (as in Firefox), and prevents errors when + * called on other DOM objects. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Can't be used with DOM elements in IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // This will work for genuine arrays, array-like objects, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 gets unhappy with an undefined end argument + end = (typeof end !== 'undefined') ? end : this.length; + + // For native Array objects, we use the native slice function + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // For array like object we handle it ourselves. + var i, cloned = [], + size, len = this.length; + + // Handle negative value for "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Handle negative value for "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Actual expected size of the slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</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>Feature</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>Basic support</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>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/array/splice/index.html b/files/nl/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..c373091346 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,177 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>splice()</strong></code>-methode past de inhoud van een array aan door bestaande elementen te verwijderen en/of nieuwe elementen toe te voegen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>array</var>.splice(<var>start[</var>, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Positie vanwaar de array dient te worden veranderd (met eerste element op 0). Indien groter dan de lengte van de array zal de <code>start </code>worden omgezet naar de lengte van de array. Indien negatief begint hij het absolute aantal vanaf het einde van de array.</dd> + <dt><code>deleteCount</code></dt> + <dd>Een getal dat aanduidt hoeveel elementen moeten worden verwijderd. Indien 0 worden er geen elementen verwijderd. In dit geval moet minstens één toe te voegen element worden meegeven. Als de <code>deleteCount </code>groter is dan het overige aantal elementen in de array (beginnend bij de startwaarde) worden al deze overige elementen verwijderd.</dd> + <dd>Indien de <code>deleteCount </code>niet wordt meegegeven, wordt deze als volgt berekend: (<code>arr.length - start</code>)<code>. </code>Dit heeft als resultaat dat alle elementen na de startwaarde worden verwijderd.</dd> + <dt><code>item1, item2, <em>...</em></code></dt> + <dd>De elementen die in de array moeten worden toegevoegd, beginnend op de positie van de <code>start </code>-waarde. Indien niet meegegeven zullen er enkel elementen uit de array verwijderd worden.</dd> +</dl> + +<h3 id="Retourwaarde">Retourwaarde</h3> + +<p>Een array die de verwijderde items bevat. Wanneer slechts één element is verwijderd, wordt er een array teruggegeven met één element. Wanneer er geen elementen zijn verwijderd, wordt een lege array teruggegeven.</p> + +<h2 id="Omschrijving">Omschrijving</h2> + +<p>Wanneer een ander aantal elementen wordt ingevoegd dan het aantal elementen dat wordt verwijderd, zal de array een andere lengte hebben na afloop van de aanroep.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Gebruik_van_splice()">Gebruik van <code>splice()</code></h3> + +<p>The following script illustrates the use of <code>splice()</code>:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +// removes 0 elements from index 2, and inserts 'drum' +var removed = myFish.splice(2, 0, 'drum'); +// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon'] +// removed is [], no elements removed + +// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon'] +// removes 1 element from index 3 +removed = myFish.splice(3, 1); +// myFish is ['angel', 'clown', 'drum', 'surgeon'] +// removed is ['mandarin'] + +// myFish is ['angel', 'clown', 'drum', 'surgeon'] +// removes 1 element from index 2, and inserts 'trumpet' +removed = myFish.splice(2, 1, 'trumpet'); +// myFish is ['angel', 'clown', 'trumpet', 'surgeon'] +// removed is ['drum'] + +// myFish is ['angel', 'clown', 'trumpet', 'surgeon'] +// removes 2 elements from index 0, and inserts 'parrot', 'anemone' and 'blue' +removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); +// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon'] +// removed is ['angel', 'clown'] + +// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon'] +// removes 2 elements from index 2 +removed = myFish.splice(myFish.length -3, 2); +// myFish is ['parrot', 'anemone', 'surgeon'] +// removed is ['blue', 'trumpet'] + +const myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']; +// removes 3 elements starting at index 2 +const removed = myFish.splice(2); +// myFish is ['parrot', 'anemone'] +// removed is ['blue', 'trumpet', 'surgeon'] +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-compatibiliteit">Browser-compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</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="Compatibiliteit_met_oudere_versies">Compatibiliteit met oudere versies</h2> + +<p>In JavaScript 1.2 <code>retourneert de splice()</code>-methode het verwijderde element, wanneer slechts één element is verwijderd (<code>deleteCount</code> parameter is 1); in andere gevallen retourneert de methode een array met de verwijderde elementen.</p> + +<div class="note"> +<p><strong>Ter info:</strong> De laatste browser die gebruik maakte van JavaScript 1.2 was Netscape Navigator 4, dus er kan altijd worden verwacht dat <code>splice()</code> altijd een array retourneert. Dit is het geval wanneer een JavaScript-object een <code>length</code>-property heeft en een <code>splice()</code>-method. {{domxref("console.log()")}} werkt op dit object als op een Array-acthig object. Het object controleren met <code>instanceof Array</code> retourneert <code>false.</code></p> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — voeg elementen toe/verwijder elementen vanaf het eind van de array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — voeg elementen toe/verwijder elementen vanaf het begin van de array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — retourneer een nieuw array samengesteld uit waarden van dit array en andere arrays of waarden</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/date/index.html b/files/nl/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..98895e0fe3 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,266 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Datum + - JavaScript + - Referentie +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p>Creëert een JavaScript <strong><code>Date</code></strong> instantie die een enkel punt in tijd voorstelt. <code>Date</code> objecten zijn gebaseerd op een tijdwaarde die gelijk staat aan het aantal milliseconden sinds 1 Januari, 1970 UTC.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]); +</pre> + +<div class="note"> +<p><strong>NB:</strong> JavaScript <code>Date</code> kan enkel worden geïnstantieerd door JavaScript <code>Date</code> als een constructor aan te roepen: het aanroepen als een gewone functie (bijv. zonder de {{jsxref("Operators/new", "new")}} operator) zal een string terug geven in plaats van een <code>Date</code> object; anders dan andere JavaScript object types, hebben JavaScript <code>Date</code> objecten geen letterlijke syntax.</p> +</div> + +<h3 id="Parameters">Parameters</h3> + +<div class="note"> +<p><strong>NB:</strong> Indien <code>Date</code> wordt aangeroepen als een constructor met meer dan een argument, als waarden groter zijn dan hun logische reeks (bij. 13 wordt gegeven als waarde voor de maand of 70 voor als waarde voor de minuut), wordt de naastgelegen waarde aangepast. Bijvoorbeeld <code>new Date(2013, 13, 1)</code> staat gelijk aan <code>new Date(2014, 1, 1)</code>, beide creëren een datum voor <code>2014-02-01</code> (let er op dat de maand vanaf 0 telt). Dit geldt ook voor andere waarden: <code>new Date(2013, 2, 1, 0, 70)</code> is gelijk aan <code>new Date(2013, 2, 1, 1, 10)</code> en beide creëren een datum voor <code>2013-03-01T01:10:00</code>.</p> +</div> + +<div class="note"> +<p><strong>NB:</strong> Waar <code>Date</code> wordt aangeroepen als een constructor met meer dan een argument, staan de opgegeven argumenten voor lokale tijd. Als UTC gewenst is, gebruik dan <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> met dezelfde argumenten.</p> +</div> + +<dl> + <dt><code>value</code></dt> + <dd>Numerieke waarde die het aantal milliseconden voorstelt vanaf 1 Januari 1970 00:00:00 UTC (Unix Tijdperk; maar hou er rekening mee dat de meeste Unix tijd functies in seconden tellen).</dd> + <dt><code>dateString</code></dt> + <dd>Tekstuele weergave van de datum. De tekst moet een formaat hebben dat wordt herkend door de {{jsxref("Date.parse()")}} methode (<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> en ook een <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">versie van ISO8601</a>). + <div class="note"> + <p><strong>Note:</strong> Het parsen van datumstrings met de <code>Date</code> constructor (en <code>Date.parse</code>, deze zijn gelijkwaardig) wordt sterk afgeraden door de verschillen en inconsistenties van browsers.</p> + </div> + </dd> + <dt><code>year</code></dt> + <dd>Numerieke voorstelling van het jaar. Waarden van 0 tot 99 komen overeen met de jaren 1900 tot 1999. Zie het {{anch("Two_digit_years_map_to_1900_-_1999", "voorbeeld beneden")}}.</dd> + <dt><code>month</code></dt> + <dd>Numerieke voorstelling van de maand, beginnend met 0 voor januari tot 11 voor december.</dd> + <dt><code>day</code></dt> + <dd>Optioneel. Numerieke voorstelling van de dag van de maand.</dd> + <dt><code>hour</code></dt> + <dd>Optioneel. Numerieke voorstelling van het uur van de dag.</dd> + <dt><code>minute</code></dt> + <dd>Optioneel. Numerieke voorstelling van het minuut segment van een tijd.</dd> + <dt><code>second</code></dt> + <dd>Optioneel. Numerieke voorstelling van het seconde segment van een tijd.</dd> + <dt><code>millisecond</code></dt> + <dd>Optioneel. Numerieke voorstelling van het milliseconde segment van een tijd.</dd> +</dl> + +<h2 id="Omschrijving">Omschrijving</h2> + +<ul> + <li>Als er geen argumenten worden gegeven, zal een JavaScript <code>Date</code> object worden gemaakt volgens de huidige tijd en systeeminstellingen.</li> + <li>Als er ten minste twee argumenten worden gegeven, worden ontbrekende argumenten op 1 gezet (als de dag ontbreekt) of 0 voor alle andere.</li> + <li>De Javascript datum is gebaseerd op een tijdswaarde dat het aantal milliseconden voorstelt sinds 01 Januari, 1970 UTC. Een dag bevat 86,400,000 milliseconden. Het JavaScript <code>Date</code> object heeft een waarde reeks van -100,000,000 dagen tot 100,000,000 dagen relatief aan 01 Januari, 1970 UTC.</li> + <li>Het JavaScript <code>Date</code> object biedt uniform gedrag tussen platformen. De tijdswaarde kan doorgegeven worden tussen systemen om hetzelfde punt in tijd voor te stellen. </li> + <li>Het JavaScript <code>Date</code> object ondersteunt een aantal UTC (universal) functies, evenals lokale tijd functies. UTC, ook bekend als Greenwich Mean Time (GMT), refereert naar de tijd zoals bepaald door de World Time Standard. De lokale tijd is de tijd zoals bekend bij de computer waar JavaScript wordt uitgevoerd.</li> + <li>Het aanroepen van JavaScript <code>Date</code> als een functie (ofwel, zonder de {{jsxref("Operators/new", "new")}} operator) zal een tekstreeks teruggeven die de huidige datum en tijd weergeeft.</li> +</ul> + +<h2 id="Eigenschappen">Eigenschappen</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Staat het toe om eigenschappen toe te voegen aan het JavaScript <code>Date</code> object.</dd> + <dt><code>Date.length</code></dt> + <dd>De waarde van <code>Date.length</code> is 7. Dit is het aantal argumenten wat door de constructor wordt verwerkt.</dd> +</dl> + +<h2 id="Methodes">Methodes</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Geeft de numerieke waarde van de huidige tijd - het aantal milliseconden verlopen sinds 1 Januari 1970 00:00:00 UTC.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Verwerkt een tekstuele representaie van een datum en geeft het aantal milliseconden terug vanaf 1 Januari, 1970, 00:00:00, UTC. + <div class="note"> + <p><strong>Note:</strong> Het parsen van datumstrings met de <code>Date</code> constructor (en <code>Date.parse</code>, deze zijn gelijk) wordt sterk afgeraden door de verschillen en inconsistenties van browsers.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Accepteert de zelfde parameters als de langste vorm van de constructor (ofwel 2 tot 7) en geeft het aantal milliseconden terug vanaf 1 Januari, 1970, 00:00:00 UTC.</dd> +</dl> + +<h2 id="JavaScript_Date_instanties">JavaScript <code>Date</code> instanties</h2> + +<p>Alle <code>Date</code> instanties erven van {{jsxref("Date.prototype")}}. Het prototype object van de <code>Date</code> constructor kan aangepast worden om alle <code>Date</code> instanties te beïnvloeden.</p> + +<h3 id="Date.prototype_Methodes">Date.prototype Methodes</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Verschillende_manieren_om_een_Date_object_te_creëeren">Verschillende manieren om een <code>Date</code> object te creëeren</h3> + +<p>De volgende voorbeelden tonen verschillende manieren om Javascript datums te creëren:</p> + +<div class="note"> +<p><strong>Note: </strong>Het parsen van datumstrings met de <code>Date</code> constructor (en <code>Date.parse</code>, deze zijn gelijk) wordt sterk afgeraden vanwege de verschillen en inconsistenties van browsers.</p> +</div> + +<pre class="brush: js">var vandaag = new Date(); +var verjaardag = new Date('December 17, 1995 03:24:00'); +var verjaardag = new Date('1995-12-17T03:24:00'); +var verjaardag = new Date(1995, 11, 17); +var verjaardag = new Date(1995, 11, 17, 3, 24, 0); +</pre> + +<h3 id="Tweegetals_jaren_worden_getransformeerd_tot_1900-1999">Tweegetals jaren worden getransformeerd tot 1900-1999</h3> + +<p>Om datums tussen de jaren 0 en 99 te creëeren en te verkrijgen, horen {{jsxref("Date.prototype.setFullYear()")}} en {{jsxref("Date.prototype.getFullYear()")}} gebruikt te worden.</p> + +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Verouderde methode, 98 wordt hier naar 1998 omgezet +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id="Verstreken_tijd_berekenen">Verstreken tijd berekenen</h3> + +<p>De volgende voorbeelden tonen hoe het mogelijk is om te bepalen hoeveel tijd, in milliseconden, er is verstreken tussen twee Javascript datums.</p> + +<p>In verband met het de mogelijke verschillen in lengtes van dagen (door de overgangen tussen zomer- en wintertijd), maanden en jaren, kunnen er problemen optreden als wordt geprobeerd verschillen te bepalen die groter zijn dan uren, minuten en seconden. Het wordt aangeraden eerst grondig onderzoek hiernaar te doen, alvorens dit te proberen.</p> + +<pre class="brush: js">// met Date objecten +var start = Date.now(); + +// de gebeurtenis om te meten hoort hier: +doeIetsVoorEenLangePeriode(); +var einde = Date.now(); +var verstreken = einde - start; // verstreken tijd in milliseconden +</pre> + +<pre class="brush: js">// met ingebouwde methodes +var start = new Date(); + +// de gebeurtenis om te meten hoort hier: +doeIetsVoorEenLangePeriode(); +var einde = new Date(); +var verstreken = einde.getTime() - start.getTime(); // verstreken tijd in milliseconden +</pre> + +<pre class="brush: js">// om een functie te testen en de return waarde terug te krijgen +function printVerstrekenTijd(fTest) { + var nStartTijd = Date.now(), + vReturn = fTest(), + nEindTijd = Date.now(); + + console.log('Verstreken tijd: ' + String(nEindTijd - nStartTijd) + ' milliseconden'); + return vReturn; +} + +var jouwFunctieReturn = printVerstrekenTijd(jouwFunctie); +</pre> + +<div class="note"> +<p><strong>NB: </strong>In browsers die ondersteuning bieden voor {{domxref("window.performance", "Web Performance API", "", 1)}}'s hoge resolutie tijdsfunctionaliteiten, kan {{domxref("Performance.now()")}} meer betrouwbare en preciezere metingen opleveren dan {{jsxref("Date.now()")}} kan.</p> +</div> + +<h3 id="Aantal_seconden_sinds_Unix_Epoch">Aantal seconden sinds Unix Epoch</h3> + +<pre><code>var seconden = Math.floor(Date.now() / 1000);</code></pre> + +<p>In dit geval is het belangrijk een geheel getal te retourneren (eenvoudige deling is niet toereikend), waarbij het gaat het aantal feitelijk verstreken seconden (daarom gebruikt deze code {{jsxref("Math.floor()")}} en niet {{jsxref("Math.round()")}}).</p> + +<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('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiële definitie. Geïmplementeerd in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Some browsers can have issues when parsing dates: <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p> + +<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p> diff --git a/files/nl/web/javascript/reference/global_objects/function/apply/index.html b/files/nl/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..51428929f1 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,258 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>apply()</strong></code> methode roept een functie aan met een gegeven <code>this</code> waarde en argumenten gedefineerd als een array (of een <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-achtig object</a>).</p> + +<div class="note"> +<p><strong>Let op:</strong> Hoewel de syntax van deze functie vrijwel gelijk is aan die van {{jsxref("Function.call", "call()")}}, is het fundamentele verschil met <code>call()</code> dat deze een <strong>lijst van argumenten</strong> accepteert, terwijl <code>apply()</code> een <strong>enkele array van argumenten</strong> verwacht.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>De waarde van this die aan de call voor <em>fun</em> wordt meegegeven. Hou er rekening mee dat dit mogelijk niet de waarde is die de methode ziet: Als de methode gedefineerd is in <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="The documentation about this has not yet been written; please consider contributing!">non-strict mode</a> code, dan zullen <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/null" title="De waarde null representeerd voor het moedwillig weglaten, of de bedoelde afwezigheid van welk object of waarde dan ook. Het is een van JavaScript's primitive values."><code>null</code></a> en <a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="The documentation about this has not yet been written; please consider contributing!"><code>undefined</code></a> worden vervangen met het globale object en primitieve waardes worden omgezet naar objecten (boxed).</dd> + <dt><code>argsArray</code></dt> + <dd>Een array-achtig object met de argumenten waarmee <em>fun </em>moet worden aangeroepen, of {{jsxref("null")}} of {{jsxref("undefined")}} als er geen argumenten worden gegeven. Vanaf ECMAScript 5 kunnen deze argumenten een generiek array-achtig object zijn in plaats van een array. Hieronder meer informatie over {{anch("Browser_compatibility", "browser compatibiliteit")}}.</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>Het resultaat van de aanroep met de gegeven <code>this</code><strong> </strong>waarde en argumenten.</p> + +<h2 id="Omschrijving">Omschrijving</h2> + +<p>Het is mogelijk om een ander <code>this</code> object toe te wijzen indien je een bestaande functie aanroept. <code>this</code> verwijst naar het huidige object, het object dat de aanroep doet. Met <code>apply</code> kun je een methode eenmaal schrijven en het dan door overerving gebruiken in een ander object, zonder dat je de methode hoeft te herschrijven voor het nieuwe object.</p> + +<p><code>Apply</code> heeft veel overeenkomsten met {{jsxref("Function.call", "call()")}} maar heeft voor argumenten een andere notatie. je kunt een array van argumenten meegeven in plaats van een benoemde set aan argumenten. Met apply kun je zowel een array literal (bijv. <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>) gebruiken als een {{jsxref("Array")}} object (bijv. <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>).</p> + +<p>Je kunt ook {{jsxref("Functions/arguments", "arguments")}} meegeven als <code>argsArray</code> parameter. <code>arguments</code> is een locale variabele of functie, en kan gebruikt worden voor alle ongespecificeerde argumenten voor het aan te roepen object. Dit houdt in dat je niet precies hoeft te weten welke argumenten nodig zijn voor het aan te roepen object als je apply() gebruikt. Het aan te roepen object is vervolgens verantwoordelijk voor de afhandeling van de argumenten.</p> + +<p>Vanaf de 5e editie van ECMAScript kun je ook een willekeurig array-achtig object gebruiken, wat inhoud dat het een <code>length</code> en getallen met bereik <code>(0 ... length-1)</code> als properties heeft. Je kunt bijvoorbeeld een {{domxref("NodeList")}} of een op maat gemaakt object (zoals: <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>) gebruiken.</p> + +<div class="note"> +<p><strong>Let op: </strong>De meeste browsers, waaronder Chrome 14 en Internet Explorer 9, ondersteunen array-achtige objecten nog niet. Deze zullen een exceptie geven als je het toch probeert.</p> +</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Apply_gebruiken_om_constructors_te_ketenen">Apply gebruiken om constructors te ketenen</h3> + +<p>Apply kan gebruikt worden om {{jsxref("Operators/new", "constructors", "", 1)}} voor een object aan elkaar te ketenen, gelijk aan de werkwijze in java. In het volgende voorbeeld maken we een globale {{jsxref("Function")}} methode genaamd <code>construct</code>, welke je in staat stelt om een array-achtig object te gebruiken in plaats van een lijst van argumenten.</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function (aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note"> +<p><strong>Let op:</strong> De <code>Object.create()</code> methode die hierboven gebruikt wordt is vrij nieuw. Voor een alternatieve methode die gebruik maakt van closures kun je onderstaande voorbeeld ook gebruiken:</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> +</div> + +<p>Voorbeeld gebruik:</p> + +<pre class="brush: js notranslate">function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>Let op:</strong> Deze niet native Function.construct methode zal niet werken met sommige native constructors (zoals {{jsxref("Date")}}, bij voorbeeld). In deze gevallen gebruik je de {{jsxref("Function.prototype.bind")}} methode (bij voorbeeld, stel je een array als de volgende voor, te gebruiken met {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in dit geval schrijf je bijvoorbeeld: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — Hoewel dit werkt is dit in meerdere opzichten een kwetsbare manier die niet in productie gebruikt zou moeten worden).</p> +</div> + +<h3 id="Gebruik_van_apply_en_ingebouwde_functies">Gebruik van <code>apply</code> en ingebouwde functies</h3> + +<p>Slim gebruik van apply geeft de mogelijkheid om standaard javascript functies te gebruiken voor handelingen die anders in een loop zouden gebeuren. Als voorbeeld gaan we <code>Math.max</code>/<code>Math.min</code> gebruiken wat de maximum en minimum waardes zijn in een array.</p> + +<pre class="brush: js notranslate">// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// This about equal to Math.max(numbers[0], ...) +// or Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>Maar pas op: door apply op deze manier te gebruiken loop je het risico over de maximum argument limiet van JavaScript's engine heen te gaan. De consequenties van het gebruik van apply op een functie met te veel argumenten (denk aan meer dan tienduizen argumenten) varieren tussen de verschillende engines (JavaScriptCore heeft een hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limiet van 65536</a>), omdat de limiet (en het gedrag bij extreem grote hoeveelheden objecten) niet is opgenomen in een standaard. Sommige engines zullen een exceptie opgooien, anderen kunnen mogelijk zelfs het aantal argumenten afkappen bij het maximum. Als je array toch het risico loopt te groeien voorbij de limiet, kun je beter een hybriede implementatie maken: voer je functie uit over stukken van een array, bijvoorbeeld: </p> + +<pre class="brush: js notranslate">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<h3 id="Gebruik_van_apply_bij_monkey-patching">Gebruik van apply bij "monkey-patching"</h3> + +<p>Apply kan enorm nuttig zijn bij het monkey-patchen van browser-eigen- of framework-functies. Met bijvoorbeeld de <code>someobject.foo</code> functie, kun je de functie aanpassen op de volgende, ietwat smerige manier:</p> + +<pre class="brush: js notranslate">var originalfoo = someobject.foo; +someobject.foo = function() { + // Do stuff before calling function + console.log(arguments); + // Call the function as it would have been called normally: + originalfoo.apply(this, arguments); + // Run stuff after, here. +} +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiele definitie. Geimplementeerd in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/function/call/index.html b/files/nl/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..aee4b67e7f --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,225 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Functie + - JavaScript + - Méthode +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>call()</strong></code> methode roept een functie aan met een gegeven <code>this</code> waarde en afzonderlijk gedefineerde argumenten.</p> + +<div class="note"> +<p><strong>Note:</strong> Hoewel de syntax van deze functie vrijwel gelijk is aan die van {{jsxref("Function.prototype.apply", "apply()")}}, zit er een essentieel verschil tussen deze twee. De <code>call()</code> methode accepteert een <span style="font-size: 14px;"><strong>argumentenlijst</strong></span>, terwijl <code>apply()</code> een<strong> enkele array met argumenten </strong>accepteert.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>function</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>De waarde van <code>this</code> die aan de call voor <code><em>function</em></code> wordt meegegeven. Houd er rekening mee dat dit mogelijk niet de waarde is die de methode ziet: Als de methode gedefineerd is in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} code, dan zullen {{jsxref("Global_Objects/null", "null")}} en {{jsxref("Global_Objects/undefined", "undefined")}} worden vervangen met het globale object en primitieve waardes worden omgezet naar objecten.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>De argumenten voor het object.</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>Het resultaat van het aanroepen van de functie met de gespecificeerde <strong><code>this</code> </strong>waarde en argumenten.</p> + +<h2 id="Omschrijving">Omschrijving</h2> + +<p>De <code>call()</code> methode staat het toe dat een functie of methode van een object om te worden toegewezen en aangeroepen voor een ander object.</p> + +<p>Een ander <code><strong>this</strong></code> object worden toegewezen als er een bestaande functie wordt aangeroepen. <code>this</code> verwijst in principe naar het huidige object, het object wat de aanroep doet. Met <code>call</code> kun je een methode eenmaal schrijven en dan door overerving gebruiken in een ander object, zonder dat je de methode hoeft te herschrijven voor het nieuwe object.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="call_gebruiken_om_constructors_aan_elkaar_te_ketenen_voor_een_object"><code>call</code> gebruiken om constructors aan elkaar te ketenen voor een object</h3> + +<p><code>call</code> kan gebruikt worden om constructors voor een object aan elkaar te ketenen, vergelijkbaar met de werkwijze in Java. In het volgende voorbeeld is de constructor voor het <code>Product</code> object gedefineerd met twee parameters; <code>name</code> en <code>price</code>. De twee andere functies, <code>Food</code> en <code>Toy</code>, roepen <code>Product</code> aan en geven <code>this</code>, <code>name</code> en <code>price</code> mee. <code>Product</code> initializeert de eigenschappen <code>name</code> en <code>price</code>, en deze gespecializeerde functies defineren de <code>category</code>. </p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; + + if (price < 0) { + throw RangeError('Cannot create product ' + + this.name + ' with a negative price'); + } +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +var cheese = new Food('feta', 5); +var fun = new Toy('robot', 40); +</pre> + +<h3 id="call_gebruiken_om_een_anonieme_functie_aan_te_roepen"><code>call</code> gebruiken om een anonieme functie aan te roepen</h3> + +<p>In dit voorbeeld hebben we een anonieme functie, en gebruiken we <code>call</code> om deze aan te roepen voor elk object in een array. Het voornaamste doel van de anonieme functie is het toevoegen van een print functie aan elk object in de array. Het object meegeven als <code>this</code> waarde is niet strict noodzakelijk, maar laat wel de werking zien.</p> + +<pre class="brush: js">var animals = [ + { species: 'Lion', name: 'King' }, + { species: 'Whale', name: 'Fail' } +]; + +for (var i = 0; i < animals.length; i++) { + (function(i) { + this.print = function() { + console.log('#' + i + ' ' + this.species + + ': ' + this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="Call_gebruiken_om_een_functie_aan_te_roepen_en_een_context_te_geven_aan_'this'.">Call gebruiken om een functie aan te roepen en een context te geven aan '<code>this</code>'.</h3> + +<p>In het onderstaande voorbeeld zal de waarde van <code>this</code> gebonden zijn aan het object <code>obj</code> wanneer we <code>greet</code> aanroepen.</p> + +<pre class="brush: js">function greet() { + var reply = [this.person, 'is An Awesome', this.role].join(' '); + console.log(reply); +} + +var obj = { + person: 'Douglas Crockford', role: 'Javascript Developer' +}; + +greet.call(obj); // Douglas Crockford Is An Awesome Javascript Developer +</pre> + +<h3 id="Call_gebruiken_om_een_functie_aan_te_roepen_zonder_eerste_argument">Call gebruiken om een functie aan te roepen zonder eerste argument</h3> + +<p>In het onderstaande voorbeeld roepen we de <code>display</code> functie aan zonder het eerste argument mee te geven. Als het eerste argument niet is meegegeven zal <code>this</code> worden gebonden aan het globale object.</p> + +<pre class="brush: js"><code>var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // sData value is Wisen</code></pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> De waarde van <code>this</code> is <code>undefined</code> in strict mode. Zie onderstaand.</p> +</div> + +<pre class="brush: js"><code>'use strict'; + +var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // Cannot read the property of 'sData' of undefined</code></pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiele definitie. Geimplementeerd in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome voor Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introductie voor Object Georienteerd JavaScript</a></p> + </li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/function/index.html b/files/nl/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..9cb0571d13 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,236 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> object. In JavaScript every function is actually a <code>Function</code> object.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p> + +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p> + +<div class="note"> +<p><strong>Note:</strong> Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p> +</div> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> + +<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> + +<p>The following code creates a <code>Function</code> object that takes two arguments.</p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function('a', 'b', 'return a + b'); + +// Call the function +adder(2, 6); +// > 8 +</pre> + +<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> + +<h3 id="A_recursive_shortcut_to_massively_modify_the_DOM">A recursive shortcut to massively modify the DOM</h3> + +<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example - a recursive shortcut to massively modify the DOM</title> +<script type="text/javascript"> +var domQuery = (function() { + var aDOMFunc = [ + Element.prototype.removeAttribute, + Element.prototype.setAttribute, + CSSStyleDeclaration.prototype.removeProperty, + CSSStyleDeclaration.prototype.setProperty + ]; + + function setSomething(bStyle, sProp, sVal) { + var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], + aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), + aNodeList = bStyle ? this.cssNodes : this.nodes; + + if (bSet && bStyle) { aArgs.push(''); } + for ( + var nItem = 0, nLen = this.nodes.length; + nItem < nLen; + fAction.apply(aNodeList[nItem++], aArgs) + ); + this.follow = setSomething.caller; + return this; + } + + function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } + function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } + function getSelectors() { return this.selectors; }; + function getNodes() { return this.nodes; }; + + return (function(sSelectors) { + var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); + oQuery.selectors = sSelectors; + oQuery.nodes = document.querySelectorAll(sSelectors); + oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); + oQuery.attributes = setAttribs; + oQuery.inlineStyle = setStyles; + oQuery.follow = getNodes; + oQuery.toString = getSelectors; + oQuery.valueOf = getNodes; + return oQuery; + }); +})(); +</script> +</head> + +<body> + +<div class="testClass">Lorem ipsum</div> +<p>Some text</p> +<div class="testClass">dolor sit amet</div> + +<script type="text/javascript"> +domQuery('.testClass') + .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') + .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); +</script> +</body> + +</html> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/index.html b/files/nl/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..7395446f35 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/index.html @@ -0,0 +1,183 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Objects + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_(by_category)">Standard objects (by category)</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}} {{experimental_inline}}</li> + <li>{{jsxref("Set")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}} {{experimental_inline}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline}}</li> + <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/nl/web/javascript/reference/global_objects/isfinite/index.html b/files/nl/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..eaee2238aa --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,95 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>De globale functie <code><strong>isFinite()</strong></code> bepaalt of de doorgegeven waarde een eindig getal is. Wanneer nodig wordt de parameter eerst omgezet naar een getal.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox">isFinite(<em>testValue</em>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>testValue</code></dt> + <dd>De waarde die op eindigheid wordt getest.</dd> +</dl> + +<h3 id="Retourwaarde">Retourwaarde</h3> + +<p><strong><code>false</code></strong> als de waarde positief is of negatief {{jsxref("Infinity")}} of {{jsxref("NaN")}}; anders, <strong><code>true</code></strong>.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><code>isFinite</code> is een top-levelfunctie en is niet geassocieerd met een object.</p> + +<p>Deze functie is te gebruiken om te bepalen of een getal eindig is. De functie <code>isFinite</code> controleert het getal in het argument. Als het argument <code>NaN</code> is, positief oneindig, of negatief oneindig, geeft deze methode <code>false</code> terug; anders geeft deze <code>true</code> terug.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush: js">isFinite(Infinity); // false +isFinite(NaN); // false +isFinite(-Infinity); // false + +isFinite(0); // true +isFinite(2e64); // true +isFinite(910); // true + +isFinite(null); // true, met het robuustere Number.isFinite(null) zou + // deze waarde <code>false</code> zijn geweest. + +isFinite('0'); // true, met het robuustere Number.isFinite("0") zou + // deze waarde <code>false</code> zijn geweest. +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiële definitie.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel op deze pagina wordt uit gestructureerde gegevens gegenereerd. Als u aan de gegevens wilt bijdragen, bekijk dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("javascript.builtins.isFinite")}}</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/null/index.html b/files/nl/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..4a5abdaa2d --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,124 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>De waarde <code>null</code> representeert het moedwillig weglaten, of de bedoelde afwezigheid van welk object of waarde dan ook. Het is een van JavaScript's {{Glossary("Primitive", "primitive values")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>null </code></pre> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De waarde <code>null</code> wordt letterlijk geschreven als <code>null</code> (het is geen idenfifier voor een eigenschap van de global object zoals {{jsxref("Global_Objects/undefined","undefined")}} wel kan zijn). In APIs, wordt <code>null</code> vaak verkregen op plekken waar een object mag worden verwacht, maar waar tegelijk geen object relevant is . Wanneer op null of undefined wordt gecontroleerd, wees dan bewust van de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">verschillen tussen equality (==) en identity (===) operators</a> (type-conversie wordt via de eerste bereikt).</p> + +<pre class="brush: js">// foo does not exist. It is not defined and has never been initialized: +> foo +"ReferenceError: foo is not defined" + +// foo is known to exist now but it has no type or value: +> var foo = null; foo +"null" +</pre> + +<h3 id="Verschil_tussen_null_en_undefined">Verschil tussen <code>null</code> en <code> undefined</code></h3> + +<pre class="brush: js">typeof null // object (bug in ECMAScript, should be null) +typeof undefined // undefined +null === undefined // false +null == undefined // true +</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>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("NaN")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/object/index.html b/files/nl/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..52aaef2901 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,226 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> + <dt><code>value</code></dt> + <dd>Any value.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("null")}} or {{jsxref("undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p> + +<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properties_of_the_Object_constructor">Properties of the <code>Object</code> constructor</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Has a value of 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Allows the addition of properties to all objects of type Object.</dd> +</dl> + +<h2 id="Methods_of_the_Object_constructor">Methods of the <code>Object</code> constructor</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Creates a new object by copying the values of all enumerable own properties from one or more source objects to a target object.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Creates a new object with the specified prototype object and properties.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Adds the named property described by a given descriptor to an object.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Adds the named properties described by the given descriptors to an object.</dd> + <dt>{{jsxref("Object.entries()")}} {{experimental_inline}}</dt> + <dd>Returns an array of a given object's own enumerable property <code>[key, value]</code> pairs.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Compares if two values are distinguishable (ie. the same)</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable properties.</dd> + <dt>{{jsxref("Object.observe()")}} {{non-standard_inline}}</dt> + <dd>Asynchronously observes changes to an object.</dd> + <dt>{{jsxref("Object.getNotifier()")}} {{non-standard_inline}}</dt> + <dd>Get a notifier with which to create object changes manually.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property)</dd> + <dt>{{jsxref("Object.unobserve()")}} {{non-standard_inline}}</dt> + <dd>Unobserves changes to an object.</dd> + <dt>{{jsxref("Object.values()")}} {{experimental_inline}}</dt> + <dd>Returns an array of a given object's own enumerable values.</dd> +</dl> + +<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries and Object.values.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> 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 new file mode 100644 index 0000000000..9f3672466b --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/object/prototype/index.html @@ -0,0 +1,240 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<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/parsefloat/index.html b/files/nl/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..e88af6c4b3 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,168 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/parseFloat +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<p>De <code><strong>parseFloat()</strong></code> functie verwerkt een string argument en geeft een floating point nummer terug.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">parseFloat(<em>string</em>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Een string waarde die je wilt verwerken.</dd> +</dl> + +<h2 id="Omschrijving">Omschrijving</h2> + +<p><code>parseFloat</code> is een top-level functie en is niet verbonden met welk object dan ook.</p> + +<p><code>parseFloat</code> verwerkt het argument , een string, en geeft een floating point nummer terug. Als het een ander karakter tegenkomt dan een teken (+ or -), nummerieke waarde (0-9), een decimale punt , of een exponent, dan geeft het de waarde tot dat karakter terug en negeert dat karakter en alle daaropvolgende karakters. Spaties aan het begin en einde van de string zijn toegestaan.</p> + +<p>Als het eerste karakter niet in een nummer kan worden veranderd zal <code>parseFloat</code> het resultaat NaN opleveren.</p> + +<p>Voor wiskundige doeleinden, de waarde <code>NaN</code> is geen nummer met een radix. Je kunt de functie {{jsxref("isNaN")}} gebruiken om vast te stellen of het resultaat van <code>parseFloat</code> <code>NaN is</code>. Als NaN in een wiskundige operatie wordt gebruikt is het resultaat ook NaN.</p> + +<p><code>parseFloat</code> kan ook de waarde Infinity verwerken en het resultaat is Infinity. Je kunt de functie {{jsxref("isFinite")}} gebruiken om vast te stellen of het resultaat een eindig getal is (niet <code>Infinity</code>, <code>-Infinity</code>, of <code>NaN</code>).</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="parseFloat_levert_een_nummer_op"><code>parseFloat</code> levert een nummer op</h3> + +<p>Het resultaat van de volgende voorbeelden is <strong>3.14</strong></p> + +<pre class="brush:js">parseFloat("3.14"); +parseFloat("314e-2"); +parseFloat("0.0314E+2"); +parseFloat("3.14more non-digit characters"); +</pre> + +<h3 id="parseFloat_levert_NaN_op"><code>parseFloat</code> levert NaN op</h3> + +<p>Het volgende voorbeeld heeft als resultaat NaN</p> + +<pre class="brush: js">parseFloat("FF2"); +</pre> + +<h3 id="Een_bondigere_parse_function">Een bondigere parse function</h3> + +<p>Soms is het handig om een bondigere manier te hebben om float waardes om te zetten, regular expressions helpen hierbij :</p> + +<pre class="brush: js">var filterFloat = function (value) { + if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/ + .test(value)) + return Number(value); + return NaN; +} + +console.log(filterFloat('421')); // 421 +console.log(filterFloat('-421')); // -421 +console.log(filterFloat('+421')); // 421 +console.log(filterFloat('Infinity')); // Infinity +console.log(filterFloat('1.61803398875')); // 1.61803398875 +console.log(filterFloat('421e+0')); // NaN +console.log(filterFloat('421hop')); // NaN +console.log(filterFloat('hop1.61803398875')); // NaN + +</pre> + +<p>Deze code is alleen een voorbeeld. Het accepteert geen geldige nummers zoals 1 <strong>. </strong>of <strong>. </strong>5.</p> + +<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>Eerste definitie.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compabiliteit">Browser compabiliteit</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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/index.html b/files/nl/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..a4847a7626 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,409 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript6 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>String</code></strong> global object is a constructor for strings, or a sequence of characters.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox"><code>'string text' +"string text" +"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"</code></pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox"><code>String(thing) +</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_strings">Template strings</h3> + +<p>Since ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a>:</p> + +<pre class="brush: js"><code>`hello world`</code> +`hello! + world!` +<code>`hello ${who}`</code> +<code>escape `<a>${who}</a>`</code></pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>the NULL character</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<p>NOTE: Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings, therefore, the escape sequences above work in strings created with either single or double quotes.</p> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="Description">Description</h2> + +<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' is less than ' + b); +} else if (a > b) { + console.log(a + ' is greater than ' + b); +} else { + console.log(a + ' and ' + b + ' are equal.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser without using the shim that is provided below.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<p>The following is a shim to provide support to non-supporting browsers:</p> + +<pre class="brush: js">/*globals define*/ +// Assumes all supplied String instance methods already present +// (one may use shims for these if not available) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(String).filter(function(methodName) { + // return typeof String[methodName] === 'function'; + // }); + methods = [ + 'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt', + 'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith', + 'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', + 'toLocaleUpperCase', 'localeCompare', 'match', 'search', + 'replace', 'split', 'substr', 'concat', 'slice' + ], + methodCount = methods.length, + assignStringGeneric = function(methodName) { + var method = String.prototype[methodName]; + String[methodName] = function(arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignStringGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, as although it still normally calls the underlying <code>toString()</code>, it also works for {{jsxref("null")}} and {{jsxref("undefined")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/indexof/index.html b/files/nl/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..efb0b0937f --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,200 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p>De <strong><code>indexOf()</code></strong> methode geeft de positie van het eerste voorval van <code>searchValue</code> binnen het {{jsxref("String")}} object waarop het wordt aangeroepen, waarbij begonnen wordt met zoeken vanaf <code>fromIndex</code>. Geeft -1 terug als geen voorvallen van <code>searchValue </code>gevonden worden.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>]</code>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>searchValue</code></dt> + <dd>De string om naar te zoeken.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>De index vanaf waar gezocht moet worden binnen de string. Dit kan elke integer zijn. De standaard waarde is <code>0</code>, waardoor de hele string wordt doorzocht. Als <code>fromIndex < 0</code> is wordt de hele string doorzocht. Als <code>fromIndex >= str.length</code> is wordt de string niet doorzocht en wordt -1 teruggegeven. (behalve als <code>searchValue</code> een lege string is, dan wordt <code>str.length</code> teruggegeven)</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>De index waarop de gespecificeerde waarde het eerst voorkomt in de string; <strong>-1</strong> als die niet gevonden wordt.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Karakters in een string zijn geïndexeerd van links naar rechts. De index van het eerste karakter is 0 en de index van het laatste karakter van een string genaamd <code>stringName</code> is <code>stringName.length - 1</code>.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue'); // geeft 0 terug +'Blue Whale'.indexOf('Blute'); // geeft -1 terug +'Blue Whale'.indexOf('Whale', 0); // geeft 5 terug +'Blue Whale'.indexOf('Whale', 5); // geeft 5 terug +'Blue Whale'.indexOf('', 9); // geeft 9 terug +'Blue Whale'.indexOf('', 10); // geeft 10 terug +'Blue Whale'.indexOf('', 11); // geeft 11 terug +</pre> + +<h3 id="Hoofdlettergevoeligheid">Hoofdlettergevoeligheid</h3> + +<p>De <code>indexOf()</code> methode is hoofdlettergevoelig. Het volgende voorbeeld geeft <code>-1</code> terug:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('blue'); // geeft -1 terug +</pre> + +<h3 id="Voorvallen_controleren">Voorvallen controleren</h3> + +<p>Onthoudt dat '0' niet vertaalt naar <code>true</code> en '-1' niet vertaalt naar <code>false</code>. Hierdoor moet op de volgende manier gekeken worden of een string binnen een andere string zit:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true +'Blue Whale'.indexOf('Bloe') !== -1; // false +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="indexOf()_en_lastIndexOf()_gebruiken"><code>indexOf()</code> en <code>lastIndexOf() gebruiken</code></h3> + +<p>Het volgende voorbeeld gebruikt <code>indexOf()</code> en {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} om waardes binnen de string <code>"Brave new world" </code>te vinden.</p> + +<pre class="brush: js">var anyString = 'Brave new world'; + +console.log('De index van de eerste w vanaf het begin is ' + anyString.indexOf('w')); +// logs 8 +console.log('De index van de eerste w vanaf het begin is ' + anyString.lastIndexOf('w')); +// logs 10 + +console.log('De index van "new" vanaf het begin is ' + anyString.indexOf('new')); +// logs 6 +console.log('De index van "new" vanaf het eind is ' + anyString.lastIndexOf('new')); +// logs 6 +</pre> + +<h3 id="indexOf()_en_hoofdlettergevoeligheid"><code>indexOf()</code> en hoofdlettergevoeligheid</h3> + +<p>Het volgende voorbeeld legt twee string variabelen vast. Deze variabelen bevatten dezelfde string, behalve dat de tweede string hoofdletters bevat. De eerste {{domxref("console.log()")}} methode geeft <code>19</code> terug. Omdat de <code>indexOf()</code> methode hoofdlettergevoelig is, wordt de string <code>"cheddar"</code> niet gevonden in <code>myCapString</code>, dus de tweede <code>console.log()</code> methode geeft <code>-1</code> terug.</p> + +<pre class="brush: js">var myString = 'brie, pepper jack, cheddar'; +var myCapString = 'Brie, Pepper Jack, Cheddar'; + +console.log('myString.indexOf("cheddar") geeft ' + myString.indexOf('cheddar')); +// geeft 19 +console.log('myCapString.indexOf("cheddar") geeft ' + myCapString.indexOf('cheddar')); +// geeft -1 +</pre> + +<h3 id="indexOf()_gebruiken_om_voorvallen_van_een_letter_in_een_string_te_tellen"><code>indexOf()</code> gebruiken om voorvallen van een letter in een string te tellen</h3> + +<p>In het volgende voorbeeld wordt in <code>count</code> de hoeveelheid voorvallen van <code>e</code> in de string <code>str</code> bijgehouden:</p> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; +var count = 0; +var pos = str.indexOf('e'); + +while (pos !== -1) { + count++; + pos = str.indexOf('e', pos + 1); +} + +console.log(count); // geeft 4 +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Eerste definitie.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/startswith/index.html b/files/nl/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..b183929746 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,96 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Global_Objects/String/startsWith +tags: + - Begin + - JavaScript + - Méthode + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">De <strong><code>startsWith()</code></strong> methode bepaalt of een string begint met de karakters van een bepaalde string. Deze geeft <code>true</code> of <code>false</code> terug waar nodig.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>str</var>.startsWith(<em>zoek</em><var>String</var>[, <var>positie</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>zoekString</code></dt> + <dd>De karakters om te zoeken aan het begin van de string.</dd> + <dt><code>positie</code>{{optional_inline}}</dt> + <dd>De positie in de string waar je start met zoeken naar <code>zoekString</code>; start standaard op 0.</dd> +</dl> + +<h3 id="Resultaat">Resultaat</h3> + +<p><strong><code>true</code></strong> als de karakters teruggevonden worden aan het begin van de string, anders <strong><code>false</code></strong>.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Deze methde laat je nagaan of een string begint met een andere string. Dit is hoofdletter gevoelig</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Gebruik_startsWith()">Gebruik <code>startsWith()</code></h3> + +<pre class="brush: js">//startswith +var str = 'Te nemen of te laten.'; + +console.log(str.startsWith('Te nemen')); // true +console.log(str.startsWith('te laten')); // false +console.log(str.startsWith('te laten', 12)); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Deze methode is toegevoegd aan de ECMAScript 2015 specificaties en is misschien nog niet beschikbaar in alle JavaScript implementaties. Je kan wel Polyfill <code>String.prototype.startsWith()</code> alsvolgt gebruiken</p> + +<pre class="brush: js">if (!String.prototype.startsWith) { + String.prototype.startsWith = function(search, pos) { + return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search; + }; +} +</pre> + +<p>Een meer degelijke en geoptimaliseerde Polyfill is beschikbaar <a href="https://github.com/mathiasbynens/String.prototype.startsWith">op GitHub door Mathias Bynens</a>.</p> + +<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('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Eerste definitie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.startsWith")}}</p> + +<h2 id="Meer_lezen">Meer lezen</h2> + +<ul> + <li>{{jsxref("String.prototype.endsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/nl/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..4716e5afa5 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<div>{{JSRef}}</div> + +<p>De <strong><code>toLowerCase()</code></strong> methode geeft een string terug waarbij de meegegeven string naar kleine letters is geconverteerd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre> + +<h3 id="Returnwaarde">Returnwaarde</h3> + +<p>Een nieuwe string waarbij de meegegeven string naar kleine letters is geconverteerd.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>toLowerCase()</code> methode geeft een string terug waarbij de meegegeven string naar kleine letters is geconverteerd. <code>toLowerCase()</code> past de waarde van de meegegeven string <code>str</code> niet aan.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Gebruik_van_toLowerCase()">Gebruik van <code>toLowerCase()</code></h3> + +<pre class="brush: js">console.log('ALFABET'.toLowerCase()); // 'alfabet' +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiële definitie. Geïmplementeerd in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basisondersteuning</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>Feature</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>Basisondersteuning</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/touppercase/index.html b/files/nl/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..32393e3c86 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<div>{{JSRef}}</div> + +<p>De <strong><code>toUpperCase()</code></strong> methode geeft een string terug waarbij de meegegeven string naar hoofdletters is geconverteerd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre> + +<h3 id="Returnwaarde">Returnwaarde</h3> + +<p>Een nieuwe string waarbij de meegegeven string naar hoofdletters is geconverteerd.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>toUpperCase()</code> methode geeft een string terug waarbij de meegegeven string naar hoofdletters is geconverteerd.. <code>toUpperCase()</code> past de waarde van de meegegeven string niet aan.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Gebruik_van_toUpperCase()">Gebruik van <code>toUpperCase()</code></h3> + +<pre class="brush: js">console.log('alfabet'.toUpperCase()); // 'ALFABET' +</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">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiële definitie. Geïmplementeerd in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basisondersteuning</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>Feature</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>Basisondersteuning</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/string/trim/index.html b/files/nl/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..c595279b0d --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,139 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Reference/Global_Objects/String/Trim +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +<div>{{JSRef}}</div> + +<p>De <strong><code>trim()</code></strong> methode verwijdert witruimte aan het begin en einde van een string. Witruimte betreft in deze context alle whitespace karakters (spatie, tab, no-break spatie, etc.) en alle regeleindekarakters (LF, CR, etc.).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre> + +<h3 id="Returnwaarde">Returnwaarde</h3> + +<p>Een nieuwe string waarbij de meegegeven string geen witruimte aan beide kanten meer heeft.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>trim()</code> methode geeft een string terug waarvan aan het begin en einde de witruimte is afgestript. <code>trim()</code> past de waarde van de string zelf niet aan.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Het_gebruik_van_trim()">Het gebruik van <code>trim()</code></h3> + +<p>Het volgende voorbeeld toont de string <code>'foo'</code>:</p> + +<pre class="brush: js">var orig = ' foo '; +console.log(orig.trim()); // 'foo' + +// Ander voorbeeld .trim() voor het verwijderen van witruimte aan een kant. + +var orig = 'foo '; +console.log(orig.trim()); // 'foo' +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Roep de volgende code aan voor het aanroepen van andere code, om <code>trim()</code> beschikbaar te maken als deze nog niet oorspronkelijk ondersteund werd.</p> + +<pre class="brush: js">if (!String.prototype.trim) { + String.prototype.trim = function () { + return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); + }; +} +</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">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initiële definitie. Geïmplementeerd in JavaScript 1.8.1.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<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</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basisondersteuning</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="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li> + <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/nl/web/javascript/reference/global_objects/symbool/index.html b/files/nl/web/javascript/reference/global_objects/symbool/index.html new file mode 100644 index 0000000000..f0777451c8 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/symbool/index.html @@ -0,0 +1,205 @@ +--- +title: Symbool +slug: Web/JavaScript/Reference/Global_Objects/Symbool +tags: + - ECMAScript 2015 + - JavaScript + - Klasse + - Symbool +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p>Het gegevenstype symbool is een <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Primitive">primitief gegevenstype</a>. De Symbol() functie geeft een waarde terug <em>(returns a value)</em> van het type symbool, heeft statische eigenschappen die verscheidene leden van ingebouwde objecten blootstelt, heeft statische methoden die het globale symbolregister blootstellen en vertegenwoordigd een ingebouwde objectklasse. Maar is onvolledig als een constructor, omdat het niet de "new Symbol()" syntaxis ondersteund.</p> + +<p>Elke waarde teruggekregen van Symbol() is uniek. Zo'n teruggekregen waarde kan, bijvoorbeeld, gebruikt worden als identificatiemiddel voor objecteigenschappen; het primaire doel van dit gegevenstype. Hoewel er andere use-cases zijn, zoals het beschikbaar maken van ondoorzichtige gegevenstypen of als algemeen uniek identificatiemiddel. Meer uitleg over het doel en gebruik van het symbool is te vinden in de woordenlijst.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Om een nieuw primitief symbool te creëren, schrijf je <code>Symbol()</code> met een optionele <a href="/en-US/docs/Web/CSS/string">String</a> als beschrijving:</p> + +<pre class="brush: js">let sym1 = Symbol() +let sym2 = Symbol('foo') +let sym3 = Symbol('foo') +</pre> + +<p>De bovenstaande code creëert drie nieuwe symbolen. Let er op dat <code>Symbol("foo")</code> niet de string <code>"foo"</code> omzet naar een symbool maar dat het telkens een nieuw uniek symbool creëert:</p> + +<pre class="brush: js">Symbol('foo') === Symbol('foo') // false +</pre> + +<p>De volgende syntaxis met de {{jsxref("Operators/new", "new")}} operator zal een {{jsxref("TypeError")}}: afwerpen:</p> + +<pre class="brush: js">let sym = new Symbol() // TypeError +</pre> + +<p>Dit behoed auteurs ervoor om nadrukkelijk een <code>Symbol</code> wrapper-object te creëren in plaats van een nieuwe symboolwaarde. Terwijl normaal gesproken primitieve gegevenstypen wel gemaakt kunnen worden met een wrapper-object. (Zoals: <code>new Boolean</code>, <code>new String</code> en <code>new Number</code>).</p> + +<p>Als je echt een <code>Symbol</code> wrapper-object wilt maken, kun je dit doen met de <code>Object()</code> functie:</p> + +<pre class="brush: js">let sym = Symbol('foo') +typeof sym // "symbol" +let symObj = Object(sym) +typeof symObj // "object" +</pre> + +<h3 id="Gedeelde_symbolen_in_het_globale_symboolregister">Gedeelde symbolen in het globale symboolregister</h3> + +<p>De bovenstaande syntaxis, die gebruik maakt van de <code>Symbol()</code> functie, creëert alleen niet een globaal symbool dat te gebruiken is door je gehele codebase. Om symbolen te creëren die door al je bestanden en zelfs door je <em>realms</em> (met elk hun eigen globale<em> scope</em>) te gebruiken zijn; gebruik je de methoden {{jsxref("Symbol.for()")}} en {{jsxref("Symbol.keyFor()")}}. Om, respectievelijk<strong>, </strong>symbolen in het globale symbolenregister aan te maken en terug te krijgen.</p> + +<h3 id="Symbooleigenschappen_vinden_in_objecten">Symbooleigenschappen vinden in objecten</h3> + +<p>De methode {{jsxref("Object.getOwnPropertySymbols()")}} geeft een array met symbolen terug en laat je symbooleigenschappen vinden in een opgegeven object. Let er op dat elk object geïnitialiseerd wordt zonder eigen symbooleigenschappen, dus deze array zal leeg zijn tenzij je een symbool als eigenschap hebt gegeven aan een object. </p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol">Symbol()</a></code></dt> + <dd>De <code>Symbol()</code> constructor geeft een waarde terug van het type <strong>symbol</strong>, maar is incompleet als een constructor omdat het niet de "<code>new Symbol()</code>" syntaxis ondersteund.</dd> +</dl> + +<h2 id="Static_properties">Static properties</h2> + +<dl> + <dt>{{jsxref("Symbol.asyncIterator")}}</dt> + <dd>A method that returns the default AsyncIterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of"><code>for await...of</code></a>.</dd> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>A method returning the default iterator for an object. Used by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.</dd> + <dt>{{jsxref("Symbol.matchAll")}}</dt> + <dd>A method that returns an iterator, that yields matches of the regular expression against a string. Used by {{jsxref("String.prototype.matchAll()")}}.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>A constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>A method converting an object to a primitive value.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd> +</dl> + +<h2 id="Static_methods">Static methods</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Searches for existing symbols with the given <code><var>key</var></code> and returns it if found. Otherwise a new symbol gets created in the global symbol registry with <code><var>key</var></code>.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd> +</dl> + +<h2 id="Instance_properties">Instance properties</h2> + +<dl> + <dt>{{jsxref("Symbol.prototype.description")}}</dt> + <dd>A read-only string containing the description of the symbol.</dd> +</dl> + +<h2 id="Instance_methods">Instance methods</h2> + +<dl> + <dt>{{jsxref("Symbol.prototype.toSource()")}}</dt> + <dd>Returns a string containing the source of the {{jsxref("Global_Objects/Symbol", "Symbol")}} object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> + <dd>Returns a string containing the description of the Symbol. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the {{jsxref("Symbol")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> + <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt> + <dd>Returns the primitive value of the {{jsxref("Symbol")}} object.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_typeof_operator_with_symbols">Using the typeof operator with symbols</h3> + +<p>The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Symbol_type_conversions">Symbol type conversions</h3> + +<p>Some things to note when working with type conversion of symbols.</p> + +<ul> + <li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br> + (e.g. <code>+<var>sym</var></code> or <code><var>sym</var> | 0</code>).</li> + <li>When using loose equality, <code>Object(<var>sym</var>) == <var>sym</var></code> returns <code>true</code>.</li> + <li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(<var>sym</var>)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(<var>sym</var>)</code> will throw.</li> +</ul> + +<h3 id="Symbols_and_for...in_iteration">Symbols and for...in iteration</h3> + +<p>Symbols are not enumerable in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p> + +<pre class="brush: js">let obj = {} + +obj[Symbol('a')] = 'a' +obj[Symbol.for('b')] = 'b' +obj['c'] = 'c' +obj.d = 'd' + +for (let i in obj) { + console.log(i) // logs "c" and "d" +}</pre> + +<h3 id="Symbols_and_JSON.stringify">Symbols and JSON.stringify()</h3> + +<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'}) +// '{}' +</pre> + +<p>For more details, see {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3> + +<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p> + +<pre class="brush: js">let sym = Symbol('foo') +let obj = {[sym]: 1} +obj[sym] // 1 +obj[Object(sym)] // still 1 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Symbol")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/index.html b/files/nl/web/javascript/reference/index.html new file mode 100644 index 0000000000..be6e0ebe3d --- /dev/null +++ b/files/nl/web/javascript/reference/index.html @@ -0,0 +1,50 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/klasses/index.html b/files/nl/web/javascript/reference/klasses/index.html new file mode 100644 index 0000000000..ca5210371c --- /dev/null +++ b/files/nl/web/javascript/reference/klasses/index.html @@ -0,0 +1,252 @@ +--- +title: Klassen +slug: Web/JavaScript/Reference/Klasses +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>JavaScript classes zijn nieuw in ECMAScript 6. De class syntax is <strong>geen</strong> object-oriented inheritance model in JavaScript. JavaScript classes brengen een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten.</p> + +<h2 id="Classes_definiëren">Classes definiëren</h2> + +<p>Classes zijn eigenlijk <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>, net zoals je <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> en <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a> kan definiëren, de class syntax heeft twee componenten: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressies</a> en <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declaraties</a>.</p> + +<h3 id="Class_declaraties">Class declaraties</h3> + +<p>Eén manier om een class te definiëren is door gebruik te maken van <strong>class declaration</strong>. Om een klasse te declareren, gebruik je het <code>class</code> keyword gevolgd door de naam van de class. ("Polygon" hier).</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>Een belangrijk verschil tussen <strong>function declarations</strong> en <strong>class declarations</strong> is dat function declarations {{Glossary("Hoisting", "hoisted")}} zijn en class declarations niet. Je moet eerst je klasse declareren voor je het kan gebruiken, anders krijg je een {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError + +class Polygon {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>Een <strong>class expression</strong> is een andere manier om een class te definiëren. Class expressions kunnen named of unnamed zijn. De naam gegeven aan een named class expression is local aan de body van de class.</p> + +<pre class="brush: js">// unnamed +var Polygon = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; + +// named +var Polygon = class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +</pre> + +<h2 id="Class_body_en_method_definitions">Class body en method definitions</h2> + +<p>De body van een class is het stuk tussen de curly brackets <code>{}</code>. Hier kan je class members definiëren, zoals methodes of constructors.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>De bodies van <em>class declarations</em> en <em>class expressions</em> worden uitgevoerd in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>. Constructor, static en prototype methods, getter en setter functions worden bijvoorbeeld uitgevoerd in strict mode.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>De <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> methode is een speciale methode voor het creëren en initializeren van een object voor de klasse. Er kan maar één speciale methode zijn met de naam "constructor" in een klasse. Een {{jsxref("SyntaxError")}} wordt gegooid indien de klasse meerdere <code>constructor </code>methodes heeft.</p> + +<p>Een constructor kan gebruik maken van het <code>super</code> keyword om de constructor van de parent class op te roepen.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>Zie ook <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea() + } + + calcArea() { + return this.height * this.width; + } +}</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword beschrijft een statische methode voor een klasse. Statische methodes kunnen worden opgeroepen zonder dat er een instantie gemaakt is van de klasse en kunnen ook <strong>niet</strong> opgeroepen worden wanneer er een instantie van gemaakt is. Statische methodes zijn dikwijls gebruikt als utility functions voor een applicatie.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h2 id="Sub_classing_met_extends">Sub classing met <code>extends</code></h2> + +<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword wordt gebruikt in <em>class declarations</em> of <em>class expressions</em> om een klasse aan te maken als kind van een andere klasse.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} +</pre> + +<h2 id="Sub_classing_built-in_objects">Sub classing built-in objects</h2> + +<p>TBD</p> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>Het <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword wordt gebruikt om een methode op te roepen in de parent klasse van het object.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="ES5_inheritance_syntax_en_ES6_classes_syntax_vergeleken">ES5 inheritance syntax en ES6 classes syntax vergeleken</h2> + +<p>TBD</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>TBD</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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>MS Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup></td> + <td>45</td> + <td>13</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(9.0)}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>45</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires strict mode. Non-strict mode support is behind the flag <em>Enable Experimental JavaScript</em>, disabled by default.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/operatoren/index.html b/files/nl/web/javascript/reference/operatoren/index.html new file mode 100644 index 0000000000..fc499002b4 --- /dev/null +++ b/files/nl/web/javascript/reference/operatoren/index.html @@ -0,0 +1,288 @@ +--- +title: Expressies and operators +slug: Web/JavaScript/Reference/Operatoren +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Deze documentatie bevat informatie over JavaScript operators.</p> + +<h2 id="Expressies_en_operators_per_categorie">Expressies en operators per categorie</h2> + +<p>Voor alfabetische lijst, zie sidebar.</p> + +<h3 id="Primaire_expressies">Primaire expressies</h3> + +<p>Trefwoorden en algmene expressies in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd><code>this</code> verwijst naar de context van een functie.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd><code>function</code> geeft aan dat er een functie moet worden gemaakt</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd><code>class</code> definieert een klasse.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd><code><font face="Open Sans, Arial, sans-serif">Het </font>function*</code> trefwoord definieert een generator functie expressie.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pauzeer en start een generator functie.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Doorgegeven aan een andere generator functie.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Definieert een lijst met data.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Definieert een object.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Reguliere expressie.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Datalijst omvang.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator omvang.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Groep operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressies">Left-hand-side expressies</h3> + +<p>Deze voeren een opdracht uit met een van de bovenstaande expressies.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Haalt data uit een object op<br> + (<code>object.property</code> en <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>Maakt een nieuwe constructor.</dd> + <dt>{{experimental_inline}} <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> verwijst naar het object dat werd aangeroepen door {{jsxref("Operators/new", "new")}}. </dd> + <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd><code><font face="Open Sans, Arial, sans-serif">Het </font>super</code> keywoord verwijst naar de hoofdconstructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>De spread operator stelt een expressie uit te breiden op plaatsen waar meerdere argumenten (voor de functies die opgeroepen worden) of meerdere elementen (voor Array literalen) zijn verplicht.</dd> +</dl> + +<h3 id="Optellen_en_Aftrekken">Optellen en Aftrekken</h3> + +<p>Voor optellen en aftrekken bij variabelen.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Achtervoegsel optel operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Achtervoegsel aftrek operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Voorvoegsel optel operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Voorvoegsel aftrek operator.</dd> +</dl> + +<h3 id="Unaire_operatoren">Unaire operatoren</h3> + +<p>Een unaire operatie is een operatie met slechts één operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>De <code>delete</code> operator verwijdert een object of item van een object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>De <code>void</code> operator verwijdert de returnwaarde van een expressie.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>De <code>typeof</code> operator geeft het type van het object.</dd> + <dt>We zijn bezig met vertalen van het document, maar we zijn nog niet klaar.</dt> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>De unaire plus operator zet zijn operand om naar type Number</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>De unaire negatie operator zet zijn operand om naar Number en zet hem dan om in haar tegendeel.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logische NOT operator.</dd> +</dl> + +<h3 id="Rekenkundige_operators">Rekenkundige operators</h3> + +<p>Rekenkundige operators accepteren numerieke waarden (letterlijke waarden of variablen) als hun operand en retourneren een enkele numerieke waarde.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Additie operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtractie operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Divisie operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplicatie operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Rest operator.</dd> +</dl> + +<dl> + <dt>{{experimental_inline}} {{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponent operator.</dd> +</dl> + +<h3 id="Relationele_operators">Relationele operators</h3> + +<p>Een relationele operator vergelijkt zijn operanden en retourneert een Boolean gebaseerd op de uitkomst van de vergelijking.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>De <code>in</code> operator bepaalt of een object een zekere eigenschap heeft.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>De <code>instanceof</code> operator bepaalt of een variable een instantie is van een bepaald type object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Minder dan operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Groter dan operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Minder dan of gelijk aan operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Groter dan of gelijk aan operator.</dd> +</dl> + +<h3 id="Gelijkheids_operators">Gelijkheids operators</h3> + +<p>Het resultaat van het evalueren van een gelijkheids operator geeft altijd een Boolean gebaseerd op het resultaat van de vergelijking.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Gelijkheids operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Ongelijkheids operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identiciteits operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidenticiteits operator.</dd> +</dl> + +<h3 id="Bitwijs_shift_operators">Bitwijs shift operators</h3> + +<p>Operaties die alle bits van de operand verschuiven.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwijs linker shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwijs rechter shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwijs tekenloze rechter shift operator.</dd> +</dl> + +<h3 id="Binaire_bitwijs_operators">Binaire bitwijs operators</h3> + +<p>Bitwijs operatoren behandelen hun operand als een set van 32 bits en retourneren een standaard JavaScript numerieke waarde.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwijs AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwijs OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwijs XOR.</dd> +</dl> + +<h3 id="Binaire_logische_operators">Binaire logische operators</h3> + +<p>Logische operatoren worden normaliter gebruikt met Booleans en retourneren ook een Boolean waarde.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logische AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logische OR.</dd> +</dl> + +<h3 id="Conditionele_(ternary)_operator">Conditionele (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditionele operator retourneert een of twee waarden gebaseerd op de waarde van de conditie.</p> + </dd> +</dl> + +<h3 id="Toekennings_operators">Toekennings operators</h3> + +<p>Een toekennings operator kent een waarde toe aan zijn linker operand gebaseerd op de waarde van zijn rechter operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Toekennings operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Vermenigvuldigings toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Delings toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Rest toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Additieve toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Substractieve toekenning</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Linker shift toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Rechter shift toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Tekenloze rechter shift toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwijs AND toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwijs XOR toekenning.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwijs OR toekenning.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Ontbindings toekenningen maken het mogelijk eigenschappen van een array of object toe te kennen aan letterlijke arrays of objecten. </p> + </dd> +</dl> + +<h3 id="Komma_operator">Komma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>De komma operator maakt het mogelijk meerdere expressies te evalueren in een enkele statement en retourneert het resultaat van de laatste expressie.</dd> +</dl> + +<h3 id="Niet-standaard_features">Niet-standaard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>Het <code>function</code> trefwoord kan worden gebruikt om een legacy generator functie te omschrijven binnen een expressie. Hiertoe moet de inhoud van de functie minstens 1 {{jsxref("Operators/yield", "yield")}} expressie bevatten.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>De expressie sluitings syntax is een mogelijkheid om een verkorte functie te schrijven.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/operatoren/typeof/index.html b/files/nl/web/javascript/reference/operatoren/typeof/index.html new file mode 100644 index 0000000000..e86cf0b324 --- /dev/null +++ b/files/nl/web/javascript/reference/operatoren/typeof/index.html @@ -0,0 +1,244 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operatoren/typeof +tags: + - JavaScript + - Operator + - Unair +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>De <strong><code>typeof</code>-operator</strong> geeft een string terug die het type van de ongeëvalueerde operand weergeeft.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<p>De <code>typeof</code>-operator wordt gevolgd door zijn operand:</p> + +<pre class="syntaxbox"><code>typeof <code><em>operand</em></code></code></pre> + +<h3 id="Parameters">Parameters</h3> + +<p><code><em>operand</em></code> is een uitdrukking die het object of de {{Glossary("Primitive", "primitief")}} voorstelt waarvan het type moet worden teruggegeven.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De volgende tabel bevat de mogelijke waarden die <code>typeof</code> kan teruggeven. Voor meer informatie over types of primitieven, zie pagina <a href="/nl/docs/Web/JavaScript/Data_structures">datastructuren in Javascript</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Resultaat</th> + </tr> + </thead> + <tbody> + <tr> + <td>Undefined</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>Null</td> + <td><code>"object" </code>(see below)</td> + </tr> + <tr> + <td>Boolean</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>Number</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>String</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>Symbol (nieuw in ECMAScript 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>Host object (voorzien door de JS omgeving)</td> + <td><em>Implementatie-afhankelijk</em></td> + </tr> + <tr> + <td>Function object (implementeert [[Call]] in termen van ECMA-262)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Elk ander object</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<pre class="brush:js">// Nummers +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Ondanks dat het "Not-A-Number" is +typeof Number(1) === 'number'; // maar gebruik deze manier nooit! + + +// Strings +typeof "" === 'string'; +typeof "bla" === 'string'; +typeof (typeof 1) === 'string'; // typeof geeft altijd een string terug +typeof String("abc") === 'string'; // maar gebruik deze manier nooit! + + +// Booleans +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(true) === 'boolean'; // maar gebruik deze manier nooit! + + +// Symbolen +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Ongedefinieerd +typeof undefined === 'undefined'; +typeof declaredButUndefinedVariable === 'undefined'; +typeof undeclaredVariable === 'undefined'; + + +// Objecten +typeof {a:1} === 'object'; + +// gebruik <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> of Object.prototype.toString.call +// om het verschil aan te geven tussen normale objecten en +// arrays (rijen). +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; + + +// Het volgende is verwarrend. Niet gebruiken! +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String("abc") === 'object'; + + +// Functies +typeof function(){} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// Dit geldt sinds het ontstaan van JavaScript +typeof null === 'object'; +</pre> + +<p>In de oorspronkelijke implementatie van JavaScript werden JavaScript-waarden gerepresenteerd met een type-label en een waarde. Het type-label voor de meeste objecten was 0. <code>null</code> werd voorgesteld als de NULL-pointer (0x00 in de meeste platformen). Daarom had null het type-label 0, wat de foute <code>typeof</code> teruggeefwaarde verklaart. (<a href="http://www.2ality.com/2013/10/typeof-null.html">referentie</a>)</p> + +<p>Een oplossing (via een opt-in) werd voorgesteld voor ECMAScript, maar die <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">werd afgekeurd</a>. Anders zou het er als volgt hebben uitgezien: <code>typeof null === 'null'</code>.</p> + +<h3 id="De_new-operator_gebruiken">De <code>new</code>-operator gebruiken</h3> + +<pre class="brush:js">// Alle constructorfuncties die worden geïnstantieerd met het +// 'new'-sleutelwoord, zullen altijd typeof 'object' zijn. +var str = new String('String'); +var num = new Number(100); + +typeof str; // Geeft 'object' terug +typeof num; // Geeft 'object' terug + +// Maar er is een uitzondering in het geval van de functieconstructor van JavaScript. + +var func = new Function(); + +typeof func; // Geeft 'function' terug +</pre> + +<h3 id="Reguliere_uitdrukkingen">Reguliere uitdrukkingen</h3> + +<p>Aanroepbare reguliere uitdrukkingen waren een niet-standaard toevoeging in sommige browsers.</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Niet comform aan ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ Conform aan ECMAScript 5.1 +</pre> + +<h3 id="Temporal_Dead_Zone-fouten">Temporal Dead Zone-fouten</h3> + +<p>Voor ECMAScript 2015 gaf <code>typeof</code> altijd gegarandeerd een string terug voor elke operand waarmee het was voorzien. Maar met de toevoeging van niet-gehoiste, blokgekaderde <code><a href="/nl/docs/Web/JavaScript/Reference/Statements/let">let</a></code> en <code><a href="/nl/docs/Web/JavaScript/Reference/Statements/const">const</a></code> ontstaat er een <code><a href="/nl/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code> als <code>typeof</code> op <code>let</code>- en <code>const</code>-variabelen wordt gebruikt voordat ze zijn benoemd. Dit staat in contrast met onbenoemde variabelen, waarvoor <code>typeof</code> 'undefined' teruggeeft. Blokgekaderde variabelen zijn in een "<a href="/nl/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">temporal dead zone</a>" vanaf het begin van het blok totdat de intialisatie is verwerkt, waarin een fout ontstaat als ze worden benaderd.</p> + +<pre class="brush: js">typeof onbenoemdeVariabele === 'undefined'; +typeof nieuweLetVariabele; let nieuweLetVariabele; // ReferenceError +typeof nieuweConstVariabele; const nieuweConstVariabele = 'hallo'; // ReferenceError +</pre> + +<h3 id="Uitzonderingen">Uitzonderingen</h3> + +<p>Alle huidige browsers onthullen een niet-standaard hostobject {{domxref("document.all")}} met type u<code>ndefined</code>.</p> + +<pre class="brush:js">typeof document.all === 'undefined'; +</pre> + +<p>Hoewel de specificatie aangepaste type-labels toestaat voor niet-standaard exotische objecten, vereist het dat die type-labels verschillen van de ingebouwde. Dat <code>document.all</code> een type-label <code>undefined</code> heeft moet worden geclassificeerd als een uitzonderlijke overtreding van de regels.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Oorspronkelijke definitie. Geïmplementeerd in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div class="hidden">https://github.com/mdn/browser-compat-data en stuur ons een pull request.</div> + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="IE-specifieke_opmerkingen">IE-specifieke opmerkingen</h2> + +<p>In IE 6, 7, en 8 zijn een groot aantal host objecten objecten en geen functions. bijvoorbeeld:</p> + +<pre class="brush: js">typeof alert === 'object'</pre> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><code><a href="/nl/docs/Web/JavaScript/Reference/Operators/instanceof" title="/nl/docs/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Waarom typeof niet meer "veilig" is</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/statements/export/index.html b/files/nl/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..b08808c693 --- /dev/null +++ b/files/nl/web/javascript/reference/statements/export/index.html @@ -0,0 +1,155 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Het <strong><code>export</code></strong> statement wordt gebruikt bij het maken van JavaScript modules om functies, objecten of primitieve waarden te exporteren van de module zodat deze gebruikt kunnen worden door andere programmas met het {{jsxref("Statements/import", "import")}} statement.</p> + +<p>Geëxporteerde modules worden altijd uitgevoerd in {{jsxref("Strict_mode","strict mode")}}, ongeacht of dat is aangegeven. Het export-statement kan niet gebruikt worden in<em> </em>ingevoegde scripts.</p> + +<div class="note"> +<p>Deze functie is momenteel niet geïmplementeerd in Internet Explorer, Android webview en Samsung Internet. Het is wel geïmplementeerd in 'transpilers' zoals de <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> of <a href="https://github.com/rollup/rollup">Rollup</a>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js line-numbers language-js">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var, function +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const +<code class="language-js">export function FunctionName() {...} +export class ClassName {...}</code> + +export default <em>expression</em>; +export default function (…) { … } // also class, function* +export default function name1(…) { … } // also class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +<code class="language-js">export { default } from …;</code></pre> + +<p> </p> + +<dl> + <dt><code>nameN</code></dt> + <dd>Identificator die geëxporteerd moet worden (zodat het geïmporteerd kan worden via {{jsxref("Statements/import", "import")}} in een ander script).</dd> +</dl> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>Er zijn 2 verschillende types van export: <strong>named </strong>en <strong>default</strong>. Er kunnen meerdere <em>named exports</em> per module bestaan, maar slechts een <em>default export</em>. Elk type komt overeen met een van de bovenstaande syntaxen.</p> + +<ul> + <li>Genoemde exports (named exports): + <pre class="brush: js">// exporteert een eerder gedeclareerde functie +export { myFunction }; + +// exporteert een constante +export const foo = Math.sqrt(2);</pre> + </li> + <li>Standaard exports (default exports) (function): + <pre class="brush: js">export default function() {} </pre> + </li> + <li>Standaard exports (default exports) (class): + <pre class="brush: js">export default class {} </pre> + </li> +</ul> + +<p>Genoemde exports zijn handig om verschillende waardes te exporteren. Tijdens de import is het verplicht om dezelfde naam als het overeenkomende object te gebruiken.</p> + +<p>Maar een standaard export kan geïmporteerd worden met enige andere naam, bijvoorbeeld:</p> + +<pre class="syntaxbox">let k; export default k = 12; // in bestand test.js + +import m from './test' // let op dat we de vrijheid hebben om import m te gebruiken in plaats van import k, omdat k een default export is. + +console.log(m); // Zal '12' in de console laten zien +</pre> + +<p>Er kan slechts 1 standaard export zijn.</p> + +<p>De volgende syntax exporteert geen standaard export van de geïmporteerde module:</p> + +<pre>export * from …;</pre> + +<p>Gebruik de volgende syntax als de standaard export nodig is:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">export {default} from 'mod';</code></pre> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Genoemde_(named)_exports_gebruiken">Genoemde (named) exports gebruiken</h3> + +<p>In de module zouden we de volgende code kunnen gebruiken:</p> + +<pre class="brush: js">// module "my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +export { cube, foo }; +</pre> + +<p>Op deze manier zouden we in een ander script deze code kunnen hebben:</p> + +<pre class="brush: js">import { cube, foo } from 'my-module'; +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="De_standaard_(default)_export_gebruiken">De standaard (default) export gebruiken</h3> + +<p>Als we een enkele waarde willen exporteren of willen terugvallen op een waarde voor onze module zouden we een standaard (default) export kunnen gebruiken:</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Op die manier zal het vanzelfsprekend zijn om in een ander script de standaard (default) export te importeren:</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<p>Merk op dat het niet mogelijk is om <code>var</code>, <code>let</code> of <code>const</code> te gebruiken met <code>export default</code>.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiële definitie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div class="hidden">De compatibiliteitstabel op deze pagina is gegenereerd van gestructureerde data. Indien u wenst bij te dragen aan deze data, bekijk dan <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Bekijk_ook">Bekijk ook</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/statements/index.html b/files/nl/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..af37d7c195 --- /dev/null +++ b/files/nl/web/javascript/reference/statements/index.html @@ -0,0 +1,149 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Declares an async function with the specified parameters.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/nl/web/javascript/reference/template_literals/index.html b/files/nl/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..ed698025ba --- /dev/null +++ b/files/nl/web/javascript/reference/template_literals/index.html @@ -0,0 +1,254 @@ +--- +title: Template literals +slug: Web/JavaScript/Reference/Template_literals +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p><em>Template literals </em>zijn strings met daar binnengesloten een expressie. Ze zijn te gebruiken met meerdere regels, en ook met <em>string interpolation</em>, ook een kenmerk van Javascript. Ze werden in eerdere versies dan ES2015 ook wel "template strings" genoemd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">`string text` + +`string text line 1 + string text line 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text` +</pre> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p><em>Template literals</em> beginnen en eindigen met een <em>back tick</em>, het accent grave symbool (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) in plaats van de gewone aanhalingstekens (" ") of apostrof (' '). <em>Template literals</em> kunnen bestaan uit <em>placeholders</em>. Deze worden aangegeven met een dollar-teken en vervolgens accolades (<code>${expression}</code>). De expressie en tekst tussen de accolades worden doorgegeven aan een functie. The default functie plaatst alle delen achter elkaar. Als er een expressie voor de <em>template literal</em> staat, wordt de template string een <em>tagged template literal genoemd</em>. In dat geval wordt de expressie binnen de <em>template literal</em> doorgegeven aan de expressie (meestal een functie) zodat de template literal nog verder aangepast kan worden voordat de literal wordt weergegeven of doorgegeven.</p> + +<pre class="brush: js"><code>let value = dummy`Ik ben ${name} en ik ben ${age} jaar`; + +function dummy() { + let str = ""; + strings.forEach((string, i) => { + str += string + values[i]; + }); + return str; +} +</code></pre> + +<p>Om een <em>back-tick</em> in een template literal te gebruiken, moet er een backslash (<strong>\</strong>) voor de <em>back-tick</em> gebruikt worden (<em>escaping</em>).</p> + +<pre class="brush: js">`\`` === '`' // --> true</pre> + +<h3 id="Meerdere_regels">Meerdere regels</h3> + +<p>Any new line characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following syntax in order to get multi-line strings:</p> + +<p>Wordt binnen de template literal een nieuwe regel begonnen, dan maakt die regelopvoer deel uit van de template literal. Dit is anders dan met een gewone string; daar moet '\n' gebruikt worden om een string over meerdere regels toe te passen:</p> + +<pre class="brush: js">console.log('string text line 1\n' + +'string text line 2'); +// "string text line 1 +// string text line 2"</pre> + +<p>Bij een template literal kan '\n' weggelaten worden:</p> + +<pre class="brush: js">console.log(`string text line 1 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h3 id="Expression_interpolation">Expression interpolation</h3> + +<p>Als er gerekend moet worden binnen een normale string, moet dat op de volgende manier gecodeerd worden:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); +// "Fifteen is 15 and +// not 20."</pre> + +<p>Met een template literal hoeft dat niet; de expressie kan tussen de accolades gezet worden. Dat verbetert de leesbaarheid:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log(`Fifteen is ${a + b} and +not ${2 * a + b}.`); +// "Fifteen is 15 and +// not 20."</pre> + +<h3 id="Nesting_templates">Nesting templates</h3> + +<p>Soms kan de leebaarheid vergroot worden door <em>template literals</em> binnen een andere <em>template literal</em> te gebruiken (nesting). Met andere woorden, binnen de <code>${ }</code> mag ook weer een <em>template literal</em>, voorzien van <em>back-ticks</em> gebruikt worden. Bijvoorbeeld:</p> + +<p>In ES5:</p> + +<pre class="brush: js">var classes = 'header' +classes += (isLargeScreen() ? + '' : item.isCollapsed ? + ' icon-expander' : ' icon-collapser'); +</pre> + +<p>In ES2015 met <em>template literals</em>, zonder <em>nesting</em>:</p> + +<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' : + (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre> + +<p>In ES2015 nu met <em>nested template literals</em>:</p> + +<pre class="brush: js">const classes = `header $<strong>{</strong> isLargeScreen() ? '' : + `icon-${item.isCollapsed ? 'expander' : 'collapser'}`<strong> </strong><strong>}`</strong>;</pre> + +<h3 id="Tagged_template_literals">Tagged template literals</h3> + +<p>Een geavanceerde vorm van template literals zijn de <em>tagged</em> template literals. Hiermee kan de template literal verder gemanipuleerd worden in een functie. De eerste parameter van de <em>tag </em>functie is een array met strings. De volgende parameters zijn gerelateerd aan de expressie. Uiteindelijk kan de de geretourneerde string compleet aangepast worden. De naam van de tag functie kan net zoals bij gewone functies, vrij gekozen worden:</p> + +<pre class="brush: js">var person = 'Mike'; +var age = 28; + +function myTag(strings, personExp, ageExp) { + + var str0 = strings[0]; // "that " + var str1 = strings[1]; // " is a " + + // There is technically a string after + // the final expression (in our example), + // but it is empty (""), so disregard. + // var str2 = strings[2]; + + var ageStr; + if (ageExp > 99){ + ageStr = 'centenarian'; + } else { + ageStr = 'youngster'; + } + + return str0 + personExp + str1 + ageStr; + +} + +var output = myTag`that ${ person } is a ${ age }`; + +console.log(output); +// that Mike is a youngster</pre> + +<p>Het is overigens niet noodzakelijk dat een tag functie weer een string retourneert:</p> + +<pre class="brush: js">function template(strings, ...keys) { + return (function(...values) { + var dict = values[values.length - 1] || {}; + var result = [strings[0]]; + keys.forEach(function(key, i) { + var value = Number.isInteger(key) ? values[key] : dict[key]; + result.push(value, strings[i + 1]); + }); + return result.join(''); + }); +} + +var t1Closure = template`${0}${1}${0}!`; +t1Closure('Y', 'A'); // "YAY!" +var t2Closure = template`${0} ${'foo'}!`; +t2Closure('Hello', {foo: 'World'}); // "Hello World!" +</pre> + +<h3 id="Raw_strings">Raw strings</h3> + +<p>De speciale <code>raw</code> property, een property van het eerste functie argument, maakt het mogelijk de oorspronkelijke strings te benaderen, zonder de <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">escape sequences</a>.</p> + +<pre class="brush: js">function tag(strings) { + console.log(strings.raw[0]); +} + +tag`string text line 1 \n string text line 2`; +// logs "string text line 1 \n string text line 2" , +// including the two characters '\' and 'n' +</pre> + +<p>De "String.raw()" method kan gebruikt worden om strings te maken op dezelfde manier als de standaard template function:</p> + +<pre class="brush: js">var str = String.raw`Hi\n${2+3}!`; +// "Hi\n5!" + +str.length; +// 6 + +str.split('').join(','); +// "H,i,\,n,5,!" +</pre> + +<h3 id="Tagged_template_literals_and_escape_sequences">Tagged template literals and escape sequences</h3> + +<p>Volgens de ES2016 spec, <em>tagged template literals</em> conformeren zich tot de volgende escape reeksen:</p> + +<ul> + <li>Unicode escapes beginnen met "\u", bijvoorbeeld <code>\u00A9</code></li> + <li>Unicode code point escapes; hier wordt "\u{}" gebruikt, bijvoorbeeld \<code>u{2F804}</code></li> + <li>Hexadecimal escapes beginnen met "\x", bijvoorbeeld <code>\xA9</code></li> + <li>Octal literal escapes beginnen met "\" en een of meerdere getallen, bijvoorbeeld \251</li> +</ul> + +<p>Dit kan soms problemen geven:</p> + +<pre class="brush: js">latex`\unicode` +// Throws in older ECMAScript versions (ES2016 and earlier) +// SyntaxError: malformed Unicode character escape sequence</pre> + +<p>Tagged template literals zou andere taal elementen moeten toestaan, bijvoorbeeld <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSLs</a> of <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a> waar andere escape reeksten normaal zijn. Het ECMAScript voorstel <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (stage 4, voor de ECMAScript 2018 standaard) zal hiermee rekening houden.</p> + +<p>Escape reeksen zullen echter nu nog een <em>undefined </em>opleveren:</p> + +<pre class="brush: js">function latex(str) { + return { "cooked": str[0], "raw": str.raw[0] } +} + +latex`\unicode` + +// { cooked: undefined, raw: "\\unicode" }</pre> + +<p>Let op dat alleen de restrictie bij <em>tagged</em> template literals wordt opgeheven, en niet bij <em>untagged</em> template literals:</p> + +<pre class="brush: js example-bad">let bad = `bad escape sequence: \unicode`;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition. Defined in several section of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several section of the specification: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td> + <td>Stage 4 draft</td> + <td>Drops escape sequence restriction from tagged template literals</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.grammar.template_literals")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("String.raw()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/nl/web/mathml/index.html b/files/nl/web/mathml/index.html new file mode 100644 index 0000000000..982ca6b2d1 --- /dev/null +++ b/files/nl/web/mathml/index.html @@ -0,0 +1,116 @@ +--- +title: MathML +slug: Web/MathML +tags: + - MathML + - Referentie + - XML +translation_of: Web/MathML +--- +<p><strong>Mathematical Markup Language</strong> (<strong>MathML</strong>) is een toepassing van <a class="mw-redirect" href="https://nl.wikipedia.org/wiki/XML" title="XML">XML</a> die gebruikt wordt om <a href="https://nl.wikipedia.org/wiki/Wiskunde" title="Wiskunde">wiskundige</a> symbolen en formules weer te geven in <a class="mw-redirect" href="https://nl.wikipedia.org/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>-documenten. Het is een aanbeveling van de wiskundige werkgroep van het <a class="mw-redirect" href="https://nl.wikipedia.org/wiki/W3C" title="W3C">W3C</a>. MathML is een opmaaktaal voor wiskunde.</p> + +<p>MathML behandelt niet alleen de presentatie, maar kan eventueel ook informatie bevatten over de<em> </em>betekenis van delen van een formule. Bekijk <a href="http://fred-wang.github.io/MozSummitMathML/index.html">deze slides van Mozilla Summit 2013</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="MathML_referenties">MathML <strong>referenties</strong></h2> + +<dl> + <dt><a href="/en-US/docs/Web/MathML/Element" title="/en-US/docs/Web/MathML/Element">MathML element referentie</a></dt> + <dd>Details over elk afzonderlijk MathML element met compatibiliteit voor desktop en mobiele browsers.</dd> + <dt><a href="/en-US/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">MathML attribuut referentie</a></dt> + <dd>Informatie over MathML attributen die het uiterlijk of gedrag van de elementen wijzigen.</dd> + <dt><a href="/en-US/docs/Web/MathML/Examples" title="/en-US/docs/Web/MathML/Examples">MathML voorbeelden</a></dt> + <dd>MathML voorbeelden om te laten zien hoe het werkt.</dd> + <dt><a href="/en-US/docs/Web/MathML/Authoring" title="/en-US/docs/Web/MathML/Authoring">Authoring MathML</a></dt> + <dd>Suggesties en tips voor het schrijven van MathML, zoals voorgestelde MathML editors en hoe deze te integreren in Web content.</dd> +</dl> + +<p><a href="/en-US/docs/tag/MathML" title="/en-US/docs/tag/CSS">Bekijk alles...</a></p> +</div> + +<div class="section"> +<h2 id="Hulp_krijgen_van_de_community">Hulp krijgen van de community</h2> + +<ul> + <li>Zie Mozilla forums...<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki gebruikt door Mozilla vrijwilligers</a></li> + <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">W3C Math Home</a></li> + <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">www-math w3.org mail archief</a></li> +</ul> + +<h2 id="Hulpmiddelen">Hulpmiddelen</h2> + +<ul> + <li><a class="external" href="http://validator.w3.org">W3C Validator</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">FireMath Firefox add-on</a></li> + <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collectie</a></li> + <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> - Javascript LaTeX naar MathML converter (<a href="http://fred-wang.github.io/TeXZilla/">live demo</a>, <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page, JS program etc</a>)</li> + <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - Converteert LaTeX documenten naar HTML+MathML Web pagina's</li> + <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - Wijzigt handgeschreven vergelijkingen naar MathML of LaTeX</li> + <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - Cross-browser JavaScript display engine wiskundigen. Gebruik <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">deze Mozilla add-on</a>, <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">deze Safari extensie</a> of deze <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey script</a> om MathJax te dwingen native MathML te gebruiken.</li> +</ul> + +<h2 id="Gerelateerde_onderwerpen">Gerelateerde onderwerpen</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></li> +</ul> +</div> +</div> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Beschikbaar met plug-in(s).</p> diff --git a/files/nl/web/progressive_web_apps/index.html b/files/nl/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..9a3af87966 --- /dev/null +++ b/files/nl/web/progressive_web_apps/index.html @@ -0,0 +1,82 @@ +--- +title: Progressive web apps +slug: Web/Progressive_web_apps +tags: + - Apps + - Modern web apps + - NeedsTranslation + - PWA + - Progressive web apps + - TopicStub +translation_of: Web/Progressive_web_apps +--- +<p class="summary">Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of docs tells you all you need to know about them.</p> + +<p class="summary"><img alt="progressive web apps community PWA logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; height: 188px; margin: 0px auto; width: 350px;"></p> + +<h2 id="PWA_advantages">PWA advantages</h2> + +<p>PWAs should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. To find out more about what these mean, read <a href="/en-US/docs/Web/Progressive_web_apps/Advantages">Progressive web app advantages</a>. To find out how to implement PWAs, consult the guides listed in the below section.</p> + +<h2 id="Core_PWA_guides">Core PWA guides</h2> + +<p>The following guides show you what need to do to implement a PWA, by examining a simple example and showing you how all the pieces work.</p> + +<ol> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction">Introduction to progressive web apps</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure">Progressive web app structure</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Making PWAs work offline with Service workers</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">How to make PWAs installable</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">How to make PWAs re-engageable using Notifications and Push</a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading">Progressive loading</a></li> +</ol> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Technology_guides">Technology guides</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a> — a lengthy guide showing how and when to use web storage, IndexedDB, and service workers.</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a> — a more in-depth guide covering the Service Worker API.</li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a> — the fundamentals of IndexedDB, explained in detail.</li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> — the Web storage API made simple.</li> + <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a> — a guide to using the App Shell coding pattern to create apps that load quickly.</li> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a> — learn the essentials behind the Web Push API.</li> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a> — web notifications in a nutshell.</li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — learn the basics of responsive design, an essential topic for modern app layout.</li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li> + <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — learn how your apps can take advantage of Add to home screen (A2HS).</li> +</ul> +</div> + +<div class="column-half"> +<h2 id="Tools">Tools</h2> + +<ul> + <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — a nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.</li> + <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — an <em>Express-like</em> microframework for easy Service Worker development.</li> + <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — a node module to generate service worker code that will precache specific resources.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li> + <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — a tiny script that makes sure your site is always there for your users.</li> + <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li> +</ul> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li> + <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell</li> + <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li> + <li><a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a> by Google</li> + <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li> + <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li> + <li><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li> + <li> + <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a></p> + </li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> diff --git a/files/nl/web/reference/api/index.html b/files/nl/web/reference/api/index.html new file mode 100644 index 0000000000..9f7b06b9f2 --- /dev/null +++ b/files/nl/web/reference/api/index.html @@ -0,0 +1,63 @@ +--- +title: WebAPI-referentie +slug: Web/Reference/API +tags: + - API + - Referentie + - Web +translation_of: Web/Reference/API +--- +<p><span class="seoSummary">Het web biedt een breed aanbod aan API’s voor het uitvoeren van verschillende nuttige taken. Deze kunnen door het gebruik van JavaScript-code worden aangeroepen en maken diverse bewerkingen mogelijk, van kleine wijzigingen aan {{domxref("window")}}- of {{domxref("element")}}-objecten tot het genereren van complexe audiovisuele effecten met behulp van API’s zoals <a href="/docs/Web/WebGL">WebGL</a> en <a href="/docs/Web_Audio_API">Webaudio</a>.</span></p> + +<p>Elke individuele interface die door webAPI’s wordt gebruikt, wordt in de <a href="/docs/Web/API">index</a> vermeld.</p> + +<p>Er is ook een <a href="/docs/Web/Reference/Events">lijst van alle beschikbare gebeurtenissen</a> in de gebeurtenissenreferentie.</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<dl> + <dt><a href="/docs/DOM">Document Object Model</a></dt> + <dd>De DOM is een API die de toegang tot en de manipulatie van een webdocument mogelijk maakt. Het model maakt manipulatie van {{domxref("Node")}} en {{domxref("Element")}} in een document mogelijk. HTML, XML en SVG verlengen deze API om toegang tot hun specifieke elementen te vergemakkelijken.</dd> + <dt>Apparaat-API’s</dt> + <dd>Deze set van API’s geeft toegang tot diverse hardwareonderdelen die open staan voor webpagina’s en -applicaties. Voorbeelden: <a href="/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>, <a href="/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>, <a href="/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a>, <a href="/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>, <a href="/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>, <a href="/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a>, <a href="/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>.</dd> + <dt>Communicatie-API’s</dt> + <dd>Deze API’s laten webpagina’s en -applicaties met elkaar en met andere apparaten communiceren. Voorbeelden: <a href="/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a>, <a href="/docs/WebAPI/Using_Web_Notifications" title="/docs/WebAPI/Using_Web_Notifications">Web Notifications</a>, <a href="/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd> + <dt id="API’s_voor_gegevensbeheer">API’s voor gegevensbeheer</dt> + <dd>Met deze API’s kunnen gebruikersgegevens worden opgeslagen en beheerd. Voorbeelden: <a href="/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> +</dl> + +<p>Naast deze voor elke webpagina beschikbare API’s bestaat er ook een set van krachtigere Mozilla-API’s die voor bevoorrechte en gecertificeerde applicaties ter beschikking staan.</p> + +<dl> + <dt>Bevoorrechte API’s</dt> + <dd>Een bevoorrechte applicatie is een geïnstalleerde applicatie waaraan de gebruiker bepaalde rechten heeft toegekend. Bevoorrechte API’s zijn bijvoorbeeld <a href="/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/docs/WebAPI/Contacts" title="WebAPI/Contacts">Contacts API</a>, <a href="/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">Device Storage API</a>, <a href="/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Browser API</a>, <a href="/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>.</dd> + <dt>Gecertificeerde API’s</dt> + <dd>Een gecertificeerde API is een low-levelapplicatie die kritieke bewerkingen uitvoert in een besturingssysteem als Firefox OS. Minder bevoorrechte applicaties werken met deze applicaties samen door gebruik te maken van <a href="/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Webactiviteiten</a>. Gecertificeerde API’s zijn o.a. de <a href="/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Gemeenschap">Gemeenschap</h2> + +<p>Sluit u aan bij de WebAPI-gemeenschap via onze mailinglijst of nieuwsgroep:</p> + +<ul> + <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">als mailinglijst</a></li> + <li><a href="news://news.mozilla.org/mozilla.dev.webapi">als nieuwsgroep</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">als Google-groep</a></li> + <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">als webfeed</a></li> +</ul> + +<p>Neem ook deel aan de livediscussies op het kanaal <a href="irc://irc.mozilla.org/webapi">#webapi</a> op <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 class="Related_Topics" id="Gerelateerde_onderwerpen">Gerelateerde onderwerpen</h2> + +<p>Deze onderwerpen kunnen ook van belang zijn:</p> + +<ul> + <li><a href="/docs/Web/API">Index van alle WebAPI-interfaces</a></li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/nl/web/reference/index.html b/files/nl/web/reference/index.html new file mode 100644 index 0000000000..3a3173ed07 --- /dev/null +++ b/files/nl/web/reference/index.html @@ -0,0 +1,27 @@ +--- +title: Referentie voor webtechnologieën +slug: Web/Reference +tags: + - Landing + - Reference + - Web +translation_of: Web/Reference +--- +<p>{{draft()}}<br> + Het open web is gebaseerd op een aantal technologieën waarover voldoende kennis nodig is om deze te kunnen gebruiken. Hieronder vindt u de koppelingen naar ons referentiemateriaal voor elke webtechnologie.</p> + +<h2 class="Documentatie" id="Webtechnologieën">Webtechnologieën</h2> + +<p>Het wordt aanbevolen al met <a href="https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web">de basis van het web</a> te zijn begonnen, hoewel dit niet strikt noodzakelijk is.</p> + +<dl> + <dt><strong><a href="/docs/Glossary/HTML">HTML</a></strong> – het web structureren</dt> + <dd>De <strong>HyperText Markup Language</strong> wordt gebruikt om op een semantische manier de inhoud (<a href="/docs/Glossary/markup">markup</a>) van een webpagina gestructureerd te omschrijven.<br> + In HTML kunt u gestructureerde documenten maken, opgebouwd uit blokken met de naam <a href="/docs/Web/HTML/Element">HTML-elementen</a>. Deze worden afgebakend door <em><a href="/docs/Glossary/Tag">tags</a></em>, geschreven met punthaakjes (<, >). Sommige elementen introduceren inhoud die direct op de pagina wordt geplaatst, andere bieden informatie over documenttekst en kunnen andere tags als sub-elementen omvatten. Uiteraard worden ze niet door browsers weergegeven, aangezien ze worden gebruikt om de inhoud van de pagina te interpreteren.<br> + <br> + <a href="/docs/Learn/HTML/Introduction_to_HTML">Inleiding tot HTML</a> | <a href="/docs/Learn/HTML">HTML leren</a> | <a href="/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/docs/Web/Guide/HTML">Ontwikkelaarsgids</a> | <a href="/docs/Web/HTML/Element">Elementreferentie</a> | <strong><a href="/docs/Web/HTML/Reference">referentie</a></strong></dd> + <dt><strong><a href="/docs/Glossary/CSS">CSS</a></strong> – het web vormgeven</dt> + <dd><strong>Cascading Style Sheets</strong> worden gebruikt om de vormgeving van een webpagina vast te leggen.<br> + <br> + <a href="/docs/Learn/CSS/Introduction_to_CSS">Inleiding tot CSS</a> | <a href="/docs/Web/Guide/CSS/Getting_started">Beginnen met CSS</a> | <a href="/Learn/CSS">CSS leren</a> | <a href="/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/docs/Web/Guide/CSS">Ontwikkelaarsgids</a> | <a href="/docs/Web/CSS/Common_CSS_Questions">Gebruikelijke CSS-vragen</a> | <strong><a href="/docs/Web/CSS/Reference">referentie</a></strong></dd> +</dl> diff --git a/files/nl/web/security/index.html b/files/nl/web/security/index.html new file mode 100644 index 0000000000..74288398ad --- /dev/null +++ b/files/nl/web/security/index.html @@ -0,0 +1,18 @@ +--- +title: Web security +slug: Web/Security +tags: + - Landing + - NeedsTranslation + - Security + - TopicStub + - Web +translation_of: Web/Security +--- +<div class="summary"> +<p>Ensuring that your website or open web application is secure is critical. Even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. <span class="seoSummary">The web security oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.</span></p> +</div> + +<p>{{LandingPageListSubpages}}</p> + +<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/nl/web/security/subresource_integrity/index.html b/files/nl/web/security/subresource_integrity/index.html new file mode 100644 index 0000000000..ab70b9782f --- /dev/null +++ b/files/nl/web/security/subresource_integrity/index.html @@ -0,0 +1,161 @@ +--- +title: Subresource Integrity +slug: Web/Security/Subresource_Integrity +tags: + - Beveiliging + - HTML + - HTTP + - Intro + - netwerken +translation_of: Web/Security/Subresource_Integrity +--- +<p><strong>Subresource Integrity</strong> (SRI) is een beveiliging dat browsers in staat stelt om bestanden (van bijvoorbeeld een CDN) te verifiëren, dat ze zijn geleverd zonder onverwachte manipulatie door een derde partij. Het werkt door het bestand te vergelijken met een cryptografische hash dat u doorgeeft.</p> + +<h2 id="Hoe_Subresource_Integrity_helpt">Hoe Subresource Integrity helpt</h2> + +<p>Het gebruik van {{Glossary("CDN", "Content Delivery Networks (CDNs)")}} om bestanden te hosten zoals scripts en stylesheets dat gedeeld zijn over meerdere websites kan positief zijn voor de snelheid en bandbreedte. Maar met CDNs bestaat er ook een risico. Als een aanvaller (hacker) de controle overneemt van de CDN, kan hij malicieuze code in de bestanden van de CDN injecteren of ze compleet vervangen. Hij kan dus ook alle websites aanvallen die de CDN gebruiken.</p> + +<p>De Subresource Integrity stelt jouw in staat om dit risico te minimaliseren, door te garanderen dat de bestanden van je Web applicatie of Web document opvraagt (van een CDN of ergens anders) geleverd zijn zonder dat een derde partij de inhoud veranderd of ingevoegd heeft.</p> + +<h2 id="Gebruik_van_Subresource_Integrity">Gebruik van Subresource Integrity</h2> + +<p>Je gebruikt de Subresource Integrity door het specifiëren van een base64-ge-encodeerd cryptografische hash van een bron (file) dat je de browser op haalt, in de waarde van de <strong>integrity</strong> attribuut van een {{HTMLElement("script")}} of {{HTMLElement("link")}} element.</p> + +<p>Een <strong>integrity</strong> value begint met minstens één string, elke string bevat een voorvoegsel wat een bepaald hash algorithme aanduid (op dit moment zijn enkel <code>sha256</code>, <code>sha384</code>, en <code>sha512</code> toegelaten) , gevolgd door een "-", en eindigt met de base64-geëncodeerde hash.</p> + +<div class="note"> +<p>Een <strong>integrity</strong> waarde mag meerdere hashes bevatten, ze worden gesplist door een spatie. Een bron zal geladen worden als het aan één van de hashes voldoet.</p> +</div> + +<p>Een voorbeeld van een <strong>integrity</strong> string met base64-encoded sha384 hash:</p> + +<pre>sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC +</pre> + +<div class="note"> +<p>Een <strong>integrity</strong> deelwaarde “hash” is een <strong><em>cryptographic</em> <em>digest</em></strong> gevormd door het toepasen van een bepaalde hash functie op een input (bijvoorbeeld, een script of stylesheet bestand). Maar het is gebruikelijk om <strong><em>hash</em></strong> te gebruiken i.p.v. <em>cryptographic</em> <em>digest</em>. Het wordt ook zo verder gebruikt in het artikel.</p> +</div> + +<h3 id="Hulpmiddellen_voor_het_genereren_van_SRI_hashes">Hulpmiddellen voor het genereren van SRI hashes</h3> + +<p>Je kan SRI hashes genereren vanaf de command-line met <strong>openssl</strong> door dit commando op te roepen:</p> + +<pre>cat <strong>FILENAME.js</strong> | openssl dgst -sha384 -binary | openssl enc -base64 -A </pre> + +<p>of met <strong>shasum</strong> met een oproep zoals deze:</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">shasum -b -a 384 <strong>FILENAME.js</strong> | awk '{ print $1 }' | xxd -r -p | base64</code></pre> + +<div class="note"> +<p><strong>Notes</strong>:</p> + +<ul> + <li>Het commando <code>xxd</code> neemt de hexadecimale uitvoer van <code>shasum</code> en zet het om in binair.</li> + <li>Het <code>awk</code> commando is nodig omdat <code>shasum</code> ook de gehashed bestandnaam zal mee doorgeven aan <code>xxd</code>. Dat kan erge gevolgen hebben, als het bestandnaam ook hex kararkters bevat — omdat <code>xxd</code> het ook zal decoderen en doorgeven aan <code>base64</code>.</li> +</ul> +</div> + +<p>Een alternatief voor de command-line, is de <strong>SRI Hash Generator</strong> (<a href="https://www.srihash.org/">https://www.srihash.org/</a> ), dit is een online hulpmiddel voor het genereren van SRI hashes.</p> + +<h3 id="Content_Security_Policy_en_Subresource_Integrity">Content Security Policy en Subresource Integrity</h3> + +<p>Je kan <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> gebruiken om je server te laten afdwingen dat bepaalde type bestanden Subresource Integrity moet gebruiken. Doe dit met {{CSP("require-sri-for")}} richtlijn in de CSP header. voorbeeld:</p> + +<pre>Content-Security-Policy: require-sri-for script;</pre> + +<p>Dit verplicht dat elk javaScript bestand een SRI moet hebben en dat deze ook geldig is.</p> + +<p>Hetzelfde kan ook voor stylesheets:</p> + +<pre>Content-Security-Policy: require-sri-for style;</pre> + +<p>Je kan ze ook voor beide <code>script</code> en <code>style</code> specifiëren.</p> + +<p> </p> + +<h3 id="Cross-Origin_Resource_Sharing_and_Subresource_Integrity">Cross-Origin Resource Sharing and Subresource Integrity</h3> + +<p>Browsers Controleren ook het resource met <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>, zo kijkt men als het gebruikte gebruikt mag worden door de opvrager. Een bestand moet dus doorgegeven worden met een <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin">Access-Control-Allow-Origin</a></code> header dat toe laat dat het bestand gedeeld word met de vragende bron. Als voorbeeld:</p> + +<pre class="line-numbers language-html"><code class="language-html">Access-Control-Allow-Origin: *</code></pre> + +<h2 id="voorbeelden">voorbeelden</h2> + +<p>In de volgende voorbeelden, neem aan dat <code id="sriSnippet">oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> de verwachte SHA-384 hash waarde is van het script <code>example-framework.js</code>, en dat er een kopie gehost is op <code>https://example.com/example-framework.js</code>.</p> + +<h3 id="Subresource_Integrity_met_het_script_element">Subresource Integrity met het script element</h3> + +<p>Je kan gebruik maken van het {{HTMLElement("script")}} element, om de browser te verwittigen dat voor de uitvoering van <code>https://example.com/example-framework.js</code> script. Het eerst moet vergelijken met de verwachte hash in de integrity attribuut.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" + integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" + crossorigin="anonymous"></script></pre> + +<div class="note"> +<p>Voor meer details over de <strong>crossorigin</strong> attribuut, zie <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS attributen</a>.</p> +</div> + +<h2 id="Hoe_browsers_Subresource_Integrity_gebruiken">Hoe browsers Subresource Integrity gebruiken</h2> + +<p>Browsers gebruiken SRI op deze manier:</p> + +<ol> + <li>Wanneer een browser een {{HTMLElement("script")}} of {{HTMLElement("link")}} element tegenkomt met een <strong>integrity</strong> attribuut, zal de browser nog voor de uitvoering van het script of het toepassen van de stijlregels. Het script of stylesheet vergelijken met de verwachte hash in de <strong>integrity</strong> attribuut.</li> + <li>Als het script of stylesheet niet de voldoet aan de verwachte waarde in de <strong>integrity</strong> attribuut, dan zal de browser het script of stylesheet blokkeren (weigeren om te voeren of toe te passen). Het zal een network error teruggeven om aan te duiden dat het ophalen van een script of stylesheet gefaald is.</li> +</ol> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Subresource Integrity')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Fetch')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<h3 id="<script_integrity>"><script integrity></h3> + +<h3 id="Sectie"><a class="local-anchor" href="https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity$edit#%3Cscript_integrity%3E"><span>Sectie</span></a></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.script.integrity")}}</p> + +<h3 id="CSP_require-sri-for">CSP: require-sri-for</h3> + +<h3 id="Sectie_2"><a class="local-anchor" href="https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity$edit#CSP_require-sri-for"><span>Sectie</span></a></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.csp.require-sri-for")}}</p> + +<p> </p> + +<p> </p> + +<h2 id="Zie_ook">Zie ook</h2> + +<p> </p> + +<ul> + <li>Content Security Policy</li> + <li>{{httpheader("Content-Security-Policy")}}</li> + <li><a href="https://frederik-braun.com/using-subresource-integrity.html" id="page-title">A CDN that can not XSS you: Using Subresource Integrity</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> diff --git a/files/nl/web/svg/attribute/font-size-adjust/index.html b/files/nl/web/svg/attribute/font-size-adjust/index.html new file mode 100644 index 0000000000..6e78784148 --- /dev/null +++ b/files/nl/web/svg/attribute/font-size-adjust/index.html @@ -0,0 +1,54 @@ +--- +title: font-size-adjust +slug: Web/SVG/Attribute/font-size-adjust +tags: + - HeeftCompatTabelNodig + - HeeftVoorbeeldNodig + - SVG + - SVG attribuut +translation_of: Web/SVG/Attribute/font-size-adjust +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribuut referentie home</a></p> + +<p>Het <code>font-size-adjust</code> attribuut stelt auteurs in staat om een aspectwaarde te specificeren voor een element dat de x-hoogte van het eerste keuze font in een vervangende font behoudt.</p> + +<p>Als een presentatie attribuut, kan het ook gebruikt worden als een property direct in een CSS stylesheet, Zie {{ cssxref("font-size-adjust","CSS font-size-adjust") }} voor verdere informatie.</p> + +<h2 id="Gebruik_context">Gebruik context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categorieën</th> + <td>Presentatie attribuut</td> + </tr> + <tr> + <th scope="row">Waarde</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | <strong>none</strong> | inherit</td> + </tr> + <tr> + <th scope="row">Animeerbaar</th> + <td>Ja</td> + </tr> + <tr> + <th scope="row">Normatief document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontSizeAdjustProperty" title="http://www.w3.org/TR/SVG11/text.html#FontSizeAdjustProperty">SVG 1.1 (2de Editie)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<h2 id="Elementen">Elementen</h2> + +<p>De volgende elementen kunnen het <code>font-size-adjust</code> attribuut gebruiken</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elementen</a> »</li> +</ul> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{ cssxref("font-size-adjust","CSS font-size-adjust") }}</li> +</ul> diff --git a/files/nl/web/svg/attribute/index.html b/files/nl/web/svg/attribute/index.html new file mode 100644 index 0000000000..5c7a5df19f --- /dev/null +++ b/files/nl/web/svg/attribute/index.html @@ -0,0 +1,481 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - Drawing + - Landing + - NeedsHelp + - NeedsTranslation + - Responsive Design + - SVG + - SVG Attribute + - SVG Reference + - TopicStub + - Vector Graphics +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> + +<p>SVG elements can be modified using attributes that specify details about exactly how the element should be handled or rendered. Below is a list of all of the attributes available in SVG along with links to reference documentation to help you learn which elements support them and how they work.</p> + +<h2 id="SVG_attributes_A_to_Z">SVG attributes A to Z</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fr") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("href") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tabindex") }}</li> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="SVG_attributes_by_category">SVG attributes by category</h2> + +<h3 id="Animation_event_attributes">Animation event attributes</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="Animation_attribute_target_attributes">Animation attribute target attributes</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Animation_value_attributes">Animation value attributes</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> + +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Core_attributes">Core attributes</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}</p> + +<h3 id="Document_event_attributes">Document event attributes</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}</p> + +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Presentation_attributes">Presentation attributes</h3> + +<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Style_attributes">Style attributes</h3> + +<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</p> + +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_attributes">XLink attributes</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">SVG Tutorial</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG interface reference</a></li> +</ul> diff --git a/files/nl/web/svg/index.html b/files/nl/web/svg/index.html new file mode 100644 index 0000000000..fcdb4471c5 --- /dev/null +++ b/files/nl/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - Graphics + - NeedsTranslation + - Reference + - SVG + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="/en-US/docs/SVG/Tutorial">Getting Started</a></strong><br> +This tutorial will help get you started using SVG.</div> + +<p><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML">XML</a>-based markup language for describing two dimensional based <a class="external" href="https://en.wikipedia.org/wiki/Vector_graphics">vector graphics</a>.</span> SVG is essentially to graphics what <a href="/en-US/docs/Web/HTML">HTML</a> is to text.</p> + +<p>SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, and <a href="/en-US/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a>.</p> + +<p>SVG was developed by the <a href="https://www.w3.org/">World Wide Web consortium(W3C) </a>since 1999.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd>Details about each SVG element.</dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd>Details about each SVG attribute.</dd> + <dt><a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd>Details about the SVG DOM API, for interaction with JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></dt> + <dd>SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to <a href="/en-US/docs/SVG_In_HTML_Introduction">enhance a regular HTML page or web application</a>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + +<h2 class="Community" id="Community">Community</h2> + +<ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Tools">Tools</h2> + +<ul> + <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Examples">Examples</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> +</ul> + +<h3 id="Animation_and_interactions">Animation and interactions</h3> + +<p>Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + +<ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of {{Glossary("SMIL")}} animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> +</ul> + +<h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + +<p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + <li><a href="http://jointjs.com">JointJS</a> (JavaScript diagramming library)</li> +</ul> +</div> +</div> diff --git a/files/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basis_transformaties/index.html new file mode 100644 index 0000000000..1d19dd9ffa --- /dev/null +++ b/files/nl/web/svg/tutorial/basis_transformaties/index.html @@ -0,0 +1,104 @@ +--- +title: Basistransformaties +slug: Web/SVG/Tutorial/Basis_Transformaties +tags: + - Gevorderd + - SVG + - SVG Handleiding + - animatie + - transformatie +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +<div>{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}</div> + +<p>Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement {{SVGElement("g")}} aan je voorstellen. Met de groep<tag>, kun je eigenschappen van een hele groep elementen ineens benoemen. Dat is overigens de enige functie van de "g". Voorbeeld:</p> + +<div id="two_blocks"> +<pre class="brush: html"><svg width="30" height="10"> + <g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> + </g> +</svg> +</pre> +</div> + +<p>{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}</p> + +<p>Transformaties voeg je eenvoudig aan het element toe met het <code>transform</code> attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.</p> + +<h2 id="Verplaatsing">Verplaatsing</h2> + +<p>Je kunt een element verplaatsen zonder de "x" en "y" positie te veranderen. Dit is handig als je de <use> gebruikt of een animatie benoemt. Hiervoor gebruik je de <code>translate()</code> functie.</p> + +<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> + <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</svg> +</pre> + +<p>In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .</p> + +<p>{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p> + +<p>Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.</p> + +<h2 id="Rotatie">Rotatie</h2> + +<p>Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de <code>rotate()</code> transformatie:</p> + +<pre class="brush: html"><svg width="31" height="31"> + <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> +</svg> +</pre> + +<p>In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes <code>rotate()</code> geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.</p> + +<p>{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}</p> + +<h2 id="Perspectief">Perspectief</h2> + +<p>Om een rechthoek in een ruit te transformeren gebruik je de <code>skewX()</code> en <code>skewY()</code> transformaties. Je moet ze apart/achtereenvolgens benoemen. Tussen de haakjes vemeld je de hoek waarin je de X of de Y as wilt vervormen ten opzichte van het origineel.</p> + +<h2 id="Schalen">Schalen</h2> + +<p><code>scale()</code> verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de <em>x </em>factor schaalt en de tweede voor de <em>y</em> factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld: <var>0.5 verkleint de x of y tot 50%. Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.</var></p> + +<h2 id="Complexe_transformaties_met_matrix()">Complexe transformaties met <code>matrix()</code></h2> + +<p>Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook de<code>matrix(a, b, c, d, e, f)</code> transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:</p> + +<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{oudeCoordinaten}} = a x_{\mathrm{nieuweCoordinaten}} + c y_{\mathrm{nieuweCoordinaten}} + e \\ y_{\mathrm{oudeCoordinaten}} = b x_{\mathrm{oudeCoordinaten}} + d y_{\mathrm{nieuweCoordinaten}} + f \end{matrix} \right. </annotation></semantics></math></p> + +<p>Zie een <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">concreet voorbeeld van de SVG transformatie documentatie</a>. Gedetailleerde informatie over de transformatiematrix vind je in <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG Aanbevelingen</a>.</p> + +<h2 id="Effect_voor_het_coördinaten_systeem">Effect voor het coördinaten systeem</h2> + +<p>Als je transformaties gebruikt, verander je het gehele coördinatensysteem van het element dat je transformeert. Dat betekent dat de elementen die je hebt gespecificeerd en hun kinderen niet langer door de oorspronkelijke coördinaten worden gevormd, maar dat die ook worden vergroot/verkleind, vervormd, verplaatst of geroteerd .</p> + +<pre class="brush: html"><svg width="100" height="100"> + <g transform="scale(2)"> + <rect width="50" height="50" /> + </g> +</svg> +</pre> + +<p>De vierkant hierboven wordt 100 bij 100 pixels. De effecten van de transformaties kunnen echter ook nog eens beïnvloed worden door het gebruik van attributen zoals <code>userSpaceOnUse</code>.</p> + +<p>{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}</p> + +<h2 id="SVG_inbedden_in_SVG">SVG inbedden in SVG</h2> + +<p>Anders dan in HTML kun je in SVG <code>svg</code> elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem toepassen (op ingebedde) elementen door een <code>viewBox</code>, <code>width</code> and <code>height</code> te benoemen. </p> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +</pre> + +<p>In het voorbeeld is de viewbox zo gedefinieerd ten opzichte van de hoogte en breedte, dat het coordinatenstelsel twee keer zo groot wordt. Het effect is gelijk die in het voorgaande voorbeeld</p> + +<p>{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}</p> + +<div>{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}</div> diff --git a/files/nl/web/svg/tutorial/index.html b/files/nl/web/svg/tutorial/index.html new file mode 100644 index 0000000000..bc313966be --- /dev/null +++ b/files/nl/web/svg/tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: SVG Tutorial +slug: Web/SVG/Tutorial +tags: + - Intermediate + - NeedsContent + - NeedsHelp + - NeedsTranslation + - NeedsUpdate + - SVG + - 'SVG:Tutorial' + - TopicStub +translation_of: Web/SVG/Tutorial +--- +<p>Scalable Vector Graphics, <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.</p> + +<p>This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at <a class="external" href="https://inkscape.org/en/learn/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>. Another good introduction to SVG is provided by the W3C's <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> + +<div class="note">The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!</div> + +<h5 id="Introducing_SVG_from_Scratch">Introducing SVG from Scratch</h5> + +<ul> + <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG Image tag</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG and CSS</a></li> +</ul> + +<p>The following topics are more advanced and hence should get their own tutorials.</p> + +<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5> + +<p>TBD</p> + +<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5> + +<p>TBD</p> + +<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5> + +<p>TBD</p> + +<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5> + +<p>TBD</p> |