diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/nl | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/nl')
341 files changed, 59458 insertions, 0 deletions
diff --git a/files/nl/_redirects.txt b/files/nl/_redirects.txt new file mode 100644 index 0000000000..ba23ea51bb --- /dev/null +++ b/files/nl/_redirects.txt @@ -0,0 +1,78 @@ +# FROM-URL TO-URL +/nl/docs/AJAX /nl/docs/Web/Guide/AJAX +/nl/docs/AJAX:Voor_Beginners /nl/docs/AJAX/Voor_Beginners +/nl/docs/CSS /nl/docs/Web/CSS +/nl/docs/CSS/Voor_Beginners /nl/docs/Web/CSS/Voor_Beginners +/nl/docs/CSS/Voor_Beginners/Selectors /nl/docs/Web/CSS/Voor_Beginners/Selectors +/nl/docs/CSS/image-rendering /nl/docs/Web/CSS/image-rendering +/nl/docs/CSS/kleur_waarde /nl/docs/Web/CSS/kleur_waarde +/nl/docs/CSS:Andere_Bronnen /nl/docs/CSS/Andere_Bronnen +/nl/docs/CSS:Voor_Beginners /nl/docs/Web/CSS/Voor_Beginners +/nl/docs/CSS:Voor_Beginners:Hoe_CSS_Werkt /nl/docs/CSS/Voor_Beginners/Hoe_CSS_Werkt +/nl/docs/CSS:Voor_Beginners:Selectors /nl/docs/Web/CSS/Voor_Beginners/Selectors +/nl/docs/CSS:Voor_Beginners:Waarom_CSS_Gebruiken /nl/docs/CSS/Voor_Beginners/Waarom_CSS_Gebruiken +/nl/docs/CSS:Voor_Beginners:Wat_is_CSS /nl/docs/CSS/Voor_Beginners/Wat_is_CSS +/nl/docs/Developer_Guide /nl/docs/Mozilla/Developer_guide +/nl/docs/Developer_Guide/Dus_je_hebt_Firefox_net_gebuild /nl/docs/Mozilla/Developer_guide/Dus_je_hebt_Firefox_net_gebuild +/nl/docs/Devmo:Documentatie_Verlanglijst /nl/docs/Devmo/Documentatie_Verlanglijst +/nl/docs/Firefox_1.5_Beta_voor_ontwikkelaars /nl/docs/Firefox_1.5_voor_ontwikkelaars +/nl/docs/HTML /nl/docs/Web/HTML +/nl/docs/HTML/Applicatie_cache_gebruiken /nl/docs/Web/HTML/Applicatie_cache_gebruiken +/nl/docs/HTML/Element /nl/docs/Web/HTML/Element +/nl/docs/HTML/Element/b /nl/docs/Web/HTML/Element/b +/nl/docs/HTML/Element/hr /nl/docs/Web/HTML/Element/hr +/nl/docs/HTML/HTML_Tags /nl/docs/Web/HTML/Element +/nl/docs/HTML/HTML_Tags/p /nl/docs/Web/HTML/Element/p +/nl/docs/HTML:Andere_Bronnen /nl/docs/HTML/Andere_Bronnen +/nl/docs/HTML:Gemeenschap /nl/docs/HTML/Gemeenschap +/nl/docs/HTML:HTML_Tags /nl/docs/Web/HTML/Element +/nl/docs/HTML:Nog_toe_te_voegen_content /nl/docs/HTML/Nog_toe_te_voegen_content +/nl/docs/Hoofdpagina /nl/docs/Web +/nl/docs/IndexedDB /nl/docs/Web/API/IndexedDB_API +/nl/docs/Introduction /nl/docs/Mozilla/Developer_guide/Introduction +/nl/docs/JavaScript /nl/docs/Web/JavaScript +/nl/docs/JavaScript/Aan_de_slag /nl/docs/Web/JavaScript/Aan_de_slag +/nl/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/nl/docs/Learn/CSS/Introduction_to_CSS/Attribuut_selectoren /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors +/nl/docs/Learn/CSS/Introduction_to_CSS/CSS_Debuggen /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS +/nl/docs/Learn/CSS/Introduction_to_CSS/Combinatoren_en_meervoudige_selectoren /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators +/nl/docs/Learn/CSS/Introduction_to_CSS/Hoe_CSS_werkt /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/nl/docs/Learn/CSS/Introduction_to_CSS/Pseudo-klassen_en_pseudo-elementen /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +/nl/docs/Learn/CSS/Introduction_to_CSS/Selectoren /en-US/docs/Learn/CSS/Building_blocks/Selectors +/nl/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +/nl/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured +/nl/docs/Learn/CSS/Introduction_to_CSS/Waarden_en_eenheden /en-US/docs/Learn/CSS/Building_blocks/Values_and_units +/nl/docs/Learn/CSS/Introduction_to_CSS/Waterval_en_overerving /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/nl/docs/Learn/CSS/Introduction_to_CSS/doosmodel /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/nl/docs/Learn/HTML/Forms/My_first_HTML_form /nl/docs/Learn/HTML/Forms/Your_first_HTML_form +/nl/docs/MDN/Contribute/Content /nl/docs/MDN/Guidelines +/nl/docs/MDN/Contribute/Content/Style_guide /nl/docs/MDN/Guidelines/Style_guide +/nl/docs/MDN/Contribute/Howto/Een_redactionele_beoordeling_maken /nl/docs/MDN/Contribute/Howto/Een_redactionele_beoordeling_geven +/nl/docs/MDN/Contribute/Structures /nl/docs/MDN/Structures +/nl/docs/MDN/Contribute/Structures/Macros /nl/docs/MDN/Structures/Macros +/nl/docs/MDN/Contribute/Tools /nl/docs/MDN/Tools +/nl/docs/MDN/Contribute/Tools/Template_editing /nl/docs/MDN/Tools/Template_editing +/nl/docs/MDN/Feedback /nl/docs/MDN/Contribute/Feedback +/nl/docs/MDN/Getting_started /nl/docs/MDN/Contribute/Getting_started +/nl/docs/MDN/Plans /nl/docs/MDN/Contribute/Processes/Plans +/nl/docs/Nog_toe_te_voegen_content /nl/docs/HTML/Nog_toe_te_voegen_content +/nl/docs/Web/Guide/CSS /en-US/docs/Learn/CSS +/nl/docs/Web/Guide/HTML /nl/docs/Learn/HTML +/nl/docs/Web/Guide/HTML/Forms /nl/docs/Learn/HTML/Forms +/nl/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /nl/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form +/nl/docs/Web/Guide/HTML/Forms/My_first_HTML_form /nl/docs/Learn/HTML/Forms/Your_first_HTML_form +/nl/docs/Web/Guide/HTML/Forms/The_native_form_widgets /nl/docs/Learn/HTML/Forms/The_native_form_widgets +/nl/docs/Web/HTML/HTML_Tags /nl/docs/Web/HTML/Element +/nl/docs/Web/HTML/HTML_Tags/abbr /nl/docs/Web/HTML/Element/abbr +/nl/docs/Web/HTML/HTML_Tags/aside /nl/docs/Web/HTML/Element/aside +/nl/docs/Web/HTML/HTML_Tags/div /nl/docs/Web/HTML/Element/div +/nl/docs/Web/HTML/HTML_Tags/figcaption /nl/docs/Web/HTML/Element/figcaption +/nl/docs/Web/HTML/HTML_Tags/html /nl/docs/Web/HTML/Element/html +/nl/docs/Web/HTML/HTML_Tags/label /nl/docs/Web/HTML/Element/label +/nl/docs/Web/HTML/HTML_Tags/marquee /nl/docs/Web/HTML/Element/marquee +/nl/docs/Web/HTML/HTML_Tags/p /nl/docs/Web/HTML/Element/p +/nl/docs/Web/JavaScript/Reference/Methods_Index /nl/docs/Web/JavaScript/Reference +/nl/docs/Web/JavaScript/Reference/Properties_Index /nl/docs/Web/JavaScript/Reference +/nl/docs/Web/WebGL /nl/docs/Web/API/WebGL_API +/nl/docs/XHTML /nl/docs/Web/HTML +/nl/docs/en /en-US/ diff --git a/files/nl/_wikihistory.json b/files/nl/_wikihistory.json new file mode 100644 index 0000000000..d08e05928d --- /dev/null +++ b/files/nl/_wikihistory.json @@ -0,0 +1,2144 @@ +{ + "Compatibiliteitstabel_voor_formulierelementen": { + "modified": "2020-07-16T22:21:43.499Z", + "contributors": [ + "coenegrachts" + ] + }, + "DOM": { + "modified": "2019-03-24T00:02:20.325Z", + "contributors": [ + "Volluta", + "teoli", + "fscholz", + "Takenbot", + "Valgor", + "Mcaruso" + ] + }, + "DOM/Storage": { + "modified": "2019-03-23T23:31:12.287Z", + "contributors": [ + "Ugoku", + "Pirokiko" + ] + }, + "Firefox_1.5_voor_ontwikkelaars": { + "modified": "2019-03-23T23:41:23.957Z", + "contributors": [ + "wbamberg", + "FrederikVds", + "Worteltje", + "Takenbot", + "Mcaruso" + ] + }, + "Gebruik_maken_van_DOM_workers": { + "modified": "2019-03-23T23:59:02.317Z", + "contributors": [ + "teoli", + "Renedx" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:12:44.503Z", + "contributors": [ + "peterbe", + "Meteor0id", + "SphinxKnight", + "wbamberg", + "tomudding", + "klez" + ] + }, + "Glossary/404": { + "modified": "2019-10-01T13:09:42.986Z", + "contributors": [ + "Meteor0id", + "NoahvdAa" + ] + }, + "Glossary/AJAX": { + "modified": "2019-03-23T22:02:52.229Z", + "contributors": [ + "ImmanuelNL", + "evelijn" + ] + }, + "Glossary/API": { + "modified": "2019-03-18T20:44:32.002Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/ARIA": { + "modified": "2019-03-23T22:02:51.022Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/ASCII": { + "modified": "2019-03-23T22:20:29.723Z", + "contributors": [ + "Dantevg" + ] + }, + "Glossary/ATAG": { + "modified": "2019-03-23T22:02:52.326Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Abstractie": { + "modified": "2019-03-23T22:03:40.233Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Adobe_Flash": { + "modified": "2019-03-23T22:03:41.199Z", + "contributors": [ + "Tonnes", + "evelijn" + ] + }, + "Glossary/Arpanet": { + "modified": "2019-03-23T22:32:37.159Z", + "contributors": [ + "VincentDerk" + ] + }, + "Glossary/Asynchroon": { + "modified": "2019-03-18T20:44:31.780Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:04:51.242Z", + "contributors": [ + "tomudding" + ] + }, + "Glossary/Blink": { + "modified": "2019-03-23T22:03:29.831Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Block": { + "modified": "2019-03-18T20:44:30.445Z", + "contributors": [ + "Sheppy" + ] + }, + "Glossary/Block/CSS": { + "modified": "2019-03-18T20:44:30.303Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/Block/Scripting": { + "modified": "2019-03-18T20:44:29.933Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/CMS": { + "modified": "2019-03-23T22:03:36.827Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:03:25.116Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Class": { + "modified": "2019-03-23T22:32:42.486Z", + "contributors": [ + "evelijn", + "VincentDerk" + ] + }, + "Glossary/Codec": { + "modified": "2019-03-23T22:03:32.173Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Constant": { + "modified": "2019-03-23T22:32:23.805Z", + "contributors": [ + "VincentDerk" + ] + }, + "Glossary/Constructor": { + "modified": "2019-03-23T22:32:37.079Z", + "contributors": [ + "VincentDerk" + ] + }, + "Glossary/Cookie": { + "modified": "2019-03-23T22:03:47.268Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/DHTML": { + "modified": "2019-03-23T22:03:25.563Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/DNS": { + "modified": "2019-10-01T13:10:07.167Z", + "contributors": [ + "Meteor0id", + "peskybracket" + ] + }, + "Glossary/ECMA": { + "modified": "2019-03-23T22:03:33.446Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/ECMAScript": { + "modified": "2019-03-23T22:03:34.181Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Element": { + "modified": "2019-03-18T21:29:41.713Z", + "contributors": [ + "ronkats" + ] + }, + "Glossary/FTP": { + "modified": "2019-03-23T22:03:32.503Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Falsy": { + "modified": "2019-03-23T22:17:59.273Z", + "contributors": [ + "bartvanderwal" + ] + }, + "Glossary/HTML": { + "modified": "2020-02-03T17:08:37.483Z", + "contributors": [ + "StephanieDeBontridder" + ] + }, + "Glossary/HTTP": { + "modified": "2020-08-25T20:26:00.410Z", + "contributors": [ + "duduindo", + "StephanieDeBontridder", + "evelijn", + "Vinno97" + ] + }, + "Glossary/Head": { + "modified": "2019-03-23T22:03:27.163Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Hoisting": { + "modified": "2019-03-23T22:32:56.402Z", + "contributors": [ + "bvgheluwe" + ] + }, + "Glossary/IRC": { + "modified": "2019-03-23T22:03:32.281Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Identifier": { + "modified": "2019-03-23T22:32:33.225Z", + "contributors": [ + "VincentDerk" + ] + }, + "Glossary/Leeg_element": { + "modified": "2019-03-23T22:03:27.940Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/MitM": { + "modified": "2019-10-01T12:49:20.352Z", + "contributors": [ + "Meteor0id", + "Tonnes" + ] + }, + "Glossary/PDF": { + "modified": "2019-03-23T22:03:31.716Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/PNG": { + "modified": "2019-03-23T22:03:32.596Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Protocol": { + "modified": "2019-03-23T22:03:33.091Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Regular_expression": { + "modified": "2019-03-23T22:32:39.691Z", + "contributors": [ + "evelijn", + "VincentDerk" + ] + }, + "Glossary/SSL_Woordenlijst": { + "modified": "2019-03-18T20:44:44.065Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/Sleutelwoord": { + "modified": "2019-03-23T22:03:25.471Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/TCP": { + "modified": "2019-03-18T20:44:28.905Z", + "contributors": [ + "peskybracket" + ] + }, + "Glossary/Tag": { + "modified": "2019-03-23T22:04:51.151Z", + "contributors": [ + "tomudding" + ] + }, + "Glossary/Toegankelijkheid": { + "modified": "2019-03-23T22:03:43.377Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/Value": { + "modified": "2019-03-23T22:32:37.248Z", + "contributors": [ + "tomudding", + "VincentDerk" + ] + }, + "Glossary/Waarachtig": { + "modified": "2019-03-23T22:29:56.688Z", + "contributors": [ + "RdV" + ] + }, + "Glossary/array": { + "modified": "2019-03-23T22:32:46.942Z", + "contributors": [ + "VincentDerk" + ] + }, + "Glossary/gif": { + "modified": "2019-03-23T22:03:31.901Z", + "contributors": [ + "evelijn" + ] + }, + "Glossary/https": { + "modified": "2019-03-23T22:04:48.435Z", + "contributors": [ + "evelijn", + "tomudding" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:45.192Z", + "contributors": [ + "SphinxKnight", + "hermansje", + "Volluta" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:58.809Z", + "contributors": [ + "poacher2k" + ] + }, + "Learn/Accessibility/HTML": { + "modified": "2020-07-16T22:40:13.609Z", + "contributors": [ + "sander-langendoen", + "SphinxKnight" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:36.000Z", + "contributors": [ + "WartClaes", + "chrisdavidmills" + ] + }, + "Learn/CSS/CSS_layout": { + "modified": "2020-07-16T22:26:32.082Z", + "contributors": [ + "Badlapje", + "chrisdavidmills" + ] + }, + "Learn/CSS/CSS_layout/Positionering": { + "modified": "2020-07-16T22:26:44.926Z", + "contributors": [ + "Badlapje" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:54.933Z", + "contributors": [ + "evelijn", + "mientje", + "physicbits", + "BangFizz", + "hermansje" + ] + }, + "Learn/Getting_started_with_the_web/Basis_software_installeren": { + "modified": "2020-07-16T22:34:09.652Z", + "contributors": [ + "evelijn", + "mientje", + "physicbits" + ] + }, + "Learn/Getting_started_with_the_web/Bestanden_beheren": { + "modified": "2020-07-16T22:34:36.385Z", + "contributors": [ + "evelijn", + "mientje" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basisbegrippen": { + "modified": "2020-07-16T22:35:01.779Z", + "contributors": [ + "evelijn", + "mientje" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basisbegrippen": { + "modified": "2020-07-16T22:34:49.309Z", + "contributors": [ + "escattone", + "evelijn", + "mientje" + ] + }, + "Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien": { + "modified": "2020-07-16T22:34:18.252Z", + "contributors": [ + "R1C1B1", + "Tonnes", + "mientje", + "physicbits" + ] + }, + "Learn/Getting_started_with_the_web/Hoe_werkt_het_web": { + "modified": "2020-07-16T22:34:01.811Z", + "contributors": [ + "evelijn", + "mientje" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-07-16T22:35:13.435Z", + "contributors": [ + "hhmaho", + "evelijn", + "mientje", + "psinke1974", + "apreinders" + ] + }, + "Learn/Getting_started_with_the_web/Publicatie_website": { + "modified": "2020-07-16T22:34:27.646Z", + "contributors": [ + "mientje" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:21.592Z", + "contributors": [ + "evelijn", + "zynne" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-07-16T22:21:00.688Z", + "contributors": [ + "chrisdavidmills", + "Porkepix" + ] + }, + "Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren": { + "modified": "2020-07-16T22:21:35.825Z", + "contributors": [ + "coenegrachts" + ] + }, + "Learn/HTML/Forms/How_to_structure_an_HTML_form": { + "modified": "2020-07-16T22:21:14.098Z", + "contributors": [ + "sander-langendoen", + "Daniel-Koster", + "ShaneDeconinck", + "chrisdavidmills", + "coenegrachts" + ] + }, + "Learn/HTML/Forms/Styling_HTML_forms": { + "modified": "2020-07-16T22:21:31.685Z", + "contributors": [ + "drostjoost", + "coenegrachts" + ] + }, + "Learn/HTML/Forms/The_native_form_widgets": { + "modified": "2020-07-16T22:21:22.297Z", + "contributors": [ + "chrisdavidmills", + "coenegrachts" + ] + }, + "Learn/HTML/Forms/Verzenden_van_formuliergegevens": { + "modified": "2020-07-16T22:21:28.253Z", + "contributors": [ + "hnsz", + "Tonnes", + "coenegrachts" + ] + }, + "Learn/HTML/Forms/Your_first_HTML_form": { + "modified": "2020-07-16T22:21:06.164Z", + "contributors": [ + "miaroelants", + "chrisdavidmills", + "coenegrachts" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:51.155Z", + "contributors": [ + "fowbi", + "ronkats", + "wittgenstein2", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:07.058Z", + "contributors": [ + "wittgenstein2", + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:23:04.555Z", + "contributors": [ + "wittgenstein2", + "mientje", + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak": { + "modified": "2020-07-16T22:23:56.122Z", + "contributors": [ + "wittgenstein2", + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_Debuggen": { + "modified": "2020-07-16T22:24:14.030Z", + "contributors": [ + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:36.796Z", + "contributors": [ + "WikiMarc", + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML": { + "modified": "2020-07-16T22:23:22.277Z", + "contributors": [ + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Hyperlinks_maken": { + "modified": "2020-07-16T22:23:45.686Z", + "contributors": [ + "wittgenstein2", + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief": { + "modified": "2020-07-16T22:23:13.606Z", + "contributors": [ + "hetoord", + "mientje" + ] + }, + "Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina": { + "modified": "2020-07-16T22:24:20.205Z", + "contributors": [ + "mientje" + ] + }, + "Learn/HTML/Multimedia_inbedden": { + "modified": "2020-07-16T22:24:27.648Z", + "contributors": [ + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML": { + "modified": "2020-07-16T22:24:46.826Z", + "contributors": [ + "Tonnes", + "mientje" + ] + }, + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:13.966Z", + "contributors": [ + "evelijn" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:42.403Z", + "contributors": [ + "zjweine", + "githubber21", + "peterruijter", + "MaxVMH", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:40.976Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten": { + "modified": "2020-07-16T22:32:49.127Z", + "contributors": [ + "Tonnes", + "mientje" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:53.445Z", + "contributors": [ + "peterruijter" + ] + }, + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-07-16T22:30:19.781Z", + "contributors": [ + "peterruijter" + ] + }, + "MDN": { + "modified": "2020-02-19T19:34:26.119Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "evelijn", + "Jeremie", + "teoli", + "ziyunfei" + ] + }, + "MDN/Community": { + "modified": "2019-09-11T08:01:51.764Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "evelijn", + "NickvdB", + "Tonnes", + "teoli", + "Volluta", + "Dwoenykoers13" + ] + }, + "MDN/Community/Conversations": { + "modified": "2019-03-18T21:42:30.837Z", + "contributors": [ + "wbamberg", + "Tonnes", + "evelijn" + ] + }, + "MDN/Community/Rollen": { + "modified": "2019-01-17T02:29:20.115Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Community/Rollen/Admins": { + "modified": "2019-01-17T02:29:17.305Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Community/Rollen/Localization_driver_role": { + "modified": "2019-01-17T02:29:25.186Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Community/Rollen/Mentorrol": { + "modified": "2019-01-17T02:29:15.829Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Community/Rollen/Topic_driver_role": { + "modified": "2019-03-18T21:42:59.724Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Community/Samenwerken_in_een_community": { + "modified": "2020-02-19T18:48:45.372Z", + "contributors": [ + "jswisher", + "wbamberg", + "Tonnes", + "Volluta" + ] + }, + "MDN/Community/Whats_happening": { + "modified": "2019-03-18T21:42:50.737Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T19:10:45.366Z", + "contributors": [ + "wbamberg", + "evelijn", + "Volluta", + "Mars" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:58.860Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "SphinxKnight", + "wbamberg", + "evelijn" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:14:22.850Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "evelijn", + "Tonnes", + "Pythox", + "teoli", + "Adrie200" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:26:09.679Z", + "contributors": [ + "wbamberg", + "evelijn", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Aanmaken_MDN_account": { + "modified": "2019-01-16T23:59:12.561Z", + "contributors": [ + "wbamberg", + "evelijn", + "coenegrachts" + ] + }, + "MDN/Contribute/Howto/Een_redactionele_beoordeling_geven": { + "modified": "2019-09-21T10:38:25.551Z", + "contributors": [ + "Meteor0id", + "wbamberg", + "evelijn", + "Tonnes", + "fscholz", + "Volluta" + ] + }, + "MDN/Contribute/Howto/Een_technische_beoordeling_maken": { + "modified": "2019-03-23T22:48:10.124Z", + "contributors": [ + "wbamberg", + "evelijn", + "Volluta" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-03-23T23:11:17.774Z", + "contributors": [ + "wbamberg", + "breakercris" + ] + }, + "MDN/Contribute/Howto/Taggen_JavaScript_pagina": { + "modified": "2019-01-16T21:53:46.329Z", + "contributors": [ + "wbamberg", + "evelijn", + "Tonnes", + "Pythox" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T19:10:46.999Z", + "contributors": [ + "wbamberg", + "evelijn", + "Tonnes", + "MickvdMeijde", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/Localization_projects": { + "modified": "2019-03-18T21:46:50.435Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-10-01T13:12:31.311Z", + "contributors": [ + "Meteor0id", + "wbamberg", + "Tonnes", + "YdML", + "niekolthof", + "OscarSchwarz", + "Adrie200" + ] + }, + "MDN/Contribute/Processes": { + "modified": "2019-01-17T02:14:32.326Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Contribute/Processes/Verhoogde_bevoegdheden_aanvragen": { + "modified": "2019-03-18T21:47:02.316Z", + "contributors": [ + "wbamberg", + "evelijn" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:30:55.835Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "evelijn", + "Sheppy" + ] + }, + "MDN/Guidelines/Style_guide": { + "modified": "2020-09-30T15:30:56.477Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "wbamberg", + "Zzvdk" + ] + }, + "MDN/Kuma": { + "modified": "2019-09-09T15:53:17.375Z", + "contributors": [ + "SphinxKnight", + "Tonnes", + "wbamberg", + "evelijn", + "Sheppy" + ] + }, + "MDN/Kuma/Probleemoplossingen_KumaScript_errors": { + "modified": "2019-01-16T21:24:42.283Z", + "contributors": [ + "wbamberg", + "Volluta" + ] + }, + "MDN/Over": { + "modified": "2019-09-12T20:01:48.009Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "evelijn", + "Tonnes", + "MickvdMeijde" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T12:56:47.075Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Tonnes", + "evelijn" + ] + }, + "MDN/Structures/Macros": { + "modified": "2020-09-30T12:56:47.258Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "evelijn" + ] + }, + "MDN/Tools": { + "modified": "2020-09-30T16:51:39.308Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "evelijn" + ] + }, + "MDN/Tools/Template_editing": { + "modified": "2020-09-30T16:51:39.425Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "evelijn" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:42:06.274Z", + "contributors": [ + "Tonnes", + "MickvdMeijde", + "gvanwaelvelde" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:34:55.295Z", + "contributors": [ + "Red15", + "ethertank" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-03-18T21:08:12.983Z", + "contributors": [ + "Tonnes", + "pcmill", + "Red15", + "Volluta", + "Jez9999" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-03-18T21:05:52.317Z", + "contributors": [ + "Phuein" + ] + }, + "Mozilla/Add-ons/WebExtensions/Een_verouderde_Firefox-add-on_porteren": { + "modified": "2019-03-18T21:06:01.229Z", + "contributors": [ + "Tonnes" + ] + }, + "Mozilla/Add-ons/WebExtensions/Wat_zijn_WebExtensions": { + "modified": "2019-03-18T21:05:10.706Z", + "contributors": [ + "SphinxKnight", + "Tonnes" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:32:20.967Z", + "contributors": [ + "chrisdavidmills", + "BrianDiPalma" + ] + }, + "Mozilla/Developer_guide/Dus_je_hebt_Firefox_net_gebuild": { + "modified": "2019-03-23T23:32:28.915Z", + "contributors": [ + "chrisdavidmills", + "zedutchgandalf" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T15:00:41.833Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "evelijn", + "BangFizz", + "Volluta", + "Sheppy", + "majidini", + "Prashanth" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:26:02.313Z", + "contributors": [ + "wbamberg", + "Tonnes", + "Volluta", + "ziyunfei" + ] + }, + "Mozilla_Implementeren": { + "modified": "2019-01-16T16:13:16.469Z", + "contributors": [ + "Messias" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:16.646Z", + "contributors": [ + "SphinxKnight", + "theo-albers", + "Volluta", + "Maffie", + "vanimme", + "Dwoenykoers13", + "teoli", + "Anaxtaas", + "edith5", + "Gijsmma", + "babacanreis", + "wbamberg" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:28.600Z", + "contributors": [ + "Tonnes", + "Volluta" + ] + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.736Z", + "contributors": [ + "Martien" + ] + }, + "Tools/Responsive_Design_View": { + "modified": "2020-07-16T22:35:21.730Z", + "contributors": [ + "bassam", + "JimiVerhaegen" + ] + }, + "Tools/Shader_Editor": { + "modified": "2020-07-16T22:35:54.625Z", + "contributors": [ + "Volluta" + ] + }, + "Tools/Sneltoetsen": { + "modified": "2020-07-16T22:35:48.706Z", + "contributors": [ + "Tonnes" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:06.739Z", + "contributors": [ + "Tonnes", + "Volluta", + "klebermaria" + ] + }, + "Tools/Web_Console/Sneltoetsen": { + "modified": "2020-07-16T22:34:23.500Z", + "contributors": [ + "Tonnes" + ] + }, + "Web": { + "modified": "2019-03-23T23:28:12.140Z", + "contributors": [ + "evelijn", + "sjoerdvbavel", + "Oeekker", + "Tonnes", + "cyrildewit", + "Webmaster-Jeffrey-2016", + "Volluta", + "Connie44", + "ethertank" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:28:07.200Z", + "contributors": [ + "Oeekker", + "teoli", + "Volluta", + "ethertank" + ] + }, + "Web/API/CSS": { + "modified": "2019-03-23T22:04:12.317Z", + "contributors": [ + "AdepthShar" + ] + }, + "Web/API/CSSStyleSheet": { + "modified": "2019-03-23T22:27:01.423Z", + "contributors": [ + "Nickolay" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:04:43.609Z", + "contributors": [ + "SijmenSchoon", + "jpmedley" + ] + }, + "Web/API/CanvasRenderingContext2D/globalCompositeOperation": { + "modified": "2019-03-23T22:04:45.384Z", + "contributors": [ + "TiXSystem" + ] + }, + "Web/API/Canvas_API": { + "modified": "2019-03-23T22:29:43.987Z", + "contributors": [ + "rudolfo" + ] + }, + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-18T20:48:03.919Z", + "contributors": [ + "jesperdj", + "Tonnes", + "danielwedema", + "SvG325" + ] + }, + "Web/API/Comment": { + "modified": "2019-03-23T22:04:06.431Z", + "contributors": [ + "AdepthShar" + ] + }, + "Web/API/Document": { + "modified": "2019-03-23T22:29:45.752Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/Document/createTextNode": { + "modified": "2019-03-23T22:29:51.307Z", + "contributors": [ + "RdV" + ] + }, + "Web/API/Document/currentScript": { + "modified": "2019-03-18T21:41:19.729Z", + "contributors": [ + "wbamberg", + "arjanvdberg" + ] + }, + "Web/API/Document/getElementById": { + "modified": "2020-07-08T09:55:33.370Z", + "contributors": [ + "robinneke2004", + "DaanWeijers" + ] + }, + "Web/API/Document/querySelector": { + "modified": "2019-03-23T22:05:49.180Z", + "contributors": [ + "evelijn", + "jvanes" + ] + }, + "Web/API/Document_Object_Model": { + "modified": "2019-03-23T22:47:57.903Z", + "contributors": [ + "Volluta" + ] + }, + "Web/API/Element": { + "modified": "2020-10-15T22:18:11.066Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/EventSource": { + "modified": "2019-03-23T22:39:10.088Z", + "contributors": [ + "Kontsnor" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2020-01-13T04:48:34.015Z", + "contributors": [ + "chrisdavidmills", + "bartleemans" + ] + }, + "Web/API/MIDIAccess": { + "modified": "2020-10-15T21:58:14.602Z", + "contributors": [ + "bershanskiy", + "gritd" + ] + }, + "Web/API/MutationObserver": { + "modified": "2020-07-22T06:20:42.061Z", + "contributors": [ + "JurriaanD", + "joristt" + ] + }, + "Web/API/WebGL_API": { + "modified": "2019-03-23T22:58:11.555Z", + "contributors": [ + "Volluta", + "fscholz", + "JonasLesage" + ] + }, + "Web/API/WebGL_API/Tutorial": { + "modified": "2019-03-18T21:15:06.829Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/Window": { + "modified": "2019-03-23T22:26:59.504Z", + "contributors": [ + "shtarbanov" + ] + }, + "Web/API/Window/alert": { + "modified": "2019-03-18T21:43:36.736Z", + "contributors": [ + "ImmanuelNL" + ] + }, + "Web/API/Window/console": { + "modified": "2019-03-23T22:01:59.704Z", + "contributors": [ + "evelijn", + "TiemenV" + ] + }, + "Web/API/Window/prompt": { + "modified": "2019-03-23T22:02:01.695Z", + "contributors": [ + "evelijn", + "TiemenV" + ] + }, + "Web/API/Window/requestAnimationFrame": { + "modified": "2019-09-08T13:26:51.047Z", + "contributors": [ + "arjanbytez", + "El4a", + "VincentNieuwinckel", + "tdelang" + ] + }, + "Web/API/Window/sessionStorage": { + "modified": "2019-09-11T03:18:23.191Z", + "contributors": [ + "RubenJ", + "LilyK", + "SayChi", + "angelomichel" + ] + }, + "Web/API/WindowEventHandlers": { + "modified": "2019-03-23T22:18:04.348Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/WindowEventHandlers/onbeforeunload": { + "modified": "2019-03-23T22:18:06.488Z", + "contributors": [ + "davidkrijgsman", + "fcools" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-03-12T15:05:54.327Z", + "contributors": [ + "Hakan625", + "wbamberg", + "Sebastiaan10", + "MichaelvdNet" + ] + }, + "Web/API/window.crypto.getRandomValues": { + "modified": "2019-03-23T23:28:11.838Z", + "contributors": [ + "jsx", + "DD0101" + ] + }, + "Web/CSS": { + "modified": "2019-09-11T03:38:13.343Z", + "contributors": [ + "SphinxKnight", + "poeske887", + "evelijn", + "WartClaes", + "Projectz", + "nickdejaeger", + "cyrildewit", + "Volluta", + "teoli", + "Takenbot", + "Mcaruso" + ] + }, + "Web/CSS/:only-of-type": { + "modified": "2019-03-23T22:30:35.008Z", + "contributors": [ + "WartClaes", + "Michelenzoo" + ] + }, + "Web/CSS/:required": { + "modified": "2019-03-23T22:28:27.139Z", + "contributors": [ + "SuperDJ" + ] + }, + "Web/CSS/@namespace": { + "modified": "2019-03-23T22:39:24.983Z", + "contributors": [ + "Tonnes", + "WartClaes", + "leroydev" + ] + }, + "Web/CSS/CSS_Colors": { + "modified": "2019-03-23T22:25:32.210Z", + "contributors": [ + "Krenair" + ] + }, + "Web/CSS/CSS_Colors/Color_picker_tool": { + "modified": "2019-03-23T22:25:31.799Z", + "contributors": [ + "Tonnes", + "Liferdorp" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-08-07T13:22:44.868Z", + "contributors": [ + "LukV" + ] + }, + "Web/CSS/CSS_Images": { + "modified": "2019-03-23T22:09:15.045Z", + "contributors": [ + "wizAmit" + ] + }, + "Web/CSS/CSS_Positioning": { + "modified": "2019-03-30T16:29:38.488Z" + }, + "Web/CSS/CSS_Positioning/Understanding_z_index": { + "modified": "2019-03-30T16:29:38.741Z" + }, + "Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext": { + "modified": "2020-01-06T13:10:46.550Z", + "contributors": [ + "MelvinIdema" + ] + }, + "Web/CSS/Voor_Beginners": { + "modified": "2019-01-16T16:11:54.635Z", + "contributors": [ + "teoli", + "Verruckt", + "Scees", + "Valgor", + "Mcaruso" + ] + }, + "Web/CSS/animation-duration": { + "modified": "2019-03-23T22:33:38.601Z", + "contributors": [ + "martinidev" + ] + }, + "Web/CSS/animation-iteration-count": { + "modified": "2019-03-23T22:29:31.651Z", + "contributors": [ + "MaryGr" + ] + }, + "Web/CSS/box-sizing": { + "modified": "2019-03-23T22:31:43.055Z", + "contributors": [ + "WartClaes" + ] + }, + "Web/CSS/cursor": { + "modified": "2020-10-15T22:02:40.881Z", + "contributors": [ + "JirkaVer", + "AVandenBreen" + ] + }, + "Web/CSS/padding-bottom": { + "modified": "2020-10-15T21:50:12.697Z", + "contributors": [ + "evelijn", + "1070rik" + ] + }, + "Web/Events": { + "modified": "2020-07-02T20:12:30.965Z", + "contributors": [ + "Spizzy84", + "wbamberg", + "Volluta" + ] + }, + "Web/Events/mousedown": { + "modified": "2019-04-30T13:45:34.836Z", + "contributors": [ + "wbamberg", + "jswisher", + "karel.braeckman" + ] + }, + "Web/Events/mouseout": { + "modified": "2019-03-23T22:23:51.572Z", + "contributors": [ + "fscholz", + "MicheleNL" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:16:20.917Z", + "contributors": [ + "Volluta", + "Onsteroids" + ] + }, + "Web/Guide/AJAX": { + "modified": "2019-03-23T23:41:09.875Z", + "contributors": [ + "chrisdavidmills", + "teoli", + "Takenbot", + "Valgor", + "Dria", + "Mcaruso" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T22:48:12.662Z", + "contributors": [ + "Oeekker", + "Volluta" + ] + }, + "Web/Guide/HTML/HTML5": { + "modified": "2020-07-01T08:52:19.864Z", + "contributors": [ + "hugojvd", + "BangFizz", + "cyrildewit", + "teoli", + "gvanwaelvelde", + "Volluta" + ] + }, + "Web/Guide/HTML/HTML5_audio_en_video_gebruiken": { + "modified": "2019-03-23T23:02:13.892Z", + "contributors": [ + "Angelino" + ] + }, + "Web/Guide/Performance": { + "modified": "2019-03-23T23:16:23.359Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/HTML": { + "modified": "2019-09-10T15:23:56.360Z", + "contributors": [ + "SphinxKnight", + "TomAnthonie", + "evelijn", + "BangFizz", + "cyrildewit", + "Volluta", + "teoli", + "Timootee", + "Valgor", + "King@home" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-24T00:11:23.932Z", + "contributors": [ + "chrisdavidmills", + "teoli", + "DD0101" + ] + }, + "Web/HTML/Element/a": { + "modified": "2020-10-15T22:00:58.612Z", + "contributors": [ + "Sibelle65" + ] + }, + "Web/HTML/Element/abbr": { + "modified": "2019-03-23T22:45:29.312Z", + "contributors": [ + "chrisdavidmills", + "mrdemc" + ] + }, + "Web/HTML/Element/b": { + "modified": "2019-09-23T13:39:36.463Z", + "contributors": [ + "duduindo", + "teoli", + "DD0101" + ] + }, + "Web/HTML/Element/div": { + "modified": "2019-03-23T22:38:03.014Z", + "contributors": [ + "chrisdavidmills", + "toonvandeputte", + "Nysmos" + ] + }, + "Web/HTML/Element/figcaption": { + "modified": "2019-03-23T22:21:52.684Z", + "contributors": [ + "chrisdavidmills", + "Ditger" + ] + }, + "Web/HTML/Element/html": { + "modified": "2020-10-15T21:58:56.987Z", + "contributors": [ + "chrisdavidmills", + "evelijn" + ] + }, + "Web/HTML/Element/marquee": { + "modified": "2019-03-18T21:33:29.026Z", + "contributors": [ + "chrisdavidmills", + "MatSn0w" + ] + }, + "Web/HTML/Element/p": { + "modified": "2020-10-15T21:26:35.053Z", + "contributors": [ + "evelijn", + "chrisdavidmills", + "teoli", + "DD0101" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2019-03-23T22:03:11.338Z", + "contributors": [ + "evelijn", + "inad9300" + ] + }, + "Web/HTML/Global_attributes/style": { + "modified": "2019-03-23T22:03:07.628Z", + "contributors": [ + "evelijn" + ] + }, + "Web/HTTP": { + "modified": "2019-03-23T22:04:57.725Z", + "contributors": [ + "anneh", + "bk", + "sideshowbarker" + ] + }, + "Web/HTTP/CORS": { + "modified": "2020-10-15T22:18:49.920Z", + "contributors": [ + "aomarks" + ] + }, + "Web/HTTP/CORS/Errors": { + "modified": "2019-05-20T11:15:16.386Z" + }, + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2019-05-20T11:16:20.563Z", + "contributors": [ + "Henkt" + ] + }, + "Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight": { + "modified": "2019-06-27T08:24:18.173Z", + "contributors": [ + "kimvandenberg" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-03-23T22:01:45.801Z", + "contributors": [ + "stephaniehobson" + ] + }, + "Web/HTTP/Headers/Location": { + "modified": "2020-10-15T21:59:10.017Z", + "contributors": [ + "TheWoosh" + ] + }, + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T22:17:05.763Z", + "contributors": [ + "scott94621" + ] + }, + "Web/HTTP/Status": { + "modified": "2019-03-23T22:04:55.422Z", + "contributors": [ + "mgold" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:57:56.942Z", + "contributors": [ + "bk" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:58:04.522Z", + "contributors": [ + "lucvanderzandt" + ] + }, + "Web/HTTP/Status/301": { + "modified": "2020-10-15T21:57:57.656Z", + "contributors": [ + "bk" + ] + }, + "Web/JavaScript": { + "modified": "2020-05-06T09:28:33.930Z", + "contributors": [ + "MelvinIdema", + "SphinxKnight", + "gj_zwiers", + "WalrusGumboot", + "HenriAllard", + "kdex", + "cyrildewit", + "dkruythoff", + "Volluta", + "teoli", + "asolovyov", + "fscholz", + "Olikabo" + ] + }, + "Web/JavaScript/Aan_de_slag": { + "modified": "2019-03-23T23:15:19.193Z", + "contributors": [ + "teoli", + "Lekensteyn" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:41:03.367Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-03-12T19:43:11.650Z", + "contributors": [ + "maartentbm" + ] + }, + "Web/JavaScript/Guide/Reguliere_Expressies": { + "modified": "2020-03-21T18:58:05.051Z", + "contributors": [ + "gj_zwiers" + ] + }, + "Web/JavaScript/Guide/Werken_met_objecten": { + "modified": "2020-03-12T19:46:18.946Z", + "contributors": [ + "SphinxKnight", + "pieterm", + "jjkaptein" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:41:26.007Z", + "contributors": [ + "Minat" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:45:10.126Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:45:17.089Z", + "contributors": [ + "Hielkio", + "papierbouwer" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:45:20.168Z", + "contributors": [ + "poeske887", + "Gubberrr" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-03-12T19:43:07.331Z", + "contributors": [ + "hunan-rostomyan" + ] + }, + "Web/JavaScript/Reference/Functions/rest_parameters": { + "modified": "2020-03-12T19:43:05.062Z", + "contributors": [ + "paddotk", + "raymonschouwenaar", + "DDaems" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:41:24.445Z", + "contributors": [ + "teoli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-05-06T09:07:58.979Z", + "contributors": [ + "MelvinIdema", + "Siewva", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-03-18T20:57:36.939Z", + "contributors": [ + "janvryck", + "BramVanroy", + "jasper-smit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2019-03-23T22:24:09.364Z", + "contributors": [ + "hellotom", + "TiXSystem" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T22:03:27.016Z", + "contributors": [ + "marco-2017", + "AnnemarieD" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T22:32:39.727Z", + "contributors": [ + "jnederhoed" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2019-03-23T22:29:57.127Z", + "contributors": [ + "RdV" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2019-10-10T07:11:02.850Z", + "contributors": [ + "Derryrover", + "MauriceBuiten", + "DemianD", + "jhkuperus", + "Tonnes" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T22:04:46.877Z", + "contributors": [ + "patrickabkarian", + "snijkerm" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2019-04-26T06:24:09.290Z", + "contributors": [ + "xfinx", + "ImmanuelNL", + "bras1223", + "SebastiaanNijland", + "juleskreutzer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2019-03-23T22:27:31.361Z", + "contributors": [ + "psinke1974", + "mdondorp", + "Admiraal" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2019-03-23T22:29:51.827Z", + "contributors": [ + "RobinvdA", + "RdV" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T22:18:47.660Z", + "contributors": [ + "LeonardGC", + "zzynx", + "TheNoobdog1300" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2019-03-23T22:39:21.083Z", + "contributors": [ + "lackodan", + "leroydev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2020-10-15T21:59:08.530Z", + "contributors": [ + "docxjjo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2019-09-18T16:43:31.438Z", + "contributors": [ + "mixxamm", + "JorritSchippers", + "pieterbeulque", + "RdV" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2019-03-23T22:24:39.086Z", + "contributors": [ + "Bezz242", + "mroeling", + "thinckx", + "QuintusOostendorp", + "yannickvergeylen" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-03-23T22:26:09.973Z", + "contributors": [ + "jaronbarends", + "sphenk", + "Vinno97", + "dkruythoff" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-23T22:44:26.448Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2020-11-14T13:10:39.847Z", + "contributors": [ + "LeeLenaleee", + "mvantzet", + "SenorSpiekbrief" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2019-07-05T07:31:18.057Z", + "contributors": [ + "frontendr", + "bapauw", + "SenorSpiekbrief" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-03-23T22:41:26.262Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/prototype": { + "modified": "2019-03-23T22:25:08.993Z", + "contributors": [ + "tdbruy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:39:17.384Z", + "contributors": [ + "Jeremie" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2019-07-12T07:40:43.836Z", + "contributors": [ + "Jaaap", + "fvanwijk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2019-03-23T22:39:18.234Z", + "contributors": [ + "ArisChuck", + "SamuelNorbury", + "leroydev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2020-10-15T22:01:56.541Z", + "contributors": [ + "MysticEarth", + "HMFons" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2019-03-23T22:12:55.546Z", + "contributors": [ + "fvanwijk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2019-03-23T22:13:05.324Z", + "contributors": [ + "fvanwijk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbool": { + "modified": "2020-10-15T22:29:35.803Z", + "contributors": [ + "MelvinIdema" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-10-15T21:56:05.056Z", + "contributors": [ + "Tonnes", + "evelijn", + "sjvisschers" + ] + }, + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-03-12T19:44:29.581Z", + "contributors": [ + "xtofl", + "RdV" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-03-12T19:42:15.582Z", + "contributors": [ + "jjpkoenraad" + ] + }, + "Web/JavaScript/Reference/Klasses": { + "modified": "2020-03-12T19:43:07.699Z", + "contributors": [ + "StevenVB", + "reinvantveer", + "Jantje19", + "Samjayyy" + ] + }, + "Web/JavaScript/Reference/Operatoren": { + "modified": "2020-03-12T19:42:34.064Z", + "contributors": [ + "apreinders", + "UX5Technologies" + ] + }, + "Web/JavaScript/Reference/Operatoren/typeof": { + "modified": "2020-10-15T21:49:35.139Z", + "contributors": [ + "evelijn", + "lackodan" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-10-15T21:58:46.039Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-15T21:58:41.336Z", + "contributors": [ + "hellotom", + "SphinxKnight", + "rjsibon", + "artusvranken" + ] + }, + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-10-15T21:58:44.915Z", + "contributors": [ + "jandockx", + "tjipke-spark" + ] + }, + "Web/MathML": { + "modified": "2019-03-23T22:48:26.981Z", + "contributors": [ + "Volluta" + ] + }, + "Web/Progressive_web_apps": { + "modified": "2019-07-21T07:32:55.833Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:20:13.298Z", + "contributors": [ + "Tonnes", + "gandreadis", + "cyrildewit", + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:20:10.706Z", + "contributors": [ + "Tonnes", + "gandreadis", + "Volluta", + "Danacus" + ] + }, + "Web/SVG": { + "modified": "2019-03-18T21:46:40.845Z", + "contributors": [ + "Nomeh_Uchenna_Gabriel" + ] + }, + "Web/SVG/Attribute": { + "modified": "2019-03-18T21:46:26.155Z", + "contributors": [ + "Vasiliy.Poddubny" + ] + }, + "Web/SVG/Attribute/font-size-adjust": { + "modified": "2019-03-18T21:46:30.585Z", + "contributors": [ + "MickvdMeijde" + ] + }, + "Web/SVG/Tutorial": { + "modified": "2019-03-18T21:41:14.432Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/SVG/Tutorial/Basis_Transformaties": { + "modified": "2019-03-18T21:40:54.924Z", + "contributors": [ + "Tonnes", + "SphinxKnight", + "HennyBergsma" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:37:51.912Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Security/Subresource_Integrity": { + "modified": "2020-10-15T22:05:43.652Z", + "contributors": [ + "bvanmastrigt", + "tibovanheule" + ] + } +}
\ No newline at end of file diff --git a/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html b/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html new file mode 100644 index 0000000000..11b2e965d9 --- /dev/null +++ b/files/nl/archive/b2g_os/b2g_desktop_client_gebruiken/index.html @@ -0,0 +1,216 @@ +--- +title: De B2G OS-simulator bouwen +slug: Archive/B2G_OS/B2G_desktop_client_gebruiken +tags: + - B2G OS + - Device + - Firefox OS + - Gaia + - Mobile + - simulator +translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator +--- +<p>Met de Firefox OS desktop client, ook wel de <em>B2G desktop client</em> genoemd, kunt u Gaia en Web apps in een Gecko-gebaseerde omgeving wat lijkt op een echt apperaat. It doesn't emulate device hardware, so it's not adequate for testing device APIs, and isn't a replacement for testing on actual hardware. However, it does have a several APIs enabled that aren't available on Firefox such as the Contacts and Settings APIs. It can therefore be useful during the development of your application, or while working on the Gaia user interface itself.</p> + +<p>This article covers downloading or building the Firefox OS desktop client, as well as how to use it.</p> + +<div class="note"> +<p><strong>Note:</strong> The easiest way to use the Firefox OS desktop client is to use the <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator">Firefox OS Simulator</a>. It does not require you to build the desktop client yourself.</p> +</div> + +<h2 id="Download_a_nightly_build">Download a nightly build</h2> + +<div class="note"> +<p><strong>Note:</strong> Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on <code>mozilla-central</code> here:<br> + <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/</a></p> +</div> + +<p>Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the Firefox OS desktop client is built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-aurora/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</p> + +<p>Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.</p> + +<p>You can now skip ahead to <a href="#Running_the_desktop_client" title="#Running_the_desktop_client">Running the desktop client</a>, unless you actually want to build it for yourself.</p> + +<h2 id="Building_the_desktop_client">Building the desktop client</h2> + +<p>The first thing we need to do is set up a <a href="/En/Developer_Guide/Build_Instructions#Build_prerequisites" title="En/Developer_Guide/Build_Instructions#Build_prerequisites">standard Mozilla build environment</a>. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.</p> + +<h3 id="Downloading_the_code_for_the_first_time">Downloading the code for the first time</h3> + +<p>In a directory where we'd like the source code to go, let's clone the <code>mozilla-central</code> repository that contains all of Gecko:</p> + +<pre> hg clone http://hg.mozilla.org/mozilla-central +</pre> + +<h3 id="Updating_the_code">Updating the code</h3> + +<p>When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:</p> + +<pre>cd mozilla-central +hg pull -u +</pre> + +<h3 id="Create_a_mozconfig">Create a mozconfig</h3> + +<p>Next, we need to create a <code>mozconfig</code> file in the <code>mozilla-central</code> directory to configure the build system to build the Boot to Gecko client instead of Firefox:</p> + +<pre>. "$topsrcdir/b2g/config/mozconfigs/common" + +mk_add_options MOZ_OBJDIR=../build +mk_add_options MOZ_MAKE_FLAGS="-j9 -s" + +ac_add_options --enable-application=b2g +ac_add_options --disable-libjpeg-turbo + +# This option is required if you want to be able to run Gaia's tests +ac_add_options --enable-tests + +# turn on mozTelephony/mozSms interfaces +# Only turn this line on if you actually have a dev phone +# you want to forward to. If you get crashes at startup, +# make sure this line is commented. +#ac_add_options --enable-b2g-ril</pre> + +<h3 id="Building">Building</h3> + +<p>Now we're ready to build the desktop client with the following command issued from the <code>mozilla-central</code> directory:</p> + +<pre>make -f client.mk +</pre> + +<p>The built client will be placed in the <code>../build/dist</code> directory (based on the value you specify for <code>MOZ_OBJDIR</code> in the <code>mozconfig</code> file).</p> + +<h2 id="Downloading_Gaia">Downloading Gaia</h2> + +<p>By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.</p> + +<p>To download Gaia for the first time, let's clone the source code repository on GitHub:</p> + +<pre>git clone https://github.com/mozilla-b2g/gaia +cd gaia</pre> + +<p>To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:</p> + +<pre>cd gaia +git pull +</pre> + +<h3 id="Generating_a_profile">Generating a profile</h3> + +<p>Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the <code>gaia</code> directory) will take care of that:</p> + +<pre>make +</pre> + +<p>This should create a <code>profile</code> directory below the <code>gaia</code> directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.</p> + +<h2 id="Running_the_desktop_client">Running the desktop client</h2> + +<p>Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.</p> + +<h3 id="Running_on_Linux">Running on Linux</h3> + +<p>To run the desktop client on Linux using the embedded Gaia profile, just run the <code>b2g</code> executable. If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The binary is in the archive you downloaded earlier or in the <code>../build/dist/bin</code> directory if you built the client yourself.</p> + +<pre>.../b2g-bin -profile gaia/profile +</pre> + +<p>You may experience annoying rendering problems. To avoid them, add the following line to your <code>gaia/profile/user.js</code> file:</p> + +<pre>user_pref("layers.acceleration.disabled", true); +</pre> + +<h3 id="Running_on_Mac">Running on Mac</h3> + +<p>If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.</p> + +<p>If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The command line is slightly more complicated due to the location of the <code>b2g-bin</code> binary and the need for absolute paths when specifying the profile directory:</p> + +<pre>.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile +</pre> + +<h3 id="Running_on_Windows">Running on Windows</h3> + +<p>Running the nightly build on Windows is as simple as launching <code>b2g.exe</code>. If you want to customize the execution, you can do so by running the <code>b2g-bin.exe</code> executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.</p> + +<h2 id="Command_line_options">Command line options</h2> + +<p>There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the <code>-help</code> option. This section covers some of the particularly interesting ones.</p> + +<h3 id="option-screen" name="option-screen">Specifying the screen size</h3> + +<p>You can specify the screen size of the device you want to simulate using the <code>--screen</code> option:</p> + +<pre>b2g --screen=<em><width></em>x<em><height></em>[@<em><dpi></em>]</pre> + +<p>Where <em><width></em>, <em><height></em>, and <em><dpi></em> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:</p> + +<pre>b2g --screen=320x480 +b2g --screen=320x480@160 +</pre> + +<p>Optionally, you can specify certain devices by name to simulate their screen size and resolution:</p> + +<ul> + <li><code>iphone</code></li> + <li><code>ipad</code></li> + <li><code>nexus_s</code></li> + <li><code>galaxy_nexus</code></li> + <li><code>galaxy_tab</code></li> + <li><code>wildfire</code></li> + <li><code>tattoo</code></li> + <li><code>salsa</code></li> + <li><code>chacha</code></li> +</ul> + +<h3 id="option-console" name="option-console">Opening the JavaScript console</h3> + +<p>You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the <code>-jsconsole</code> flag. After building, just do:</p> + +<pre>.../b2g -jsconsole -profile <em>/path/to/your/profile</em></pre> + +<p>If you've installed the nightly build on a Mac, you can do the following:</p> + +<pre>/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile <em>/path/to/your/profile</em></pre> + +<div class="note"> +<p><strong>Note:</strong> On production builds of Firefox OS, console logging (such as by {{domxref("console.log()")}}) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information->More Information->Developer, then toggle on the "Console Enabled" preference.</p> +</div> + +<h3 id="option-runapp" name="option-runapp">Launching a specific application at startup</h3> + +<p>You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the <code>--runapp</code> option, which takes as a parameter the name of the application to run. For example:</p> + +<pre> .../b2g-bin -profile <em>/path/to/your/gaia/profile</em> --runapp email</pre> + +<p>Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.</p> + +<p>For example, the name of the email app is currently "E-mail", but <code>--runapp email</code> will work because of this normalization.</p> + +<p>If you specify the <code>--runapp</code> option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.</p> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>--runapp</code> option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.</p> +</div> + +<h2 id="Usage_tips">Usage tips</h2> + +<p>This section provides a few helpful tips to using the B2G desktop client.</p> + +<ul> + <li>ESC key performs the same function as the "back" button.</li> + <li>Home key performs the same function as the "home" button; if you're on a Mac, Home key is available as Fn+← (Fn + Left Arrow).</li> + <li>End key performs the same function as the "power" button; if you're on a Mac, End key is available as Fn+→ (Fn + Right Arrow).</li> + <li>Page Up and Page Down keys perform the same function as "Volume Up" and "Volume Down" buttons respectively; if you're on a Mac, Page Up key is available as Fn+↑ (Fn + Up Arrow) and Page Down key is available as Fn+↓ (Fn + Down Arrow).</li> + <li>Long press to Home key opens the "Card View"; if you're on Mac, Cmd+Fn+← (Cmd + Fn + Left Arrow) opens the "Card View".</li> +</ul> + +<h2 id="Next_steps">Next steps</h2> + +<p>Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:</p> + +<ul> + <li><a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Debugging on Boot to Gecko</a></li> + <li><a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">Testing Boot to Gecko</a></li> + <li><a href="http://blog.johnford.org/desktop-b2g-include-gaia/" title="http://blog.johnford.org/desktop-b2g-include-gaia/">Desktop B2G builds now include Gaia</a></li> +</ul> diff --git a/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..98220c79c8 --- /dev/null +++ b/files/nl/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,60 @@ +--- +title: Het compileren en installeren van Firefox OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +<p>Omdat Firefox OS op dit moment aan hevige ontwikkelingen onderhevig is en zich in een pre-release fase bevindt, is de best mogelijke manier om er zeker van te zijn een up-to-date versie van het OS te draaien het zelf compileren en installeren van een image. De artikelen welke hieronder zijn verzameld zullen een complete handleiding zijn tijdens het proces van compileren en installeren van Firefox OS in een emulator danwel op een ondersteund apparaat, of bij het installeren van de Gaia gebruiksinterface in de Firefox-browser.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="het_verkrijgen_en_compileren_van_FIREFOX_OS">het verkrijgen en compileren van FIREFOX OS</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G build prerequisites">Firefox OS compilatiebenodigdheden</a></dt> + <dd> + Wat heb je nodig (en wat moet je doen) om voor de eerste keer een Firefox OS image te compileren.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing for your first B2G build">Voorbereiden op het bouwen van de eerste image</a></dt> + <dd> + Alvorens je de eerste image kunt bouwen, moet je de de repository clonen en de bestanden configureren. Dit artikel kan hierbij van hulp zijn.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="en-US/docs/Mozilla/Boot_to_Gecko/Building Boot to Gecko">Het compileren van Firefox OS</a></dt> + <dd> + Hoe moet je Firefox OS compileren.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Alle bekijken...</a></span></p> + </td> + <td> + <h2 class="Community" id="Installing_FIREFOX_OS_andor_Gaia">Installing FIREFOX OS and/or Gaia</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Choosing_how_to_run_Gaia_or_B2G" title="en-US/docs/Mozilla/Boot_to_Gecko/Choosing how to run Gaia or B2G">Choosing how to run Gaia or Firefox OS</a></dt> + <dd> + You can use Gaia within Firefox, or you can run Firefox OS on a mobile device or in a desktop-based simulator. This guide will help you decide which is best for your needs.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox" title="en-US/docs/Mozilla/Boot_to_Gecko/Using Gaia in Firefox">Using Gaia in Firefox</a></dt> + <dd> + How to use Gaia within a desktop Firefox browser.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Using the Firefox OS desktop client</a></dt> + <dd> + A guide to running and using the Firefox OS desktop client; this simulates the Gaia environment in a desktop application. It's more accurate than running Gaia in Firefox but not as accurate as the emulators.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using the B2G emulators">Using the Firefox OS emulators</a></dt> + <dd> + A guide to building and using the Firefox OS emulators, and when to use which emulator.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device" title="en-US/docs/Mozilla/Boot_to_Gecko/Installing Boot to Gecko on a mobile device">Installing Firefox OS on a mobile device</a></dt> + <dd> + How to install Firefox OS on a real mobile device.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Dual_boot_of_B2G_and_Android_on_SGS2" title="/en-US/docs/Mozilla/Boot_to_Gecko/Dual boot of B2G and Android on SGS2">Dual boot of Firefox OS and Android on SGS2</a></dt> + <dd> + How to set up a Firefox OS/Android dual boot environment on a Samsung Galaxy S2.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html b/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html new file mode 100644 index 0000000000..2162bdecf1 --- /dev/null +++ b/files/nl/archive/b2g_os/gebruik_van_de_app_manager/index.html @@ -0,0 +1,239 @@ +--- +title: Gebruik van de App Manager +slug: Archive/B2G_OS/Gebruik_van_de_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +<div id="yass_top_edge_dummy" style="width: 1px; height: 1px; padding: 0px; margin: -1px 0px 0px; border-width: 0px; display: block;"> </div> + +<div id="yass_top_edge" style="padding: 0px; margin: 0px; border-width: 0px; height: 0px; display: block; width: 1px;"> </div> + +<div class="summary"> +<p>De App Manager is een nieuwe tool beschikbaar voor Firefox op de desktop welke een aantal handige funcionaliteiten biedt voor het helpen met testen, uitvoeren en testen van HTML5 web applicaties op het Firefox OS telefoons en Firefox OS simulator, direct vanuit de browser.</p> +</div> + +<p>{{EmbedYouTube("z1Bxg1UJVf0")}}</p> + +<p>De App Manager bestaat uit:</p> + +<ul> + <li>De <a href="#Apps_panel"><em>Apps panel</em></a>, which manages local apps (app source code located on your computer) and apps hosted externally, allowing you to package and install them on your device or simulator, and debug them using Toolboxes</li> + <li>A <a href="#Device_panel"><em>Device panel</em></a>, which displays information about the connected device including Firefox OS version installed, permissions required for using device APIs on the device, and apps installed</li> + <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, which are are sets of developer tools (web console, inspector, debugger, etc.) that can be connected to a running app via the Apps panel to perform debugging operations</li> +</ul> + +<h2 id="Snelle_setup"><a name="Configuring_device">Snelle setup:</a></h2> + +<p>This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there. Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.</p> + +<ol> + <li>Make sure you have Firefox Desktop 26+ installed</li> + <li>Open the App Manager (in the URL bar, type <code>about:app-manager</code>)</li> + <li>If you don't have a real device: + <ol> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the Firefox OS Simulator</a></li> + <li>In App Manager's bottom toolbar, click on <em>Start Simulator</em>, then click on the name of the installed simulator, which should appear there.</li> + </ol> + </li> + <li>If you have a real device: + <ol> + <li>Make sure your device is running Firefox OS 1.2+</li> + <li>In the Settings of your device, disable Screen Lock (<code>Settings > <code>Screen Lock</code></code>) and enable Remote Debugging (<code>Settings > Device information > More information > Developer</code>)</li> + <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper</a> add-on in Firefox Desktop</li> + <li>Connect your device to your machine via a USB cable</li> + <li>You should see the name of your device in the App Manager's bottom bar. Click on it.</li> + </ol> + </li> + <li>The bottom bar should show "Connected to: xxx"</li> + <li>Click on the <em>Apps</em> panel and add an app (packaged or hosted)</li> + <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li> + <li>The <em>Debug</em> button connects the developer tools to the running app</li> +</ol> + +<h2 id="Device_and_system_configuration">Device and system configuration</h2> + +<p>The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.</p> + +<h3 id="Firefox_1.2_required">Firefox 1.2+ required</h3> + +<p>Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to <code>Settings > Device Information > Software</code>.</p> + +<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p> + +<p>Builds available:</p> + +<ul> + <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</li> + <li>More to follow</li> +</ul> + +<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p> + +<h3 id="Remote_debugging">Remote debugging</h3> + +<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings > Device information > More information > Developer</code> and check the Remote Debugging checkbox.</p> + +<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3> + +<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p> + +<ul> + <li> + <p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p> + <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li> + <li>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal: + <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</li> +</ul> + +<div class="note"> +<p>Note: There's no need to run this command if you installed the ADB Helper Add-on.</p> +</div> + +<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2> + +<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p> + +<ol> + <li>Plug the device into your computer via USB.</li> + <li>Disable Screen lock on your device by going to <code>Settings > Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li> + <li>Start the App Manager — In Firefox Desktop select the <code>Tools > Web Developer > App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li> + <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li> + <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.</p> +</div> + +<h2 id="Using_a_Firefox_OS_Simulator_Add-on"><a name="Simulator">Using a Firefox OS Simulator Add-on</a></h2> + +<p>If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the appropriate simulator for your operating system:</p> + +<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Install Simulator</a></p> + +<div class="note"> +<p>Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.</p> +</div> + +<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p> + +<ul> + <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li> + <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li> + <li>"Cancel": the right hand button cancels the connection.</li> +</ul> + +<h2 id="Apps_panel_2"><a name="Apps_panel">Apps panel</a></h2> + +<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:</p> + +<ul> + <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li> + <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li> +</ul> + +<p>Information about your app should appear on the right hand side of the window, as seen below:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p> +</div> + +<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p> + +<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2> + +<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p> +</div> + +<p>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p> + +<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p> + +<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2> + +<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p> + +<ol> + <li> + <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p> + + <pre class="brush: bash">adb shell</pre> + + <p>Your prompt should change to <code>root@android</code>.</p> + </li> + <li> + <p>Next, stop B2G running using the following command:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Navigate to the following directory:</p> + + <pre>cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Here, update the prefs.js file with the following line:</p> + + <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js</pre> + </li> + <li> + <p>After you've finished editing and saving the file, start B2G again using the following command:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p> + </li> + <li> + <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p> + </li> +</ol> + +<div class="note"> +<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p> +</div> + +<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2> + +<p id="My_device_is_not_recognized">If the device is not recognized:</p> + +<ul> + <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li> + <li>Is your device running at least Firefox OS 1.2?</li> + <li>Did you enable "Remote Debugging" in the settings of your phone?</li> + <li>If you are not using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a>: + <ul> + <li>Did you successfully run the <code>adb forward</code> command?</li> + </ul> + </li> + <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar: + <ul> + <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li> + <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li> + </ul> + </li> + <li>Is your phone screen unlocked?</li> +</ul> + +<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_blocking_b2g=---&cf_crash_signature=&cf_status_b2g18=---&cf_status_b2g_1_1_hd=---&cf_status_b2g_1_2=---&cf_status_firefox24=---&cf_status_firefox25=---&cf_status_firefox26=---&cf_status_firefox27=---&cf_status_firefox_esr17=---&cf_status_firefox_esr24=---&cf_tracking_b2g18=---&cf_tracking_firefox24=---&cf_tracking_firefox25=---&cf_tracking_firefox26=---&cf_tracking_firefox27=---&cf_tracking_firefox_esr17=---&cf_tracking_firefox_esr24=---&cf_tracking_firefox_relnote=---&cf_tracking_relnote_b2g=---&comment=&component=Developer%20Tools%3A%20App%20Manager&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-720=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-781=X&flag_type-787=X&flag_type-791=X&flag_type-799=X&flag_type-800=X&flag_type-802=X&flag_type-803=X&flag_type-809=X&flag_type-825=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Firefox&qa_contact=developer.tools%40firefox.bugs&rep_platform=x86&requestee_type-203=&requestee_type-41=&requestee_type-5=&requestee_type-607=&requestee_type-748=&requestee_type-781=&requestee_type-787=&requestee_type-791=&requestee_type-800=&short_desc=&status_whiteboard=&target_milestone=---&version=Trunk">file a bug</a>.</p> + +<div id="yass_bottom_edge" style="position: absolute; margin: 0px; padding: 0px; border-width: 0px; height: 0px; left: 0px; top: 7873px; width: 100%; display: block;"> </div> diff --git a/files/nl/archive/b2g_os/index.html b/files/nl/archive/b2g_os/index.html new file mode 100644 index 0000000000..69f87d5aa0 --- /dev/null +++ b/files/nl/archive/b2g_os/index.html @@ -0,0 +1,234 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - Basic + - Beginner + - Firefox OS + - Firefox OS starten + - Gaia + - Overzicht +translation_of: Archive/B2G_OS +--- +<div class="summary"> +<p><span class="seoSummary">Firefox OS is the mobile operating system developed by Mozilla, based on Linux and Firefox's powerful Gecko rendering engine.</span></p> +</div> + +<p><strong>Firefox OS</strong> is open source software that allows developers to harness the power and flexibility of the Web to create advanced end-user applications. The <strong>entire user interface is a web app</strong>, which can<strong> </strong>display and launch other apps. A Firefox OS web app is made with HTML, CSS, and JavaScript. In addition, Firefox OS web apps have access to the device hardware and services via an Application Programing Interface (API).</p> + +<p>From a product perspective, Firefox OS is Mozilla's (and our OEM partners') branding and support services applied on top of <strong>Boot to Gecko</strong> (<strong>B2G</strong>), which is the operating system's engineering codename. Boot to Gecko is developed by a team of engineers inside Mozilla plus many external contributors from the wider Mozilla/open source community.</p> + +<section class="outer-apps-box" id="sect1"> +<h2 id="Develop_apps_for_Firefox_OS"><a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS">Develop apps for Firefox OS</a></h2> + +<p>Head over to our App Center for all the information you could possibly need on building open web apps that can be installed on Firefox OS !</p> +</section> + +<div class="column-container"> +<div class="column-third"> +<h2 id="Platform_guides"><a href="/en-US/docs/Mozilla/Firefox_OS/Platform">Platform guides</a></h2> + +<p>Guides for platform developers on how the different components of the Firefox OS platform fit together and work.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></li> + <li><a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="Build_install"><a href="/en-US/docs/Mozilla/Firefox_OS/Build_and_install">Build & install</a></h2> + +<p>Guides covering building and installing Firefox OS on an emulator, compatible device, or desktop simulator.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">Firefox OS build prerequisites</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Preparing for your first build</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">Building Firefox OS</a></li> +</ul> +</div> + +<div class="column-third"> +<h2 id="Developer_phones"><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide">Developer phones</a></h2> + +<p>Information on specific developer phones, such as tweaking, updating, recovering, and buying.</p> + +<ul> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE Open C</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Troubleshooting</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a></li> +</ul> +</div> +</div> + +<div class="column-container equalColumnHeights"> +<div class="zone-callout"> +<h2 id="Get_started_with_Firefox_OS_add-ons">Get started with Firefox OS add-ons</h2> + +<p>Firefox OS add-ons are new in Firefox OS 2.5! To start developing add-ons and getting involved in the add-ons community, read <a href="/en-US/docs/Mozilla/Firefox_OS/Add-ons/Getting_started">Getting started with Firefox OS add-ons</a>.</p> +</div> + +<div class="zone-callout"> +<h2 id="Other_useful_pages"><strong>Other useful pages</strong></h2> + +<ul> + <li><a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/"><span class="gmw_">Firefox OS <span class="gm-spell gm_ gm_d869ea80-e62d-d8a6-6929-a6e9983578ff">styleguide</span></span></a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li> + <li><a href="http://firefoxosbooks.org/">Firefox OS Books</a></li> +</ul> +</div> +</div> + +<div class="note"> +<p><strong>Note:</strong> We are keeping track of ongoing work on Firefox OS documentation on our <a href="/en-US/docs/MDN/Doc_status/Firefox_OS">Firefox OS documentation status</a> page. If you want to help contribute to Firefox OS documentation, please have a look at this page to see what work needs tweaking!</p> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/en-US/Firefox_OS/Introduction">Introduction</a></li> + <li><a href="/en-US/Firefox_OS/Platform" title="Documentation about the Firefox OS platform, including Gonk, Gaia, and everything in between.">Platform guide</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Platform">Platform guide overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Platform/Architecture" title="An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.">Architecture overview</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Apps_architecture" title="An overview of the application model on Firefox OS.">Apps architecture</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gonk" title="Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates."><span class="gm-spell gm_ gm_db111eae-c215-78a2-9789-97be921cbbdc">Gonk</span></a></li> + <li><a href="/en-US/Gecko" title="Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.">Gecko</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia" title="Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.">Gaia</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps guide</a></li> + <li><a href="/en-US/Firefox_OS/Security" title="Documentation about security in Firefox OS">Security</a> + <ol> + <li><a href="/en-US/Firefox_OS/Security/Security_model">The Firefox OS security model</a></li> + <li><a href="/en-US/Firefox_OS/Security/System_security">System security</a></li> + <li><a href="/en-US/Firefox_OS/Security/Application_security">Application security in Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Security/Installing_and_updating_applications">Securely installing and updating applications</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS </a></li> + <li><a href="/en-US/Firefox_OS/Platform/Feature_support_chart" title="A chart of which features are available in which types of Firefox OS builds.">Feature support chart</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Settings_list" title="A list of common setting names that can be used with the settings API">Settings list</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS" title="This includes documentation for building and installing the platform onto devices, as well as building the simulator and emulators.">Build and install</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS">Build and install overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_process_summary">Firefox OS build process summary</a></li> + <li><a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites" title="Steps to take before you build Firefox OS for the first time.">Build prerequisites</a></li> + <li><a href="/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Before you can build Firefox OS, you need to clone the repository and configure your build.">Preparing for your first build</a></li> + <li><a href="/en-US/Firefox_OS/Building" title="How to build Firefox OS.">Building Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Building_Firefox_OS_for_flame_on_OSX">Building Firefox OS for flame on OSX</a></li> + <li><a href="/en-US/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Using Gaia within Firefox, running Firefox OS on a mobile device, or in a desktop-based simulator. Which is best?">Choosing how to run Gaia or Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Building_the_Firefox_OS_simulator" title="Simulating the Gaia environment in a desktop application - more accurate than running Gaia in Firefox but not as accurate as the emulators.">Building the Firefox OS simulator</a></li> + <li><a href="/en-US/Firefox_OS/Using_the_B2G_emulators" title="A guide to building and using the Firefox OS emulators, and when to use which emulator.">Using the Firefox OS emulators</a></li> + <li><a href="/en-US/Firefox_OS/Installing_on_a_mobile_device" title="How to install Firefox OS on a real mobile device.">Installing Firefox OS on a mobile device</a></li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_update_packages">Creating and applying Firefox OS update packages</a></li> + <li><a href="/en-US/Firefox_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li> + <li><a href="/en-US/Firefox_OS/Building_and_installing_Firefox_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS" title="Hack the OS, customize your builds, get things the way you think they should be!">Developing Firefox OS</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Developing_Firefox_OS">Developing Firefox OS overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Filing bugs against Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/modifying_hosts_file" title="A guide to what can be achieved by modifying the Firefox OS hosts file.">Modifying the hosts file</a></li> + <li><a href="/en-US/Firefox_OS/Customization_with_the_.userconfig_file" title="How to customize the build and execution of Firefox OS by changing the .userconfig file.">Customization with the .userconfig file</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script">Customizing the b2g.sh script</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Firefox_OS/Porting" title="Information about how to port Firefox OS to new devices.">Porting Firefox OS</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia">Developing Gaia</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Developing_Gaia">Developing Gaia overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Test_Gaia_code_changes">Testing Gaia code changes</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li> + <li><a href="/en-US/Firefox_OS/Platform/Gaia/Build_System_Primer">Gaia build system primer</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_build-time_apps">Customizing build-time apps</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Market_customizations_guide">Market customizations guide</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Localizing Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/L10n_Best_Practices">L10n Best Practices</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">Make options reference</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li> + </ol> + </li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Add-ons">Firefox OS add-ons</a></li> + <li><a href="/en-US/Firefox_OS/Phone_guide" title="A developer's guide to the Firefox OS developer phones available.">Firefox OS phone guide </a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Phone_guide">Firefox OS phone guide overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE OPEN</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN_C">ZTE OPEN C</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Firefox_OS_device_features">General device features</a></li> + <li><a href="/en-US/Firefox_OS/Troubleshooting" title="A guide to resolving common problems with Firefox OS.">Troubleshooting</a></li> + <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/TVs_connected_devices">Firefox OS on TVs and connected devices</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/TVs_connected_devices">TVs and connected devices overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/TVs_connected_devices/How_to_get_started_with_TV_apps_development">How to get started with TV apps development</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/How_to_connect_WebIDE_to_TV_%28VIErA%29">How to connect WebIDE to TV (VIERA CX/CR series)</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_broadcast_streams_Firefox_OS">TV broadcast streams on Firefox OS products</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/Web_animations_on_large_screen">Web animations on large screens</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li> + <li><a href="/en-US/docs/Web/Apps/Design/Firefox_OS_TV_UX">Firefox OS for TV UX Overview</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Releases" title="This section of the site contains release notes, explaining what new features and changes of significance to developers have landed in each new release of Gaia and Gecko on Firefox OS.">Firefox OS release notes</a> + <ol> + <li><a href="/en-US/Firefox_OS/Releases">Firefox OS release notes overview</a></li> + <li><a href="/en-US/Firefox_OS/Releases/2.2">Firefox OS 2.2 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/2.1">Firefox OS 2.1 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/2.0">Firefox OS 2.0 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li> + <li><a href="/en-US/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Automated_testing">Automated testing</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Automated_testing">Firefox OS automated testing overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Running_Tests_on_Firefox_OS_for_Developers">Running tests on Firefox OS: A guide for developers</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/gaia-ui-tests">Gaia UI tests</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_integration_tests">Gaia integration tests</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Gaia_unit_tests">Gaia unit tests</a></li> + <li><a href="/en-US/Firefox_OS/Automated_testing/Gaia_performance_tests">Gaia performance tests</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Mochitests"><span class="gm-spell gm_ gm_8ea2aeb5-60d9-d796-930f-2db1e4217eaa">Mochitests</span></a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Reftests"><span class="gm-spell gm_ gm_9567400a-e713-3d43-ffa9-05fd8c3a28a2">Reftests</span></a></li> + <li><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">WebAPI tests</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/XPCShell"><span class="gmw_"><span class="gm-spell gm_ gm_cc093417-aacf-72e2-e15f-c15a7509a6a8">xpcshell</span> tests</span></a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/MTBF_tests">MTBF test</a></li> + <li><a href="/en-US/docs/Marionette" title="/en-US/docs/Marionette">Marionette</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Automated_testing/Treeherder">Treeherder</a></li> + </ol> + </li> + <li><a href="/en-US/Firefox_OS/Debugging" title="A guide to debugging both your mobile apps and Firefox OS itself.">Debugging</a> + <ol> + <li><strong><a href="/en-US/Firefox_OS/Debugging">Firefox OS debugging overview</a></strong></li> + <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">Connecting a Firefox OS device to the desktop</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS using Firefox developer tools</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></li> + <li><a href="/en-US/Firefox_OS/Firefox_OS_usage_tips/taking_screenshots">Taking screenshots</a></li> + <li><a href="/en-US/docs/Tools/WebIDE" title="A tool that allows you to install open web apps from your computer to a device capable of installing them (such as Firefox OS) - and debug any running app.">Using the WebIDE</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Firefox_OS_crash_reporting">Firefox OS crash reporting</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_and_security_testing">Debugging and security testing with Firefox OS</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_gdb"><span class="gmw_">Debugging B2G using <span class="gm-spell gm_ gm_7a44a2c7-9d5d-e693-57b5-a88dd9adacd8">gdb</span></span></a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Debugging_B2G_using_valgrind">Debugging B2G using Valgrind</a></li> + </ol> + </li> +</ol> diff --git a/files/nl/archive/b2g_os/introduction/index.html b/files/nl/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..14a29acf84 --- /dev/null +++ b/files/nl/archive/b2g_os/introduction/index.html @@ -0,0 +1,85 @@ +--- +title: Introductie Firefox OS +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +<p><strong>Firefox OS</strong> (ook wel bij zijn codename "Boot to Gecko" or "B2G" genoemd) is Mozilla's mobile openbron besturings systeem gebaseerd op Linux en Mozilla's Gecko technologie. Firefox OS is een mobiel besturings systeem dat vrij is van eigen technologie. Terwijl het toch nog steeds een platform aan applicatieontwerpers biedt die daardoor uitstekende produkten kan ontwikkelen. Bovendien is het sterk en draagbaar genoeg om de eindgebruiker tevreden te stellen.</p> +<p>Voor Web ontwerpers, het belangrijkste om te onthouden is dat de hele user interface een Web app is, een die in staat is om andere Web apps te laten starten en draaien. Elke verandering die je aan de user interface en de aan de applicaties doet, dan creeer je in feite een soort van run van webpagina`s op Firefox OS, Zei het met een verbeterde toegang tot de hardware en functies van het mobiele apparaat.</p> +<p><a href="/en-US/docs/docs/Mozilla_OS/Firefox_OS/Building_and_Installing_Firefox_OS" title="/en-US/docs/docs/Mozilla_OS/Firefox_OS/Building_and_Installing_Firefox_OS">In onze handige gids</a> leer je hoe Firefox OS moet bouwen en instaleren.</p> +<h2 id="Hardware_eisen">Hardware eisen</h2> +<p>De meeste ARM-based mobiele apparaten zijn sterk genoeg om te kunnen dokken met Firefox OS. Dit gedeelt is genoeg om aan zowel aan de basis hardware eisen te voldoen, als zowel aan de hardware minimale toekomstige eisen.</p> +<table> + <thead> + <tr> + <th scope="col">Onderdeel</th> + <th scope="col">Minimum</th> + <th scope="col">Aanbevolen</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">CPU</th> + <td>ARMv6</td> + <td>Cortex A5 klasse of hoger<br> + ARMv7a met NEON</td> + </tr> + <tr> + <th scope="row">GPU</th> + <td>—</td> + <td>Adreno 200 klasse of hoger</td> + </tr> + <tr> + <th scope="row">Connectivity</th> + <td>—</td> + <td>WiFi<br> + 3G</td> + </tr> + <tr> + <th scope="row">Sensoren</th> + <td>—</td> + <td>Versneller<br> + Omgeving<br> + Ambient light<br> + A-GPS</td> + </tr> + </tbody> +</table> +<p>Voor een goede gebruikers ervaring, is het een goed idee om een toestel te nemen dat een goed kleurenprofiel biedt (uitgevoerd door de grafische driver) en over een hoofdtelefoonaansluiting die over mute beschikt voor het afspelen van media. De smartfones van tegenwoordig beschikken hier allemaal over.</p> +<h2 id="Gebruiks_tips">Gebruiks tips</h2> +<p>Dit gedeelte zal je van tips voorzien als je daadwerkelijk Firefox OS gaat gebruiken. Zie dit als een soort van tijdelijke oplossing, tot we daadwerkelijk een handleiding hebben.</p> +<h3 id="Telefoon_ontgrendelen">Telefoon ontgrendelen</h3> +<p>Als je bouw naar Firefox OS om een code gaat vragen om je toestel te ontgrendelen, is de code 0000. Sommige toestellen zullen hier later omvragen, wanneer we bezig zijn met bouwen en testen van de schermbeveiliging.</p> +<h3 id="Nemen_van_een_screenshot">Nemen van een screenshot</h3> +<p>Het nemen van een screenshot, is niet meer dan het indrukken van de aan/uitknop en en navigatieknop tegelijkertijd. Het screenshot zal in <code>/sdcard/screenshots</code> op je toestel opgeslagen worden. Je kan er ook bij via de gallerij op je toestel.</p> +<p>Als om een of andere reden dit niet werkt. Dan kun je dit ook via de terminal op de Linux or Mac OS X computer doen dat een Firefox OS bouwsysteem heeft geinstaleerd.</p> +<p>Zorg dat je ffmpeg hebt geinstaleerd.</p> +<ol> + <li>Op Mac, als je de Macports gebruikt, doe je dat via <code>sudo port install ffmpeg</code>.</li> + <li>Voor homebrew, gebruik <code>brew install ffmpeg</code></li> + <li>Op Linux (Ubuntu/Debian), gebruik je <code>sudo apt-get install ffmpeg</code>.</li> + <li>Sluit je telefoon aan via een USB kabel.</li> + <li>Doe met je telefoon wat je dan ook wilt doen voor je screenshot.</li> + <li><code>cd</code> in de <code>B2G/gaia</code> directory</li> + <li><code>make screenshot</code></li> + <li>Je hebt nu een screenshot onder de naam <code>screenshot.png</code>.</li> +</ol> +<h3 id="Remote_debugging_met_ADB">Remote debugging met ADB</h3> +<p>Om USB Debugging via adb mogelijk te maken, open Settings App en navigaeer naar Toestel Informatie > Meer Informatie > Fabrikant. Van de lijst, list, zet een vinkje bij Remote Debugging. Eindelijk, sluit het toestel via de USB met de computer.</p> +<h3 id="Toetsen_en_knoppen">Toetsen en knoppen</h3> +<p>Een typisch Firefox OS toestel heeftr een paar physical hardware knoppen:</p> +<dl> + <dt> + Home button</dt> + <dd> + Dit is meestal de knop onder je scherm. Als je hier op drukt, zal het je terug brengen naar je app launcher. Ingedrukt houden opent het gedeelte voor het veranderen van je zicht. switching view;Om te stoppen met de app wrijf je omhoog over het scherm.</dd> + <dd> + </dd> + <dt> + Volume regelaar</dt> + <dd> + Aan de linker kant bevindt volumeknop zich; Druk op de bovenste helft voor harder en druk op de onderste helft van de volumeknop voor zachter.</dd> + <dt> + Aan/uit knop</dt> + <dd> + De aan/uitknop bevindt zich aan de rechter bovenkant van het toestel.</dd> +</dl> diff --git a/files/nl/archive/b2g_os/quickstart/index.html b/files/nl/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/nl/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p>Quickstart information on coding open web apps.</p> +</div> +<dl> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> + <dd> + What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> + <dd> + This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> + <dd> + An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> + <dd> + An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> + <dd> + If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> + <dd> + If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> + <dd> + This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> + <dd> + How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> + <dd> + Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> +</dl> diff --git a/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html b/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html new file mode 100644 index 0000000000..a0981402ab --- /dev/null +++ b/files/nl/archive/b2g_os/quickstart/je_eerste_app/index.html @@ -0,0 +1,205 @@ +--- +title: Je eerste app +slug: Archive/B2G_OS/Quickstart/Je_eerste_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<article class="brush: js"> + <div class="summary"> + <p>Open web-apps bieden webontwikkelaars waar ze al jaren op hebben gewacht: een cross-platform-omgeving gericht op installeerbare apps ontwikkelt met alleen HTML, CSS en Javascript — met Firefox OS als het eerste toegewijde, open webapps-platform. Deze handleiding heeft als doel je snel aan de slag te laten gaan met een basale architectuur en bouwinstructies zodat je de volgende succesvolle app kunt maken!</p> + </div> + <p>If you'd like to follow along with this guide, you can download our <a href="https://github.com/chrisdavidmills/mdn-app-template">quick start app template</a>. Find more out about what this contains by reading our <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Apps template</a> guide.</p> + <h2 id="App_Structure">App Structure</h2> + <h3 id="Packaged_vs._Hosted_Apps">Packaged vs. Hosted Apps</h3> + <p>There are two types of open web apps: <code>packaged</code> and <code>hosted</code>. Packaged apps are essentially <code>zip</code> files containing all application assets: HTML, CSS, JavaScript, images, manifest, etc. Hosted apps are run from a server at a given domain, just like a standard website. Both app types require a valid manifest. When it comes time to list your app on the Firefox Marketplace, you will either upload your app as a zip file or provide the URL to where your hosted app lives.</p> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> + </div> + </div> + <p>For the purposes of this guide, you'll create a hosted app which will live at your <code>localhost</code> address. Once your app is ready to list on the Firefox Marketplace, you can make the decision to bundle it as a packaged app or launch it as a hosted app.</p> + <h3 id="App_Manifests">App Manifests</h3> + <p>Every Firefox app requires a manifest.webapp file at the app root. The <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:</p> + <pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "Your new awesome Open Web App", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Your Name", + "url": "http://yourawesomeapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La tua nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "en" +}</pre> + <div style="width: 480px; margin: 0 auto;"> + <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p> + <div class="video-caption"> + <p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> + </div> + </div> + <p> </p> + <p>A basic manifest is all you need to get started. For more details about manifests, read <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> + <h2 id="App_Layout_Design">App Layout & Design</h2> + <p>Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> allow you to adapt layout to device, as shown in this skeleton CSS example:</p> + <pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + <p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Choose the framework(s) that best fit your app and development style.</p> + <h2 id="Web_APIs">Web APIs</h2> + <p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> + <pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + <p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> + <pre class="brush: java">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + <p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> + <p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> + <h3 id="Install_API_functionality">Install API functionality</h3> + <p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> + <pre class="brush: html"><button id="install-btn">Install app</button></pre> + <p>This button's functionality is implemented using the Install API (see install.js):</p> + <pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + <p>Let's run through briefly what is going on:</p> + <ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> + </ol> + <p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + <div class="note"> + <p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> + </div> + <h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + <p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> + <pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + <p>The three levels of permission are as follows:</p> + <ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> + </ul> + <p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + <div class="note"> + <p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> + </div> + <h2 id="Tools_Testing">Tools & Testing</h2> + <p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> + <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + <p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> + <h3 id="App_Manager">App Manager</h3> + <p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + <h3 id="Unit_Testing">Unit Testing</h3> + <p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + <h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + <p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + <p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + <h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + <p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> + <h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + <ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> + </ol> +</article> diff --git a/files/nl/archive/b2g_os/simulator/index.html b/files/nl/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..75fee953e1 --- /dev/null +++ b/files/nl/archive/b2g_os/simulator/index.html @@ -0,0 +1,246 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +<div class="warning"> + De Firefox OS Simulator werkt op het moment niet met Mac OS X 10.9 (Mavericks). Zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=930511">bug 930511</a> voor de details. Er is wel een uitweg, je zult Firefox moeten opstarten vanuit de disk image (DMG), dus zonder het eigenlijk te installeren.</div> +<div class="note"> + <p>De Firefox OS Simulator is op dit moment nog in een vroeg stadium, en is nog niet zo betrouwbaar en volledig als wij willen dat hij is</p> + <p>Als je bugs vind, geef ze dan door <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">op github</a>, heb je vragen, probeer het dan te vragen op de <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developers-tools mailing</a> list of in <a href="irc://irc.mozilla.org/#devtools">#devtools op irc.mozilla.org</a></p> + <p>Lees hoe je <a href="#Simulator-verbose-logging">verbose logging aanzet</a> en<a href="#Simulator-latest-preview-build"> hoe je de laatste voorbeeld build krijgt </a>in het <a href="#Unsupported-APIs">help center</a>.</p> +</div> +<p>The Firefox OS Simulator add-on is een tool die je er bij helpt om je <a href="/nl/docs/Apps">Firefox OS app</a> te testen en te debuggen op je desktop. </p> +<p>De code-test-debug cyclus is veel sneller met de simulator dan met een echt toestel, en je hoeft natuurlijk geen echt toestel te bezitten om het te gebruiken!</p> +<p>De simulator bestaat hoofdzakelijk uit:</p> +<p>*/ originele pagina vanaf hier, help ons met vertalen /*</p> +<ul> + <li><strong>the Simulator</strong>: this includes the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS desktop client</a>, which is a version of the higher layers of <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> that runs on your desktop. The Simulator also includes some <a href="#Simulator-toolbar" title="#Simulator-toolbar">additional emulation features</a> that aren't in the standard Firefox OS desktop builds.</li> + <li><strong>the Dashboard</strong>: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.</li> +</ul> +<p>The screenshot below shows a debugging session using the Simulator.</p> +<p>The Dashboard is on the top-right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top-left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p> +<p>This guide covers the following topics:</p> +<ul> + <li><a href="#Installing" title="#Installing">how to install the Simulator add-on</a></li> + <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">how to add, remove, and refresh apps</a></li> + <li><a href="#Manifest-validation" title="#Manifest-validation">manifest validation</a></li> + <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li> + <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li> + <li><a href="#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li> + <li><a href="#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li> + <li><a href="#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li> +</ul> +<div class="note"> + For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div> +<h2 id="Installing_the_Simulator_add-on"><a name="Installing_the_Simulator">Installing the Simulator add-on</a></h2> +<p>The Simulator is packaged and distributed as a Firefox add-on. To install it:</p> +<ol> + <li>Using Firefox, go to <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">the Simulator's page on addons.mozilla.org</a>.</li> + <li>Click "Add to Firefox".</li> + <li>Once the add-on has downloaded you will be prompted to install it: click "Install Now".</li> +</ol> +<p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. It it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.<br> + <br> + Once you have installed the Simulator add-on, Firefox will periodically check for newer versions and keep it up to date for you.</p> +<p>The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br> + The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p> +<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2> +<h3 id="Adding_apps">Adding apps</h3> +<p>To add a <a href="/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br> + <br> + To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.<br> + <br> + When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p> +<p>Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.</p> +<h3 id="Managing_apps">Managing apps</h3> +<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br> + <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br> + Each entry gives us the following information about the app:</p> +<ul> + <li>its name, taken from the manifest</li> + <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li> + <li>a link to its manifest file</li> + <li>the result of manifest validation</li> +</ul> +<p>It also gives us four commands:</p> +<ul> + <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.</li> + <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li> + <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li> + <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li> +</ul> +<div class="note"> + <p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p> +</div> +<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3> +<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p> +<ul> + <li>manifest errors: problems that will prevent your app from installing or running</li> + <li>manifest warnings: problems that may prevent your app from working properly</li> + <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li> +</ul> +<p>It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.</p> +<h4 id="Manifest_errors">Manifest errors</h4> +<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p> +<ul> + <li>the manifest does not include the mandatory "name" field</li> + <li>the manifest is not valid JSON</li> + <li>the app is a hosted app, but the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li> + <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li> +</ul> +<p>Here's the result of trying to add a manifest file with a missing "name":<br> + <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p> +<h4 id="Manifest_warnings">Manifest warnings</h4> +<p>The Dashboard will report the following manifest issues as warnings:</p> +<ul> + <li>missing icons</li> + <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li> + <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li> + <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li> + <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li> + <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li> +</ul> +<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4> +<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p> +<ul> + <li>the <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li> + <li>the manifest requests a <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li> +</ul> +<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2> +<p>There are two different ways the Simulator may be started:</p> +<ul> + <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li> + <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li> +</ul> +<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br> + <br> + The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p> +<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p> +<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3> +<p>In the bottom toolbar, from left to right, these are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p> +<ul> + <li>the <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)</li> + <li>the <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li> + <li>the <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the <a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li> +</ul> +<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p> +<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3> +<p>In the top menubar, you can access some useful commands to make development more efficient:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p> +<ul> + <li><strong>File -> Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li> + <li><strong>App -> Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li> +</ul> +<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p> +<ul> + <li>make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)</li> + <li>type the keyboard shortcut to refresh the app running in the Simulator</li> +</ul> +<div class="note"> + <p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p> + <ul> + <li> + <p>localStorage / sessionStorage</p> + </li> + <li> + <p>cookies</p> + </li> + <li> + <p>indexedDB</p> + </li> + <li> + <p>appCache</p> + </li> + </ul> +</div> +<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2> +<p>You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> and the <a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p> +<div class="geckoVersionNote"> + <p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p> +</div> +<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p> +<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p> +<h3 id="Web_Console">Web Console</h3> +<p>The app can log to this console using the global <a href="/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p> +<h3 id="Debugger">Debugger</h3> +<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p> +<h3 id="Style_Editor">Style Editor</h3> +<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p> +<h3 id="Profiler">Profiler</h3> +<p>Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p> +<h3 id="Network_Monitor">Network Monitor</h3> +<p>Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p> +<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2> +<p>If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p> +<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p> +<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2> +<p>If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.</p> +<h3 id="Connecting_a_device">Connecting a device</h3> +<p>To connect the device, follow the instructions in the guide to <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p> +<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3> +<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p> +<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p> +<div class="note"> + <p><strong>Manual Steps:</strong></p> + <ul> + <li> + <p>Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content</p> + </li> + <li> + <p>If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect</p> + </li> + </ul> +</div> +<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3> +<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p> +<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3> +<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p> +<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2> +<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p> +<h3 id="Hardware_limitations">Hardware limitations</h3> +<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p> +<h3 id="Audiovideo_codecs">Audio/video codecs</h3> +<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p> +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> +<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p> +<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3> +<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p> +<ul> + <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li> +</ul> +<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2> +<p>The Firefox OS Simulator is still at an early stage of development, and isn't yet as reliable and complete as we'd like it to be.</p> +<p>If you find any bugs, please <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">file them on GitHub</a>. If you have a question, try asking us on the <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> or on <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a>.</p> +<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3> +<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p> +<h3 id="How_to_get_the_latest_preview_build"><a name="Simulator-latest-preview-build"></a>How to get the latest preview build</h3> +<p>As the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Installing_the_Simulator_add-on">section on installing the Simulator</a> explains, you can get the latest release of the Simulator add-on from <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">addons.mozilla.org</a>.</p> +<p>Sometimes you might want to try out the very latest features before they're officially released. If so, you can download preview builds from the following URLs:</p> +<ul> + <li>Windows: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi</a></li> + <li>Mac: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi</a></li> + <li>Linux: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi</a></li> +</ul> +<p>Be aware that preview builds are less stable and thoroughly tested than release builds.</p> diff --git a/files/nl/archive/css3/index.html b/files/nl/archive/css3/index.html new file mode 100644 index 0000000000..ca57cadba4 --- /dev/null +++ b/files/nl/archive/css3/index.html @@ -0,0 +1,976 @@ +--- +title: CSS3 +slug: Archive/CSS3 +tags: + - CSS + - CSS Referentie + - Intermediate +translation_of: Archive/CSS3 +--- +<p><span class="seoSummary"><strong>CSS3</strong> is the latest evolution of the <em>Cascading Style Sheets</em> language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a>, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">transitions</a> or <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">animations</a>, as well as new layouts like <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">multi-columns</a>, <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexible box</a> or grid layouts.</span> Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.</p> + +<h2 id="Modules_and_the_standardization_process">Modules and the standardization process</h2> + +<p>CSS Level 2 needed 9 years, from August 2002 to June 2011 to reach the Recommendation status. This was due to the fact that a few secondary features hold back the whole specification. In order to accelerate the standardization of non-problematic features, the <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> of the W3C, in a decision referred as the <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>, divided CSS in smaller components called <em>modules</em> . Each of these modules is now an independent part of the language and moves towards standardization at its own pace. While some modules are already W3C Recommendations, other still are early Working Drafts. New modules are also added when new needs are identified.</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a> Formally, there is no CSS3 standard <em>per se</em> . Each module being standardized independently, the standard CSS consists of CSS2.1 amended and extended by the completed modules, not necessary all with the same level number. At each point of time, a snapshot of the CSS standard can be defined, listing CSS2.1 and the mature modules.</p> + +<p>The W3 consortium periodically publishes such snapshots, like in <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a> or <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010.</a></p> + +<p>Though today no module with a level greater than 3 is standardized, this will change in the future. Some modules, like Selectors 4 or CSS Borders and Backgrounds Level 4 already have an Editor's Draft, though they haven't yet reached the First Published Working Draft status.</p> + +<h2 id="CSS_modules_status" style="">CSS modules status</h2> + +<h3 id="Stable_modules">Stable modules</h3> + +<p>A few CSS modules are already fairly stable and have reached one of the three recommendation level of the CSSWG: Candidate Recommendation, Proposed Recommendation or Recommendation. These can be used without prefix and are pretty stable, though a few features can still be dropped at the Candidate Recommendation stage.</p> + +<p>These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{cssxref("<color>")}} values. It also defines the <code>currentColor</code> keyword as a valid color.</p> + + <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,0.0)</code> .</p> + + <p>It deprecates the <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color keywords that shouldn't be used in a production environment anymore</a>.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> .</li> + <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li> + <li>Pseudo-elements are now characterized by two colons rather then one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li> + <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em>, using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p> + + <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td> + </tr> + <tr> + <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for <code>uri()</code> defined ones.</li> + <li>Support for multiple background images.</li> + <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li> + <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li> + <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li> + <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li> + <li>Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li> + <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Defines the {{cssxref("<image>")}} data type.</p> + + <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p> + + <p>Adds:</p> + + <ul> + <li>The <code>dppx</code> unit to the {{cssxref("<resolution>")}} data type.</li> + <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li> + <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br> + <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p> + + <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p> + + <p>Adds:</p> + + <ul> + <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li> + <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li> + <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li> + <li>Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.</li> + <li>Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.</li> + <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Several types definition, like <code><ident></code> and <code><custom-ident></code>, have been deferred to CSS Values and Units Module Level 4.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text Decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li> + <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li> + </ul> + + <p>Precises:</p> + + <ul> + <li>The paint order of the decorations.</li> + </ul> + + <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p> + + <p>Adds:</p> + + <ul> + <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li> + <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li> + <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li> + <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li> + <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li> + <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.</li> + <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The <code>initial</code>, <code>unset</code> values for properties.</li> + <li>The CSS {{ cssxref("all") }} property.</li> + <li>The scoping mechanism.</li> + </ul> + + <p>Precises:</p> + + <ul> + <li>Interaction of media-dependent @import statements and style sheet loading requirements.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS Shapes") }}</td> + </tr> + <tr> + <td colspan="2">Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td> + <td>{{ Spec2("CSS Masks") }}</td> + </tr> + <tr> + <td colspan="2">Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.</td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3> + +<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td> + <td>{{ Spec2("Web Animations") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Counter Styles") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Syntax") }}</td> + </tr> + <tr> + <td colspan="2">Precises how charsets are determined; minor changes in parsing and tokenization algorithms.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td> + <td>{{ Spec2("CSS Will Change") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li> + <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>, <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code>, <code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li> + </ul> + + <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. + <p>Adds:</p> + + <ul> + <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li> + <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li> + <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.</li> + <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li> + <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li> + <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li> + <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3> + +<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Adds:</p> + + <ul> + <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br> + <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li> + <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li> + <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li> + <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br> + <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li> + <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br> + <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box Alignment") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Paged Media") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM View") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>Extends:</p> + + <ul> + <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li> + <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li> + </ul> + + <p>Adds:</p> + + <ul> + <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li> + <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li> + <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li> + <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li> + <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td> + <td>{{ Spec2("CSS Exclusions") }}</td> + </tr> + <tr> + <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td> + <td>{{ Spec2("Filters 1.0") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Template") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Sizing") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS Line Grid") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Positioning") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Ruby") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Overflow") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Font Loading") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Display") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scope") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Media Queries") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS Non-element Selectors") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td> + <td>{{ Spec2("Geometry Interfaces") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3> + +<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Content") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table" style="width: 100%;"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline Layout") }}</td> + </tr> + <tr> + <td colspan="2"> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/nl/archive/index.html b/files/nl/archive/index.html new file mode 100644 index 0000000000..0969ff87c1 --- /dev/null +++ b/files/nl/archive/index.html @@ -0,0 +1,20 @@ +--- +title: Archive of obsolete content +slug: Archive +translation_of: Archive +--- +<p>(nl translation)</p> + +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/nl/archive/meta_docs/examples/alternate_license_block/index.html b/files/nl/archive/meta_docs/examples/alternate_license_block/index.html new file mode 100644 index 0000000000..df9f83c450 --- /dev/null +++ b/files/nl/archive/meta_docs/examples/alternate_license_block/index.html @@ -0,0 +1,16 @@ +--- +title: Alternatief licentieblok +slug: Archive/Meta_docs/Examples/Alternate_License_Block +translation_of: Archive/Meta_docs/Examples/Alternate_License_Block +--- +<p> </p> + +<p>Het meeste van de MDC-inhoud is beschikbaar onder de voorwaarden van de Creative Commons: Attribution-Sharealike-licentie, met de meeste codevoorbeelden beschikbaar onder de voorwaarden van de MIT-licentie of (wanneer toegevoegd na 20-08-2010) in het publieke domein. Zie <a href="/Project:en/Copyrights" title="Project:en/Copyrights">MDC:Copyrights</a> voor details.</p> + +<p>Als een pagina onder een andere licentie valt dan de <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike-licentie</a>, moet er onderaan elke alternatief gelicentieerde pagina een alternatief licentieblok worden toegevoegd.</p> + +<p>Een voorbeeld hiervan is:</p> + +<div class="licenseblock"> +<p>Copyright (c) (Jaar) by (Naam van auteur). Dit materiaal mag alleen worden verspreid onder de voorwaarden uiteengezet in de <a class="external" href="http://www.opencontent.org/openpub/">Open Publication License, v1.0 of later</a>. (De nieuwste versie is momenteel beschikbaar op <a class="external" href="http://www.opencontent.org/openpub/" rel="freelink">http://www.opencontent.org/openpub/</a>.)</p> +</div> diff --git a/files/nl/archive/meta_docs/examples/index.html b/files/nl/archive/meta_docs/examples/index.html new file mode 100644 index 0000000000..a811e7397f --- /dev/null +++ b/files/nl/archive/meta_docs/examples/index.html @@ -0,0 +1,17 @@ +--- +title: Examples +slug: Archive/Meta_docs/Examples +tags: + - MDC Project + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs/Examples +--- +<p> +</p><p>The following is a list of examples for MDC Wiki markup and formatting. You are welcome to add more examples here. +</p> +<h3 id="Examples" name="Examples"> Examples </h3> +<ul><li> <a>MDC:Examples:Original Document Information</a> +</li><li> <a>MDC:Examples:Alternate License Block</a> +</li></ul> +{{ languages( { "fr": "Project:fr/Exemples", "pl": "Project:pl/Przyk\u0142ady" } ) }} diff --git a/files/nl/archive/meta_docs/index.html b/files/nl/archive/meta_docs/index.html new file mode 100644 index 0000000000..52de2c8447 --- /dev/null +++ b/files/nl/archive/meta_docs/index.html @@ -0,0 +1,12 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +<p>Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/archive/meta_docs/mdn_content_on_webplatform.org/index.html b/files/nl/archive/meta_docs/mdn_content_on_webplatform.org/index.html new file mode 100644 index 0000000000..d897d66aab --- /dev/null +++ b/files/nl/archive/meta_docs/mdn_content_on_webplatform.org/index.html @@ -0,0 +1,21 @@ +--- +title: MDN content op WebPlatform.org +slug: Archive/Meta_docs/MDN_content_on_WebPlatform.org +tags: + - MDN +translation_of: Archive/Meta_docs/MDN_content_on_WebPlatform.org +--- +<p><a href="http://www.webplatform.org/" title="http://www.webplatform.org/">Web Platform Docs</a> (WPD) is een site voor documentatie en educatie over Web standards, gerund door <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> en gesupport door Mozilla, onder anderen. Iedereen can content van MDN bijdragen naar WebPlatform.org, Onder de termen van MDN's <a href="http://creativecommons.org/licenses/by-sa/2.5/" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Share-Alike 2.5</a> (CC-BY-SA) licentie. Content die vanaf MDN komt moet worden toegeschreven aan MDN, met een link naar het bronartikel. De Web Platform Docs site biedt hulp hierbij door dit in een systematische manier te doen.</p> + +<p>Als u een account maakt op WPD en een nieuwe pagina maakt, zal u zien dat er een optie is in het "new page" formulier om aan te geven dat de content die u bijdraagt van MDN af komt, en om de originele URL op MDN bij te voegen. Er is ook een manier om op WPD gedeeltes van artikelen vanaf MDN te markeren, voor gevallen waar ze worden samengevoegd tot CC-BY content. (CC-BY is de standaard licentie voor hergebruik op WPD.) De <a href="http://docs.webplatform.org/wiki/WPD:External_Attribution" title="http://docs.webplatform.org/wiki/WPD:External_Attribution">"External Attribution"</a> pagina op WebPlatform.org Beschrijft hoe men dat doet.</p> + +<h2 id="Vragen">Vragen?</h2> + +<dl> + <dt>Over MDN of zijn content</dt> + <dd>Plaats ze op het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussie forum</a>, of vraag ze op <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn on irc.mozilla.org</a>.</dd> + <dt>Over de licentievoorwaarden van Mozilla</dt> + <dd>Stuur een e-mail naar <a href="http://mailto:licensing@mozilla.org" title="http://mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</dd> + <dt>Over Web Platform Docs, de inhoud, de licentie of de gebruiksvoorwaarden</dt> + <dd>Plaats ze op de <a href="http://lists.w3.org/Archives/Public/public-webplatform/" title="http://lists.w3.org/Archives/Public/public-webplatform/">"public-webplatform"</a> mail lijst, gerund door W3C, of vraag het op <a href="irc://irc.freenode.org/webplatform" title="irc://irc.freenode.org/webplatform">#webplatform on irc.freenode.org</a>.</dd> +</dl> diff --git a/files/nl/archive/mozilla/index.html b/files/nl/archive/mozilla/index.html new file mode 100644 index 0000000000..34a4090d47 --- /dev/null +++ b/files/nl/archive/mozilla/index.html @@ -0,0 +1,223 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +<p><strong>Translation in progress</strong></p> + +<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p> + + + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ActiveX_Control_for_Hosting_Netscape_Plug-ins_in_IE">ActiveX Control for Hosting Netscape Plug-ins in IE</a></dt> + <dd class="landingPageList">Microsoft has removed support for Netscape plug-ins from IE 5.5 SP 2 and beyond. If you are a plug-in author, you may find this project saves you a lot of work!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/ant_script_to_assemble_an_extension">ant script to assemble an extension</a></dt> + <dd class="landingPageList">This ant script helps to <a href="en/Extension_Packaging">package an extension</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SpiderMonkey">Archived SpiderMonkey docs</a></dt> + <dd class="landingPageList">This section contains old SpiderMonkey documentation.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Autodial_for_Windows_NT">Autodial for Windows NT</a></dt> + <dd class="landingPageList">This document is intended to explain how the autodial helper feature implemented for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=93002" title="FIXED: [distribution]Conn: Auto-dial for NT-based Windows">bug 93002</a> works and why it works that way.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automated_testing_tips_and_tricks">Automated testing tips and tricks</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatic_Mozilla_Configurator">Automatic Mozilla Configurator</a></dt> + <dd class="landingPageList"><a href="/en-US/docs/ankh8">Ankh8</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Automatically_Handle_Failed_Asserts_in_Debug_Builds">Automatically Handle Failed Asserts in Debug Builds</a></dt> + <dd class="landingPageList">As of 2004-12-8, it is now possible to automatically handle failed asserts in debug builds of Mozilla for Windows.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/BlackConnect">BlackConnect</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Blackwood">Blackwood</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bonsai">Bonsai</a></dt> + <dd class="landingPageList">It is a tool that lets you perform queries on the contents of a CVS archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given CVS branch, or in a particular time period. It also includes tools for looking at checkin logs (and comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bookmark_keywords">Bookmark Keywords</a></dt> + <dd class="landingPageList">Practically every Web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders. In addition to being handy pointers to useful resources, bookmarks in Mozilla can be used to make the address bar itself a power tool. Searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Building_TransforMiiX_standalone">Building TransforMiiX standalone</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarView">calICalendarView</a></dt> + <dd class="landingPageList">An object implementing <code>calICalendarView</code> is generally intended to serve as a way of manipulating a set of DOM nodes corresonding to a visual representation of <a href="en/CalIEvent">calIEvent</a> and <a href="en/CalITodo">calITodo</a> objects. Because of this close association between methods and attributes on the one hand, and content on the other, <code>calICalendarView</code> implementations are particularly well suited to XBL. There is, however, no practical obstacle to the interface being implemented by any javascript object associated with a group of DOM nodes, even non-anonymous XUL nodes.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callCalendarViewController">calICalendarViewController</a></dt> + <dd class="landingPageList">A <code>calICalendarViewController</code> provides a way for a <a href="en/CalICalendarView">calICalendarView</a> to create, modify, and delete items. Implementing a <code>calICalendarViewController</code> allows for these actions to be performed in a manner consistent with the rest of the application in which the <a href="en/CalICalendarView">calICalendarView</a> is included.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/callFileType">calIFileType</a></dt> + <dd class="landingPageList">The <code>calIFileType</code> interface provides information about a specific file type.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Chromeless">Chromeless</a></dt> + <dd class="landingPageList">[This project may not be active — check Github <a href="https://github.com/mozilla/chromeless" title="https://github.com/mozilla/chromeless">https://github.com/mozilla/chromeless</a>]</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Firefox_sidebar_extension">Creating a Firefox sidebar extension</a></dt> + <dd class="landingPageList">This article describes how to create a registered sidebar for Firefox 2 or greater. See the references section for information on creating extension in earlier browsers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_hybrid_CD">Creating a hybrid CD</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_microsummary">Creating a Microsummary</a></dt> + <dd class="landingPageList">A microsummary generator is a set of instructions for creating a microsummary from the content of a page. Web pages can reference generators via <code><link rel="microsummary"></code> elements in their <code><head></code> elements. Generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Mozilla_extension">Creating a Mozilla Extension</a></dt> + <dd class="landingPageList">A Mozilla extension is an installable enhancement to the Mozilla browser that provides additional functionality (for example <a class="external" href="http://linky.mozdev.org/">Linky</a>, which adds an item to the context menu for opening multiple links in a document or selection). This tutorial walks you through the process of building a Mozilla extension that adds an icon to Mozilla's status bar showing the current status of the Mozilla source code (i.e. whether or not the latest version of the code is compiling successfully and passing tests). The extension will access <a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a>, mozilla.org's webtool for tracking source code status, to get the status of the code.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started">Creating a Skin for Firefox/Getting Started</a></dt> + <dd class="landingPageList">Download the latest version of Firefox and install it. Be sure to install the DOM Inspector extension as well.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_skin_for_Mozilla">Creating a Skin for Mozilla</a></dt> + <dd class="landingPageList">In order to create a skin for mozilla, you will need to know three things. How to edit images, extract zip files, and how to modify CSS. Mozilla uses standard gif, png, and jpeg images for the buttons and CSS to style everything else in the interface.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2.x</a></dt> + <dd class="landingPageList">You're going to make a theme for SeaMonkey 2, but don't know how? I hope this manual will help you.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Creating_regular_expressions_for_a_microsummary_generator">Creating regular expressions for a microsummary generator</a></dt> + <dd class="landingPageList">A regular expression is a special kind of string (i.e. a sequence of characters) that matches patterns of characters in other strings. Microsummary generators use them to identify the pages that the generators know how to summarize by matching patterns in those pages' URLs.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Dehydra">Dehydra</a></dt> + <dd class="landingPageList">The development focus switched to <a href="https://wiki.mozilla.org/DXR">DXR</a> (where the "D" comes from "Dehydra"), which is based on clang instead of gcc. Try DXR instead, or else try the gcc python plugin: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Developing_New_Mozilla_Features">Developing New Mozilla Features</a></dt> + <dd class="landingPageList">Tips For Contributing New Features To Mozilla.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Devmo_launch_roadmap">Devmo 1.0 Launch Roadmap</a></dt> + <dd class="landingPageList">Comments, ideas, questions and other discussion should be added on the <a href="en/Devmo_talk/1.0_Launch_Roadmap">Devmo talk:1.0 Launch Roadmap</a> page. Further details on smaller tasks being done are available at <a>User:Dria:TODO</a> page. See also <a>Current Events</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_improvements_in_Firefox_3">Download Manager improvements in Firefox 3</a></dt> + <dd class="landingPageList">Firefox 3 offers improvements to the Download Manager that allow multiple progress listeners, use of the <a href="/en-US/docs/Storage">Storage</a> API for data management, download resuming, and more. In addition, you can augment or replace the Download Manager's user interface by implementing the new <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI" title="">nsIDownloadManagerUI</a></code> interface.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Download_Manager_preferences">Download Manager preferences</a></dt> + <dd class="landingPageList">There are several preferences used by the Download Manager. This article provides a list of them.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Drag_and_drop">Drag and Drop</a></dt> + <dd class="landingPageList">This section describes how to implement objects that can be dragged around and dropped onto other objects.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/DTrace">DTrace</a></dt> + <dd class="landingPageList"> <strong>DTrace</strong> is Sun Microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active. Probe data can be collected with scripts written in <a class="external" href="http://docs.sun.com/app/docs/doc/817-6223">D</a> (no, not <a href="https://en.wikipedia.org/wiki/D_(programming_language)" title="that one">that one</a>). Mozilla DTrace support has <a class="external" href="http://www.opensolaris.org/os/project/mozilla-dtrace/">been added</a> by the Sun DTrace team and can be used on Solaris 10 and Mac OS X 10.5.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_FAQ">Embedding FAQ</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Embedding_Mozilla_in_a_Java_Application_using_JavaXPCOM">Embedding Mozilla in a Java Application using JavaXPCOM</a></dt> + <dd class="landingPageList"><a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> ships with the <a href="/en/JavaXPCOM" title="en/JavaXPCOM">JavaXPCOM</a> component, which allows Java code to interact with XPCOM objects. As you will see in this article, working with XPCOM objects in Java is not that much different than doing so in C++.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Error_console">Error Console</a></dt> + <dd class="landingPageList">The Error Console is a tool available in most Mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens. It reports <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>-related errors and warnings, <a href="/en-US/docs/CSS" title="CSS">CSS</a> errors and arbitrary messages from chrome code. In Firefox, the Error Console can be opened from the tools menu or by Ctrl-Shift-J.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Exception_logging_in_JavaScript">Exception logging in JavaScript</a></dt> + <dd class="landingPageList">Technical review completed.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Existing_Content">Existing Content</a></dt> + <dd class="landingPageList">This is a list of existing mozilla.org documentation. It needs to be <a class="external" href="http://mail.mozilla.org/pipermail/devmo-general/2005-July/000214.html">checked, prioritized, and migrated</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Extension_Frequently_Asked_Questions">Extension Frequently Asked Questions</a></dt> + <dd class="landingPageList">This is quick set of answers to the most common issues with <a class="internal" href="/en/Extensions" title="en/Extensions">extension</a> development. They are currently written with mostly Firefox in mind, but most if not all should easily translate to SeaMonkey, Thunderbird or any of the other applications. For Thunderbird, you may also find the extension <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">HowTo</a> or <a class="internal" href="/en/Extensions/Thunderbird/FAQ" title="en/Extensions/Thunderbird/FAQ">FAQ</a> pages helpful.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Fighting_Junk_Mail_with_Netscape_7.1">Fighting Junk Mail with Netscape 7.1</a></dt> + <dd class="landingPageList"><span class="comment">Summary: Is your mail account drowning in a flood of spam? Netscape 7.1 includes built-in junk mail filtering that you can train to meet your specific needs. Eric Meyer share his experiences with making the junk mail controls more effective, and looks at other preferences you might want to set to keep your account safe.</span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Firefox_Sync">Firefox Sync</a></dt> + <dd class="landingPageList">Sync refers to a family of related components and services which provide synchronization of data between Mozilla application instances. These components and services include:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Force_RTL">Force RTL</a></dt> + <dd class="landingPageList">(This is a temporary placeholder/stub for the Force RTL page)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Gecko_Coding_Help_Wanted">Gecko Coding Help Wanted</a></dt> + <dd class="landingPageList">Take a look through <a href="http://lxr.mozilla.org/">LXR</a>, and you'll realize that Mozilla's source code is a big place.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/GRE">GRE</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:Hacking_wiki">Hacking wiki</a></dt> + <dd class="landingPageList">To be able to hack the MDC wiki software, you'll need a local webserver install, which <a class="external" href="http://meta.wikimedia.org/wiki/Help:Introduction#System_Requirements">can run MediaWiki</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Help_viewer">Help Viewer</a></dt> + <dd class="landingPageList">Help Viewer: Allows information to be shown to the user inside Mozilla.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Helper_Apps">Helper Apps (and a bit of Save As)</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Hidden_prefs">Hidden prefs</a></dt> + <dd class="landingPageList"><span style="background: lemonchiffon; border: 1px solid navajowhite; display: block; margin-bottom: 1em; overflow: hidden; text-align: center;"><strong style="border-bottom: 1px solid navajowhite; color: coral; display: block; font-weight: 700;">This page has been flagged by editors or users as needing technical review.</strong> Until it is fully reviewed, it may contain inaccurate or incorrect information. </span></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit_merging">How to Write and Land Nanojit Patches</a></dt> + <dd class="landingPageList">Adobe and Mozilla share a copy of Nanojit. This means that landing nanojit patches is a bit complicated, but experience has taught us that this is <strong>much</strong> better than having separate versions of nanojit.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/HTTP_Class_Overview">HTTP Class Overview</a></dt> + <dd class="landingPageList">This document provides an overview of the classes used by the Mozilla <a href="/en/HTTP" title="en/HTTP">HTTP</a> implementation. It's meant as a guide to developers wishing to understand or extend the Mozilla HTTP implementation.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Introducing_the_Audio_API_Extension">Introducing the Audio API extension</a></dt> + <dd class="landingPageList">The Audio Data API extension extends the HTML5 specification of the <a href="/en-US/docs/Web/HTML/Element/audio" title="The HTML <audio> element is used to represent sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one. Fallback content for browser not supporting the <audio> element can be added too."><code><audio></code></a> and <a href="/en-US/docs/Web/HTML/Element/video" title="The HTML <video> element is used to embed video content in an HTML or XHTML document."><code><video></code></a> media elements by exposing audio metadata and raw audio data. This enables users to visualize audio data, to process this audio data and to create new audio data.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Java_in_Firefox_Extensions">Java in Firefox Extensions</a></dt> + <dd class="landingPageList">If you are in need of calling Java code from within a Firefox <a href="/en/Extensions" title="en/Extensions">extension</a>, you can make use of <a class="external" href="http://en.wikipedia.org/wiki/LiveConnect">LiveConnect</a>. LiveConnect gives your extension's JavaScript code (linked from or contained in XUL code) access to 2 objects: <code>java</code> and <code>Packages</code> (note that per <a class="external" href="http://forums.java.net/jive/thread.jspa?threadID=45933&tstart=0">this thread</a>, although the <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/">new documentation</a> for the LiveConnect reimplementation states that these <a class="link-https" href="https://jdk6.dev.java.net/plugin2/liveconnect/#DEPRECATED_FUNCTIONALITY">globals will be deprecated</a> (in the context of applets), "Firefox and the Java Plug-In will continue to support the global java/Packages keywords, in particular in the context of Firefox extensions."). These 2 objects let you make use of the standard JDK classes, e.g.,</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/JavaScript_crypto">JavaScript crypto</a></dt> + <dd class="landingPageList">Mozilla defines a special JavaScript object to allow web pages access to certain cryptographic-related services. These services are a balance between the functionality web pages need and the requirement to protect users from malicious web sites. Most of these services are available via the DOM <a href="/en-US/docs/Web/API/Window" title="The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> object as <a href="/en-US/docs/Web/API/Window/crypto" title="The Window.crypto read-only property returns the Crypto object associated to the global object. This object allows web pages access to certain cryptographic related services."><code>window.crypto</code></a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Jetpack">Jetpack</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Litmus_tests">Litmus tests</a></dt> + <dd class="landingPageList">Litmus tests are (non-automated) tests that are documented in the litmus database. See <a class="external" href="http://litmus.mozilla.org" rel="freelink">http://litmus.mozilla.org</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Makefile.mozextension.2">Makefile.mozextension.2</a></dt> + <dd class="landingPageList">This Makefile is a modification of the <code>Makefile.mozextention</code>, found in <a class="external" href="http://kb.mozillazine.org/Makefile_for_packaging_an_extension">Makefile for packaging an extension - MozillaZine Knowledge Base</a> (2005).</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Microsummary_topics">Microsummary topics</a></dt> + <dd class="landingPageList">To programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#178"><code>nsIMicrosummaryService</code></a> interface implemented by the <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/src/nsMicrosummaryService.js.in"><code>nsIMicrosummaryService</code></a> component, then call its <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/microsummaries/public/nsIMicrosummaryService.idl#191">installGenerator()</a></code> method, passing it an XML document containing the generator.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a></dt> + <dd class="landingPageList">When Netscape started the Mozilla browser, it made the conscious decision to support W3C standards. As a result, Mozilla is not fully backwards-compatible with Netscape Navigator 4.x and Microsoft Internet Explorer legacy code; for example, Mozilla does not support <code><layer></code> as I will discuss later. Browsers, like Internet Explorer 4, that were built before the conception of W3C standards inherited many quirks. In this article, I will describe Mozilla's quirks mode, which provides strong backwards HTML compatibility with Internet Explorer and other legacy browsers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Monitoring_downloads">Monitoring downloads</a></dt> + <dd class="landingPageList">Firefox 3 makes it easier than ever to monitor the status of downloads. Although it was possible to do so in previous versions of Firefox, it was previously only possible for one observer to do so at a time. Firefox 3 introduces new API that allows any number of listeners to observe downloads.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_Application_Framework">Mozilla Application Framework</a></dt> + <dd class="landingPageList"><em>The Mozilla Application Framework: for powerful, easy to develop cross-platform applications</em></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Mozilla_crypto_FAQ">Mozilla Crypto FAQ</a></dt> + <dd class="landingPageList">In this document I try to answer some frequently asked questions about the Mozilla web browser and mail/news client and its support for SSL, S/MIME, and related features based on cryptographic technology. Note that this document is for your information only and is not intended as legal advice. If you wish to develop and distribute cryptographic software, particularly for commercial sale or distribution, then you should consult an attorney with expertise in the particular laws and regulations that apply in your jurisdiction.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Modules_and_Module_ownership">Mozilla Modules and Module Ownership</a></dt> + <dd class="landingPageList">REDIRECT <a class="redirect" href="http://www.mozilla.org/hacking/module-ownership.html">http://www.mozilla.org/hacking/module-ownership.html</a></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/mozprocess">Mozprocess</a></dt> + <dd class="landingPageList"><a class="link-https" href="https://github.com/mozilla/mozbase/tree/master/mozprocess">mozprocess</a> provides python process management via an operating system and platform transparent interface to Mozilla platforms of interest. Mozprocess aims to provide the ability to robustly terminate a process (by timeout or otherwise), along with any child processes, on Windows, OS X, and Linux. Mozprocess utilizes and extends <code>subprocess.Popen</code> to these ends.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Nanojit">Nanojit</a></dt> + <dd class="landingPageList">Nanojit is a small, cross-platform C++ library that emits machine code. Both the Tamarin JIT and the SpiderMonkey JIT (a.k.a. TraceMonkey) use Nanojit as their back end.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:New_Skin_Notes">New Skin Notes</a></dt> + <dd class="landingPageList">Devmo has a new skin that is ready for testing. If you go to your <a>user preferences</a>, you can change the skin to "Devmo". This is currently just a preview, but we would appreciate help with testing.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Persona">Persona</a></dt> + <dd class="landingPageList"><a href="https://login.persona.org/">Mozilla Persona</a> is a cross-browser login system for the Web, that's easy to use and easy to deploy. It works on <a href="/en-US/docs/persona/Browser_compatibility">all major browsers</a>, and you can <a href="/en-US/docs/Persona/Quick_Setup">get started today</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plug-n-Hack">Plug-n-Hack</a></dt> + <dd class="landingPageList"><strong>Plug-n-Hack</strong> (PnH) is a proposed standard from the Mozilla security team for defining how security tools can interact with browsers in a more useful and usable way.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Plugin_architecture">Plugin Architecture</a></dt> + <dd class="landingPageList">This page contains some notes on how plugins work internally in Gecko. It is mainly of interest to Gecko developers.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Porting_NSPR_to_Unix_Platforms">Porting NSPR to Unix Platforms</a></dt> + <dd class="landingPageList">Last modified 16 July 1998</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Project:DevEdge">Priority Content</a></dt> + <dd class="landingPageList"><strong>Update:</strong> I've removed documents from this list that have been migrated into the wiki. The list of completed documents is available through the <a href="en/DevEdge">DevEdge</a> page.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Prism">Prism</a></dt> + <dd class="landingPageList">Prism is a simple XULRunner-based browser that hosts web applications without the normal web browser user interface. Prism is based on a concept called Site-Specific Browsers (SSB). An SSB is designed to work exclusively with a single web application. It doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. An SSB also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. Applications running in an SSB are therefore able to benefit from many of the advantages of the desktop and of the web at the same time.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Proxy_UI">Proxy UI</a></dt> + <dd class="landingPageList">(Recently Added - some support for reading OS and account settings.)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Remote_XUL">Remote XUL</a></dt> + <dd class="landingPageList">How to use XUL delivered from a webserver, not as part of chrome.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_Detailed_Design">Space Manager Detailed Design</a></dt> + <dd class="landingPageList">The Space Manager and related classes and structures are an important of the Gecko Layout system, specifically Block Layout. See the High Level Design document for an overview of the Space Manager, and as an introduction to the classes, structures and algorithms container in this, the Detailed Design Document.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Space_Manager_High_Level_Design">Space Manager High Level Design</a></dt> + <dd class="landingPageList">The Space Manager and associated classes and structures are used by Block and Line layout to manage rectangular regions that are occupied and available, for correct handling of floated elements and the elements that flow around them. When elements are floated to the left or right in a layout, they take up space and influence where other elements can be placed. The Space Manager is responsible for keeping track of where space is taken up and where it is available. This information is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Standalone_XPCOM">Standalone XPCOM</a></dt> + <dd class="landingPageList"><strong>Standalone XPCOM</strong> is a tree configuration that builds a minimal set of libraries (shared mostly) that can be used to get all features of XPCOM. The contents of this standalone XPCOM in general are:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Stress_testing">Stress testing</a></dt> + <dd class="landingPageList">Consume.exe from the <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=9d467a69-57ff-4ae7-96ee-b18c4790cffd&displaylang=en">Windows Server 2003 Resource Kit Tools</a> can consume various resources: physical memory, CPU time, page file, disk space and even the kernel pool. Although for Win2003, it should install into WinXP fine (Win2000 compatibility is unknown). The only downside is you can't specify how much of the resource to use, only which one to consume. Also be warned: always remember the -time option, or you may be hitting that physical reset button sooner than you would have liked!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Bundles">Structure of an installable bundle</a></dt> + <dd class="landingPageList"><a href="/en/XUL_Application_Packaging" title="en/XUL_Application_Packaging">XULRunner applications</a>, <a href="/en/Extensions" title="en/Extensions">extensions</a>, and <a href="/en/Themes" title="en/Themes">themes</a> all share a common directory structure, and in some cases the same bundle can be used as a standalone XULRunner application as well as an installable application extension.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Supporting_private_browsing_mode">Supporting private browsing mode</a></dt> + <dd class="landingPageList">Firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. This includes cookies, history information, download information, and so forth.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/SXSW_2007_presentations">SXSW 2007 presentations</a></dt> + <dd class="landingPageList">Presentations about the Mozilla project given at the SXSW 2007 event in Austin, Texas.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap">Table Cellmap</a></dt> + <dd class="landingPageList">The table layout use the cellmap for two purposes:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Cellmap_-_Border_Collapse">Table Cellmap - Border Collapse</a></dt> + <dd class="landingPageList">This document describes the additional information that is stored for border collapse tables in the cellmap.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Regression_Tests">Table Layout Regression Tests</a></dt> + <dd class="landingPageList">Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Table_Layout_Strategy">Table Layout Strategy</a></dt> + <dd class="landingPageList">The table layout algorithm is based on two W3C recommendations: <a class="external" href="http://www.w3.org/TR/html401/struct/tables.html">HTML 4.01 (Chapter 11)</a> and <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">CSS2.1 (Chapter 17)</a>.In CSS2 a distinction between fixed and auto layout of tables has been introduced. The auto-layout mechanism is implemented in <code>BasicTableLayoutStrategy.cpp</code> the fixed-layout in <code>FixedTableLayoutStrategy.cpp</code>. All these files are in the <code>layout/html/table/src</code> subdirectory.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Tamarin">Tamarin</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_Download_Manager_schema">The Download Manager schema</a></dt> + <dd class="landingPageList">The Download Manager uses an SQLite table to keep track of downloads in progress as well as queued and past downloads.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_life_of_an_HTML_HTTP_request">The life of an HTML HTTP request</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/The_new_nsString_class_implementation_(1999)">The new nsString class implementation (1999)</a></dt> + <dd class="landingPageList">This document is intended to briefly describe the new nsString class architecture, and discuss the implications on memory management, optimizations, internationalization and usage patterns.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/TraceVis">TraceVis</a></dt> + <dd class="landingPageList">TraceVis is a performance visualization system for TraceMonkey. If TraceMonkey is built with TraceVis, and run with TraceVis enabled, then TraceMonkey will output a log of all its activity transitions. The log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Treehydra">Treehydra</a></dt> + <dd class="landingPageList">Try the gcc python plugin instead: <a href="https://fedorahosted.org/gcc-python-plugin/" title="https://fedorahosted.org/gcc-python-plugin/">https://fedorahosted.org/gcc-python-plugin/</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URIs and URLs</a></dt> + <dd class="landingPageList">Handling network and locally retrievable resources is a central part of Necko. Resources are identified by URI "Uniform Resource Identifier" (Taken from <a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">RFC 2396</a>):</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/URIScheme">URIScheme</a></dt> + <dd class="landingPageList">List of Mozilla supported URI schemes</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_addresses_of_stack_variables_with_NSPR_threads_on_win16">Using addresses of stack variables with NSPR threads on win16</a></dt> + <dd class="landingPageList">This is a cautionary note that may be old information for some of you. However, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_Monotone_with_Mozilla_CVS">Using Monotone With Mozilla CVS</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Using_SVK_with_Mozilla_CVS">Using SVK With Mozilla CVS</a></dt> + <dd class="landingPageList">When working with Mozilla, you tend to accumulate patches which need to be reviewed, super-reviewed, and/or approved before they can be committed to the trunk. When you have only a few uncommitted patches, you can get by using cvs diff, and just editing the output to remove other patches before submitting. However, this approach quickly becomes unscalable, especially when you have different fixes in the same tree. Using a distributed versioning system like SVK takes out much of the hassle of managing your patches.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Venkman">Venkman</a></dt> + <dd class="landingPageList">Venkman is the code name for Mozilla's JavaScript Debugger. It aims to provide a powerful <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> debugging environment for Mozilla based browsers namely Firefox, Netscape 7.x/9.x and SeaMonkey. Note that it is not included in the Gecko-based browsers such as K-Meleon, Galeon and Netscape 8.x. Venkman has been provided as part of the Mozilla install distribution since October 2001, as well as an <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extension</a> package in <a href="/en-US/docs/XPI" title="en-US/docs/XPI">XPI</a> format.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Video_presentations">Video presentations</a></dt> + <dd class="landingPageList">Mozilla is actively working to produce video presentations that can help you learn how the Mozilla codebase works and how to take advantage of its technology in your own applications and extensions. This article is a jumping-off point to help you find those presentations.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/Why_embed_Gecko">Why Embed Gecko</a></dt> + <dd class="landingPageList"><strong>Gecko - the Smart Embedding Choice</strong></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/xbDesignMode.js">xbDesignMode.js</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XML_in_Mozilla">XML in Mozilla</a></dt> + <dd class="landingPageList">Mozilla has a relatively good support for <a href="/en-US/docs/XML" title="XML">XML</a>. Several World Wide Web Consortium (<a href="http://www.w3.org/">W3C</a>) Recommendations and drafts from the XML family of specifications are supported, as well as other related technologies.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPInstall">XPInstall</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XPJS_Components_Proposal">XPJS Components Proposal</a></dt> + <dd class="landingPageList">Draft 1.0</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XRE">XRE</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2005_Presentations">XTech 2005 Presentations</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XTech_2006_Presentations">XTech 2006 Presentations</a></dt> + <dd class="landingPageList"></dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XUL_Explorer">XUL Explorer</a></dt> + <dd class="landingPageList">XUL Explorer is a <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> application that provides an easy way to experiment with XUL. It’s a simple editor that can preview XUL inline or in a separate popup window. It has a list of code snippets (small fragments of XUL or JavaScript) that can be quickly inserted into the editor. The XUL can be loaded from and saved to files. A XUL validator and the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a> are both available to help debug problems. The help menu provides access to XUL information on MDC. There is even simple “keyword” help lookup for XUL elements.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Mozilla/XULRunner">XULRunner</a></dt> + <dd class="landingPageList"><strong>XULRunner</strong> is a Mozilla runtime package that can be used to bootstrap <a href="/en-US/docs/XUL" title="XUL">XUL</a>+<a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications.</dd> +</dl> diff --git a/files/nl/archive/mozilla/xul/how_to_quit_a_xul_application/index.html b/files/nl/archive/mozilla/xul/how_to_quit_a_xul_application/index.html new file mode 100644 index 0000000000..1f0852078d --- /dev/null +++ b/files/nl/archive/mozilla/xul/how_to_quit_a_xul_application/index.html @@ -0,0 +1,38 @@ +--- +title: How to Quit a XUL Application +slug: Archive/Mozilla/XUL/How_to_Quit_a_XUL_Application +tags: + - XULRunner +translation_of: Archive/Mozilla/XUL/How_to_quit_a_XUL_application +--- +<p>Een script kan de applicatie de opdrachtgeven netjes af te sluiten of deze na een fatale fout geforceerd af te sluiten. Dit kan met de <a href="nl/NsIAppStartup">nsIAppStartup</a> interface. +</p> +<pre class="eval"><script> +function quit (aForceQuit) +{ + var appStartup = Components.classes[<a class=" link-mailto" href="mailto:'@mozilla.org" rel="freelink">'@mozilla.org</a>/toolkit/app-startup;1']. + getService(Components.interfaces.nsIAppStartup); + + // eAttemptQuit will try to close each XUL window, but the XUL window can cancel the quit + // process if there is unsaved data. eForceQuit will quit no matter what. + var quitSeverity = aForceQuit ? Components.interfaces.nsIAppStartup.eForceQuit : + Components.interfaces.nsIAppStartup.eAttemptQuit; + appStartup.quit(quitSeverity); +} +</script> +</pre> +<p>Als je de functie zo aanroept zal hij geforceerd worden gesloten. Dit gebruik je na bv een fatale fout. +</p> +<pre class="eval"><script> +try { + doSomething(); +} +catch (e) { + quit(true); +} +</script> +</pre> +<p>Bij het "Quit" menuitem wat de gebruiker gebruikt moet er normaal gesproken gevraagt worden om niet opgeslagen gegevens op te slaan. De gebruiker kan deze afsluiting anuleren. +</p> +<pre class="eval"><menuitem label="Quit" oncommand="quit(false);"/> +</pre>{{ languages( { "en": "en/How_to_Quit_a_XUL_Application" } ) }} diff --git a/files/nl/archive/mozilla/xul/index.html b/files/nl/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..f6d4475a3b --- /dev/null +++ b/files/nl/archive/mozilla/xul/index.html @@ -0,0 +1,79 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"><strong><a href="/en-US/docs/XUL_Tutorial" title="en-US/docs/XUL_Tutorial">XUL Tutorial</a></strong><br> +Een begeleide handleiding die je zal helpen met XUL te beginnen, afkomstig van XULPlanet.</div> + +<div> +<p><strong>XUL</strong> (XML User Interface Language) is Mozilla's <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>-gebasseerde programmeertaal voor het bouwen van gebruikersinterfaces. Het wordt hoofdzakelijk gebruikt door Firefox. Web ontwikkelaars die al bekend zijn met <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> leren zeer snel XUL en kunnen meteen starten met het bouwen van applicaties. Open <a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">XUL Periodic Table</a> in Firefox of een andere <a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a>-gebaseerde browser om XUL demos te bekijken.</p> + +<div class="warning"><strong>Opmerking:</strong> Deze "XUL Periodic Table" kan niet weergegeven worden in recente versies van Gecko omdat het gebruik maakt van remote XUL, een technologie die niet meer ondersteund wordt wegens mogelijke beveiligingsproblemen. Er is een XULRunner applicatie die de XUL Periodic Table bevat en die het toch mogelijk maakt de demos te openen in Gecko gebaseerde browsers. <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">Je kan het hier downloaden.</a> Bekijk: <a href="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="/en-US/docs/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications</a> voor instructies over hoe de XULRunner apps in Firefox te gebruiken.</div> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentatie">Documentatie</h2> + + <dl> + <dt><a href="/en-US/docs/XUL_Reference" title="en-US/docs/XUL_Reference">XUL Verwijzingen</a></dt> + <dd>XUL elementen, attributen, eigenschappen, methodes, and gebeurtenissen.</dd> + <dt><a href="/en-US/docs/XUL_controls" title="en-US/docs/XUL_controls">XUL Controls</a></dt> + <dd>Een beknopte lijst met alle beschikbare XUL controls.</dd> + <dt><a href="/en-US/docs/XUL_School" title="en-US/docs/XUL School">XUL School</a></dt> + <dd>Een begrijpbare handleiding voor het ontwikkelen van Mozilla add-ons.</dd> + <dt><a href="/en-US/docs/The_Joy_of_XUL" title="en-US/docs/The_Joy_of_XUL">The Joy of XUL</a></dt> + <dd>Describes the key features and components of XUL.</dd> + <dt><a href="/en-US/docs/XUL/PopupGuide" title="en-US/docs/XUL/PopupGuide">Menus and Popups Guide</a></dt> + <dd>A guide on using menus and popup panels.</dd> + <dt><a href="/en-US/docs/XUL/Template_Guide" title="en-US/docs/XUL/Template_Guide">Template Guide</a></dt> + <dd>A detailed guide on XUL templates, which is a means of generating content from a datasource.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></dt> + <dd>How to perform drag and drop operations.</dd> + <dt><a href="/en-US/docs/XUL_improvements_in_Firefox_3" title="en-US/docs/XUL_improvements_in_Firefox_3">Adapting XUL Applications for Firefox 3.0</a></dt> + <dd>A list of changes in <a href="/en-US/docs/Firefox_3_for_developers" title="en-US/docs/Firefox_3_for_developers">Firefox 3.0</a>, affecting XUL developers.</dd> + <dt><a href="/en-US/docs/Firefox_2_for_developers#For_XUL_and_extension_developers" title="en-US/docs/Firefox_2_for_developers#For_XUL_and_extension_developers">Adapting XUL Applications for Firefox 2.0</a></dt> + <dd>A list of changes in <a href="/en-US/docs/Firefox_2_for_developers" title="en-US/docs/Firefox_2_for_developers">Firefox 2.0</a>, affecting XUL developers.</dd> + <dt><a href="/en-US/docs/Adapting_XUL_Applications_for_Firefox_1.5" title="en-US/docs/Adapting_XUL_Applications_for_Firefox_1.5">Adapting XUL Applications for Firefox 1.5</a></dt> + <dd>A list of changes in <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>, affecting XUL developers.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/XUL" title="tag/XUL">View All...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>View Mozilla forums...{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul on irc.mozilla.org</a></li> + </ul> + + <h2 class="Tools" id="Tools">Tools</h2> + + <ul> + <li><a class="external" href="/en-US/docs/XUL_Explorer" title="en-US/docs/XUL_Explorer">XUL Explorer</a> (a lightweight XUL IDE)</li> + <li><a href="https://github.com/matthewkastor/XULExplorer" title="https://github.com/matthewkastor/XULExplorer">XULExplorer</a> (Patched version of XUL explorer)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li> + <li><a class="external" href="http://forum.addonsmirror.net/index.php?showtopic=751" title="http://forum.addonsmirror.net/index.php?showtopic=751">XULRef sidebar</a></li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> + <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE for XUL/XBL</li> + <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Cross-browser XUL renderer in JavaScript/HTML)</li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/tools" title="tag/tools">View All...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + + <ul> + <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XBL" title="en-US/docs/XBL">XBL</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/RDF" title="en-US/docs/RDF">RDF</a>, <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">Extensions</a>, <a href="/en-US/docs/XULRunner" title="en-US/docs/XULRunner">XULRunner</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/nl/archive/themes/index.html b/files/nl/archive/themes/index.html new file mode 100644 index 0000000000..aff151946d --- /dev/null +++ b/files/nl/archive/themes/index.html @@ -0,0 +1,11 @@ +--- +title: Themes +slug: Archive/Themes +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Themes +--- +<p>Archived theme documentation.</p> + +<p></p><ul><li><a href="/en-US/docs/Archive/Themes/Building_a_Theme">Building a Theme</a></li><li><a href="/en-US/docs/Archive/Themes/Common_Firefox_theme_issues_and_solutions">Common Firefox theme issues and solutions</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox">Creating a Skin for Firefox</a><ul><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/UUID">UUID</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a></li><li><a href="/en-US/docs/Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a></li></ul></li><li><a href="/en-US/docs/Archive/Themes/Making_sure_your_theme_works_with_RTL_locales">Making sure your theme works with RTL locales</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_2">Theme changes in Firefox 2</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_3">Theme changes in Firefox 3</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_3.5">Theme changes in Firefox 3.5</a></li><li><a href="/en-US/docs/Archive/Themes/Theme_changes_in_Firefox_4">Theme changes in Firefox 4</a></li></ul><p></p> diff --git a/files/nl/archive/web/index.html b/files/nl/archive/web/index.html new file mode 100644 index 0000000000..ce3481b9ae --- /dev/null +++ b/files/nl/archive/web/index.html @@ -0,0 +1,81 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archive + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +<div class="hidden">{{IncludeSubnav("/en-US/docs/Archive")}}</div> + +<div>{{Obsolete_Header}}</div> + +<p class="summary">The documentation listed below is archived, obsolete material about open Web topics.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:CSS_background-size">Talk:background-size</a></dt> + <dd class="landingPageList">Should not the "Browser compatibility" table also list Google Chrome and Konqueror? Chome is not mentioned at all, but is becoming increasingly popular. Konqueror is listed <em>below</em> the table, which seems inconsistent. <a href="/User:Znerd" rel="custom nofollow">Znerd</a> 04 August 2009</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Browser_Detection_and_Cross_Browser_Support">Browser Detection and Cross Browser Support</a></dt> + <dd class="landingPageList">Improper browser detection can lead to web maintenance nightmares. Rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. This article reviews several approaches to browser detection, their usefulness in specific circumstances to arrive at a common sense approach to browser detection.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Browser_feature_detection">Browser Feature Detection</a></dt> + <dd class="landingPageList">An experimental approach to discovering degree of support for Standards</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/CSS">CSS</a></dt> + <dd class="landingPageList">Obsolete CSS features</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Displaying_notifications_(deprecated)">Displaying notifications (deprecated)</a></dt> + <dd class="landingPageList">Firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/E4X">E4X</a></dt> + <dd class="landingPageList"><strong>ECMAScript for XML</strong> (<strong>E4X</strong>) is a programming language extension that adds native XML support to <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. It does this by providing access to the XML document in a form that feels natural for ECMAScript programmers. The goal is to provide an alternative, simpler syntax for accessing XML documents than via <a href="/en-US/docs/DOM" title="DOM">DOM</a> interfaces. A valid alternative to E4X is a non-native <a href="/en-US/docs/JXON" title="JXON">JXON algorithm</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/E4X_tutorial">E4X Tutorial</a></dt> + <dd class="landingPageList">This tutorial walks you through the basic syntax of <strong>E4X (ECMAScript for XML)</strong>. With E4X, programmers can manipulate an <a href="/en-US/docs/XML" title="XML">XML</a> document with a syntax more familiar to <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> programming.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:JavaScript_Reference_Global_Objects_Array_forEach">Talk:Array.forEach()</a></dt> + <dd class="landingPageList">Ok, in the end I didn't remove the old code as it isn't hosted anywhere (I thought the github reference contained the code) but inserted a faster implementation above while retaining the rest of the document.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Iterator">Iterator</a></dt> + <dd class="landingPageList">The <code><strong>Iterator</strong></code> function returns an object which implements legacy iterator protocol and iterates over enumerable properties of an object.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a></dt> + <dd class="landingPageList">(Please update or remove as needed.)</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/MSX_Emulator_(jsMSX)">MSX Emulator (jsMSX)</a></dt> + <dd class="landingPageList"> </dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Old Proxy API</a></dt> + <dd class="landingPageList">Proxies are objects for which the programmer has to define the semantics in JavaScript. The default object semantics are implemented in the JavaScript engine, often written in lower-level languages like C++. Proxies let the programmer define most of the behavior of an object in JavaScript. They are said to provide a <strong>meta-programming API</strong>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/ParallelArray">ParallelArray</a></dt> + <dd class="landingPageList">The goal of <strong><code>ParallelArray</code></strong> was to enable data-parallelism in web applications. The higher-order functions available on <code>ParallelArray</code> attempted to execute in parallel, though they may fall back to sequential execution if necessary. To ensure that your code executes in parallel, it is suggested that the functions should be limited to the <a href="http://smallcultfollowing.com/babysteps/blog/2013/04/30/parallelizable-javascript-subset/">parallelizable subset of JS that Firefox supports</a>.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents_">Properly Using CSS and JavaScript in XHTML Documents</a></dt> + <dd class="landingPageList"><a class="external" href="http://www.w3.org/TR/xhtml1">XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)</a> defines XHTML to be a reformulation of HTML 4 as an XML 1.0 application.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Talk:JavaScript_Reference">Talk:JavaScript Reference</a></dt> + <dd class="landingPageList">The guide section links to an interesting document discussing how to create and use private variables in objects, which is great if you want to protect the various properties within an object from being poked at accidentally. I also just read a document on proper inheritance using apply(). Well if you combine the two, you can have inherited private variables:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Scope_Cheatsheet">Scope Cheatsheet</a></dt> + <dd class="landingPageList">JavaScript with Mozilla extensions has both function-scoped <strong><code>var</code></strong>s and block-scoped <strong><code>let</code></strong>s. Along with hoisting and dynamic behavior, scope in JavaScript is sometimes surprising.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Server-Side_JavaScript">Server-Side JavaScript</a></dt> + <dd class="landingPageList">Here's a radical idea: Use one language to write entire Web apps -- the same language which billions of web pages already use, every day.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a></dt> + <dd class="landingPageList">A sharp variable is a syntax in object initializers that allows serialization of objects that have cyclic references or multiple references to the same object.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Standards-Compliant_Authoring_Tools">Standards-Compliant Authoring Tools</a></dt> + <dd class="landingPageList">Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/StopIteration">StopIteration</a></dt> + <dd class="landingPageList">The <code><strong>StopIteration</strong></code> object was used to tell the end of the iteration in the legacy iterator protocol. Do not use this ancient feature.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Styling_the_Amazing_Netscape_Fish_Cam_Page">Styling the Amazing Netscape Fish Cam Page</a></dt> + <dd class="landingPageList"> </dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/IndexedDB_API_Using_JavaScript_Generators_in_Firefox">Using JavaScript Generators in Firefox</a></dt> + <dd class="landingPageList">Generators can be used to simplify asynchronous code in Firefox by opting in to using JavaScript version 1.7 or later. You can opt in in HTML as follows:</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Window.importDialog">Window.importDialog()</a></dt> + <dd class="landingPageList">Because opening windows on mobile isn't necessarily appropriate, the Firefox Mobile team designed the <code>importDialog()</code> method to replace <a href="/en-US/docs/Web/API/Window/openDialog" title="window.openDialog() is an extension to window.open(). It behaves the same, except that it can optionally take one or more parameters past windowFeatures, and windowFeatures itself is treated a little differently."><code>window.openDialog()</code></a>. Instead of opening a new window, it merges the specified XUL dialog into the main window.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">Writing JavaScript for XHTML</a></dt> + <dd class="landingPageList">Technical review completed. Editorial review completed.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Archive/Web/XForms">XForms</a></dt> + <dd class="landingPageList"><strong>XForms</strong> were envisioned as the future of online forms as envisioned by the W3C. Drawing on other W3C standards like <a href="/en/XML_Schema" title="en/XML_Schema">XML Schema</a>, <a href="/en/XPath" title="en/XPath">XPath</a>, and <a href="/en/XML_Events" title="en/XML_Events">XML Events</a>, XForms tried to address some of the limitations of the current <a href="/en/HTML" title="en/HTML">HTML</a> forms model. However, XForms never gained traction and is now considered obsolete.</dd> +</dl> +</div> +</div> diff --git a/files/nl/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html b/files/nl/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html new file mode 100644 index 0000000000..d268ed2eff --- /dev/null +++ b/files/nl/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html @@ -0,0 +1,72 @@ +--- +title: ECMAScript 7 support in Mozilla +slug: Archive/Web/JavaScript/ECMAScript_7_support_in_Mozilla +tags: + - ECMAScript 2016 + - Firefox + - JavaScript +translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>ECMAScript 2016 is de volgende ontwikkelversie van de ECMA-262 standaard, (bekend als <a href="/en-US/docs/Web/JavaScript">JavaScript</a>). Nog voordat ECMAScript 2015 was voltooid op 17 juni 2015 werden er al nieuwe voorstellen tot uitbreiding gedaan. De meest recente voorstellen zijn in te zien in de <a href="https://github.com/tc39/ecma262">tc39/ecma262</a> GitHub repository.</p> + +<p>Huidige issues aangaande het specificatieproces zullen worden opgelost door de introductie van <em>stages</em> and <em>champions</em> voor feature sets. Er is tevens voorgesteld een tweejarig release-schema in te voeren. Voor meer informatie over het specificatieproces na ES2015, wordt verwezen naar <a href="http://slides.com/rafaelweinstein/tc39-process">deze presentatie door Rafael Weinstein</a>.</p> + +<p>Een kanaal voor het versturen van reacties met betrekking tot ECMAScript standaarden is <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p> + +<h2 id="Experimentele_features">Experimentele features</h2> + +<p>The volgende features zijn al geïmplementeerd, maar uitsluitend beschikbaar op het <a href="http://nightly.mozilla.org/">Firefox Nightly channel</a>:</p> + +<h3 id="Toevoegingen_aan_het_Array_object">Toevoegingen aan het <em><code>Array</code></em> object</h3> + +<ul> + <li>{{jsxref("Array.prototype.includes()")}} (<a href="https://github.com/domenic/Array.prototype.includes/blob/master/spec.md">spec</a>)</li> +</ul> + +<h3 id="Toevoegingen_aan_het_ArrayBuffer_object">Toevoegingen aan het<code> <em>ArrayBuffer</em></code> object</h3> + +<ul> + <li>{{jsxref("ArrayBuffer.transfer()")}} (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>)</li> +</ul> + +<h3 id="Nieuwe_TypedObject_objecten">Nieuwe <em>TypedObject</em> objecten</h3> + +<ul> + <li><a href="https://github.com/dslomov-chromium/typed-objects-es7"><em>Typed Objects</em> ontwerpversie</a></li> +</ul> + +<h3 id="Nieuwe_SIMD_objecten">Nieuwe <em>SIMD</em> objecten</h3> + +<ul> + <li><a href="https://github.com/johnmccutchan/ecmascript_simd">ontwerpversie <em>SIMD</em>-specificatie en polyfill</a></li> +</ul> + +<h2 id="Uitvoering_van_stabilisatie_van_features">Uitvoering van stabilisatie van features </h2> + +<p>De volgende features worden ondersteund buiten de <em>Nightly channel</em>, maar de verdere specificatie en implementatie is nog in uitvoering. Features die oorspronkelijk in de ontwerpversie van ECMAScript 2015 waren opgenomen en zijn uitgesteld naar ECMAScript 2016 verschijnen waarschijnlijk hier.</p> + +<h3 id="Expressies">Expressies</h3> + +<ul> + <li><em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></em> (<a href="/en-US/Firefox/Releases/30">Firefox 30</a>)</li> + <li><em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">Generator comprehensions</a></em> (<a href="/en-US/Firefox/Releases/30">Firefox 30</a>)</li> + <li>{{jsxref("Operators/Arithmetic_Operators", "Machtsverheffings-operator", "#Exponentiation", 1)}} (<a href="/en-US/Firefox/Releases/42">Firefox 42</a>)</li> +</ul> + +<h2 id="Features_die_nog_niet_ondersteund_worden">Features die nog niet ondersteund worden</h2> + +<p>De volgende features zijn nog niet geïmplementeerd, maar worden opgelijnd voor ECMAScript 2016.</p> + +<ul> + <li><code>Object.observe()</code> ({{bug(800355)}})</li> +</ul> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<ul> + <li><a href="http://www.ecmascript.org/">ECMAScript website</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021376">Mozilla ES2016 tracking bug</a></li> + <li><a href="http://kangax.github.io/compat-table/es7/" title="http://kangax.github.io/es5-compat-table">ECMAScript 2016 ondersteuning voor browsers</a></li> +</ul> diff --git a/files/nl/archive/web/javascript/index.html b/files/nl/archive/web/javascript/index.html new file mode 100644 index 0000000000..4687b7bf23 --- /dev/null +++ b/files/nl/archive/web/javascript/index.html @@ -0,0 +1,12 @@ +--- +title: JavaScript +slug: Archive/Web/JavaScript +translation_of: Archive/Web/JavaScript +--- +<div class="hidden">{{JSRef}}</div> + +<p>{{Obsolete_Header}}</p> + +<p class="summary">Obsolete JavaScript features and unmaintained docs</p> + +<p>{{SubpagesWithSummaries}}</p> diff --git a/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html b/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html new file mode 100644 index 0000000000..37de621400 --- /dev/null +++ b/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html @@ -0,0 +1,1967 @@ +--- +title: Compatibiliteitstabel voor formulierelementen +slug: Compatibiliteitstabel_voor_formulierelementen +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +<p>De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.</p> + +<h2 id="Hoe_de_tabellen_lezen">Hoe de tabellen lezen</h2> + +<h3 id="Waarden">Waarden</h3> + +<p>Voor elke eigenschap zijn er vier mogelijke waarden:</p> + +<dl> + <dt>JA</dt> + <dd>De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.</dd> + <dt>GEDEELTELIJK</dt> + <dd>Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.</dd> + <dt>NEEN</dt> + <dd>De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.</dd> + <dt>N.V.T.</dt> + <dd>De eigenschap heeft geen enkele betekenis voor dit type of element.</dd> +</dl> + +<h3 id="Weergave">Weergave</h3> + +<p>Elke eigenschap wordt op twee manieren weergegeven:</p> + +<dl> + <dt>N (Normaal)</dt> + <dd>Betekent dat de eigenschap gewoon toegepast kan worden.</dd> + <dt>A (Aangepast)</dt> + <dd>Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:</dd> +</dl> + +<pre class="brush: css">* { +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */ + -webkit-appearance: none; + +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */ + -moz-appearance: none; + +/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip + van Opera, Internet Explorer en Firefox */ + background: none; +}</pre> + +<h2 id="Compatibiliteitstabellen">Compatibiliteitstabellen</h2> + +<h3 id="Globaal_gedrag">Globaal gedrag</h3> + +<p>Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:</p> + +<dl> + <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> + <dd>Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.</dd> + <dt>{{cssxref("line-height")}}</dt> + <dd>Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.</dd> + <dt>{{cssxref("text-decoration")}}</dt> + <dd>Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.</dd> + <dt>{{cssxref("text-overflow")}}</dt> + <dd>Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Opera ondersteunt {{cssxref("text-shadow")}} niet voor formulierelementen en IE9 ondersteunt het helemaal niet.</dd> +</dl> + +<h3 id="Tekstvelden">Tekstvelden</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li> Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota over {{cssxref("line-height")}}</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td>Zie nota betreffende Opera</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none </code> aangewend worden. Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none</code> aangewend worden . Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Knoppen">Knoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Number">Number</h3> + +<p>Bij browsers die het <code>number </code>element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het veld aanpast, te wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td colspan="1" rowspan="3"> + <p>Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.</p> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Text and font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(éénregelig)">Keuzevakken (éénregelig)</h3> + +<p>Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[2]</sup></td> + <td> + <ol> + <li>De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.</li> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(meerregelig)">Keuzevakken (meerregelig)</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota betreffende {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen ondersteund door Firefox en IE9+.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datalist">Datalist</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;"> + <p>Neen</p> + </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Bestandslijst">Bestandslijst</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Veel browsers passen deze eigenschap toe op de selectieknop.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Reageert min of meer als een extra linker marge buiten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datumselectie">Datumselectie</h3> + +<p>Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.<br> + </p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Kleurenselectie">Kleurenselectie</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome verbergt de {{HTMLElement("progress")}} en {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Bereik">Bereik</h3> + +<p>Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>{{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Afbeeldingsknoppen">Afbeeldingsknoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td colspan="1"> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/nl/dom/index.html b/files/nl/dom/index.html new file mode 100644 index 0000000000..48201d4d53 --- /dev/null +++ b/files/nl/dom/index.html @@ -0,0 +1,408 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +--- +<p>The <strong>Document Object Model (<em>DOM</em>)</strong> is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.</p> + +<p>Though often accessed using JavaScript, the DOM itself is not a part of the JavaScript language, and it can be accessed by other languages, though this is much less common.</p> + +<p>An <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introduction</a> to the DOM is available.</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="Obsolete_DOM_interfaces">Obsolete DOM interfaces</h2> + +<p>The Document Object Model is being highly simplified. In order to achieve this the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still unclear if some may be reintroduced, but for the moment they have to be considered as obsolete and should be avoided:</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>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p> + +<p>An <code>HTMLDocument</code> object also gives access to browser features: the tab, or window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}} , eventually a {{domxref("Selection")}} done on the document.</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="Other_interfaces">Other 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="Obsolete_HTML_interfaces">Obsolete 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_data_type_interfaces">SVG data type interfaces</h3> + +<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{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_related_interfaces">SMIL related interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Other_SVG_interfaces">Other 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">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Examples</a></li> +</ul> diff --git a/files/nl/dom/storage/index.html b/files/nl/dom/storage/index.html new file mode 100644 index 0000000000..4add3a4102 --- /dev/null +++ b/files/nl/dom/storage/index.html @@ -0,0 +1,297 @@ +--- +title: DOM Storage +slug: DOM/Storage +translation_of: Web/API/Web_Storage_API +--- +<h2 id="Samenvatting">Samenvatting</h2> +<p>DOM Storage is de naam van een set <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage" style="line-height: inherit;">opslag-gerelateerde features</a> <span style="line-height: inherit;">voor het eerst geïntroduceerd in de </span><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a><span style="line-height: inherit;">-specificatie en nu afgesplitst in zijn eigen </span><a class="external" href="http://dev.w3.org/html5/webstorage/" style="line-height: inherit;" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met <a href="/en-US/docs/Firefox_2_for_developers" style="line-height: inherit;" title="Firefox_2_for_developers">Firefox 2</a> en <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" style="line-height: inherit;" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> +<div class="note"> + <strong>Note:</strong> DOM Storage is niet hetzelfde als <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces voor SQLite) of <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (een <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> opslag utility te gebruiken door extensies).</div> +<h2 id="Omschrijving">Omschrijving</h2> +<p>Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).</p> +<p>Op Mozilla-gebaseerde browsers, Internet <span style="line-height: inherit;">Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "</span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx" style="line-height: inherit;">userData behavior</a><span style="line-height: inherit;">" in pre-8 versies van IE zit)</span></p> +<p>DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie" style="line-height: inherit;">Browsercookies</a> hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals <a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html" style="line-height: inherit;">Flash Local Storage</a>) vereisen een externe plugin.</p> +<p>Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was <a class="external" href="http://aaronboodman.com/halfnote/" style="line-height: inherit;">halfnote</a> (een notitieapplicatie) geschreven door <a class="external" href="http://aaronboodman.com/" style="line-height: inherit;">Aaron Boodman</a>. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.</p> +<p>Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.</p> +<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Referentie</span></p> +<p>Het hierop volgende zijn globale objecten die bestaan als een property van elk <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code> object</a>. Dit betekent dat ze aangesproken kunnen worden als <code>sessionStorage</code> of <code>window.sessionStorage</code>. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)</p> +<h3 id="Storage"><code>Storage</code></h3> +<p>Dit is een constructor (<code>Storage</code>) voor alle Storage instanties (<code>sessionStorage</code> en <code>globalStorage[location.hostname]).</code> Het zetten van <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> zou zowel <code>localStorage.removeKey en sessionStorage.removeKey </code><span style="line-height: inherit;">als zodanig veranderen.</span></p> +<p><code>globalStorage</code> items zijn geen instanties van <code>Storage</code>, maar zijn instanties van <code>StorageObsolete</code>.</p> +<p><code>Storage</code> is gedefineerd door de WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> als het volgende:</p> +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +}; +</pre> +<div class="note"> + <strong>Note: </strong>Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.</div> +<div class="note"> + <strong>Note:</strong> Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn <code>.toString</code> methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string <code>"[object Object]"</code> dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.</div> +<h3 id="sessionStorage"><code>sessionStorage</code></h3> +<p>Dit is een globaal object (<code>sessionStorage</code>) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.</p> +<pre class="brush:js">// Sla data op in de huidige sessie store +sessionStorage.setItem("username", "John"); + +// Spreek de opgeslagen data aan +alert( "username = " + sessionStorage.getItem("username")); +</pre> +<p>Het <code>sessionStorage</code> object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.</p> +<p>{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}</p> +<p><strong>Voorbeelden:</strong></p> +<p>Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.</p> +<pre class="brush:js"> // Haal het tekstveld op dat we gaan volgen + var field = document.getElementById("field"); + + // Kijk of er een autosave waarde is + // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen) + if ( sessionStorage.getItem("autosave")) { + // Herstel de inhoud van het tekstveld + field.value = sessionStorage.getItem("autosave"); + } + + // Bekijk de inhoud van het tekstveld iedere seconde + setInterval(function(){ + // En sla het resultaat op in het sessie storage object + sessionStorage.setItem("autosave", field.value); + }, 1000); +</pre> +<p><strong>Meer informatie:</strong></p> +<ul> + <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specificatie</a></li> +</ul> +<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> +<p><code>localStorage</code> is hetzelfde als <code>{{ Anch("sessionStorage") }} </code>met dezelfde same-origin regels toegepast, maar is vasthoudend. <code>localStorage</code> werd geintroduceerd in Firefox 3.5.</p> +<div class="note"> + <strong>Note:</strong> Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.</div> +<h4 id="Compatibility">Compatibility</h4> +<p><code>Storage</code> objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het <code>localStorage</code> object mogelijk in implementaties die het niet native ondersteunen.</p> +<p>Dit algoritme is een exacte imitatie van het <code>localStorage</code> object, maar maakt gebruik van cookies.</p> +<pre class="brush:js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> +<div class="note"> + <strong>Note:</strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Met dit algoritme gebruik de functies <code>localStorage.setItem()</code> en <code>localStorage.removeItem()</code> om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes <code>localStorage.yourKey = yourValue;</code> en <code>delete localStorage.yourKey;</code> om een key te zetten en te verwijderen <strong>is niet een veilige manier met deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> naar: <code style="background: #ccc;">"; path=/"</code> (en het aanpassen van de naam) wordt dit een <code>sessionStorage</code> polyfill in plaat van een <code>localStorage</code> polyfill.</div> +<p>Hier is nog een, minder precieze, imitatie van het <code>localStorage</code> object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (<strong>werkend getest tot Internet Explorer 6</strong>). Het maakt ook gebruik van cookies.</p> +<pre class="brush:js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> +<div class="note"> + <strong>Note: </strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode <code>localStorage.yourKey</code> om een key te krijgen veranderen of verwijderen <strong>is niet toegestaan bij deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> into: <code style="background: #ccc;">"; path=/" </code> (en het aanpassen van de naam) wordt dit een <code style="font-size: 14px;">sessionStorage</code> polyfill in plaat van een <code style="font-size: 14px;">localStorage</code> polyfill.</div> +<h4 id="Compatibility_en_de_relatie_met_globalStorage">Compatibility en de relatie met globalStorage</h4> +<p class="note"><code>localStorage</code> is hetzelfde als <code>globalStorage[location.hostname]</code>, met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat <code>localStorage</code> een instantie is van <code>Storage</code> in tegenstelling tot <code>globalStorage[location.hostname]</code> wat een instantie is van <code>StorageObsolete</code> welke hieronder wordt behandeld. Bijvoorbeeld, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is niet bereikbaar voor het <code>localStorage</code> object als <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> maar ze kunnen hetzelfde <code>globalStorage</code> item aanspreken. <code>localStorage</code> is een standaard interface terwijl <code>globalStorage</code> een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.</p> +<p>Merk op dat het zetten van een property op <code>globalStorage[location.hostname]</code> deze <strong>niet</strong> zet op <code>localStorage</code> en dat het uitbreiden van <code>Storage.prototype</code> geen effect heeft op <code>globalStorage</code> items, alleen het uitbreiden van <code>StorageObsolete.prototype</code> werkt.</p> +<h3 id="globalStorage"><code>globalStorage</code></h3> +<div> + {{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> +<p><code>globalStorage </code>is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik <code>{{ Anch("localStorage") }} </code>ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van <code>{{ Anch("localStorage") }}</code>, wat geimplementeerd is in Firefox 3.5. Dit is een globaal object (<code>globalStorage</code>) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).</p> +<div class="warning"> + Note: <code>globalStorage</code> is niet een <code>Storage</code> instantie, maar een <code>StorageList</code> instantie dat <code>StorageObsolete</code> instanties bevat.</div> +<pre class="eval deki-transform">// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken +globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); +</pre> +<p>Specifiek, levert het <code>globalStorage</code> object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat <code>globalStorage</code> gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:</p> +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Alle web paginas in een developer.mozilla.org sub-domein kan zowel lezen als schrijven in dit opslag object.</li> +</ul> +<p><strong>Voorbeelden:</strong></p> +<p>Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.</p> +<p>Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:</p> +<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); +</pre> +<p>Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:</p> +<pre class="eval deki-transform"> // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen + globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); +</pre> +<h2 id="Opslag_locatie_en_weggooien_van_de_data">Opslag locatie en weggooien van de data</h2> +<p>In Firefox de DOM storage data wordt opgeslagen in het <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite bestand</a> in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">met name voor de start pagina - about:home</a>, maar mogelijk ook voor andere interne pagina met "about:" URLs).</p> +<ul> + <li>DOM Storage kan verwijderd worden via "Tools -> Clear Recent History -> Cookies" als de tijd bereik "Everyting" is (via nsICookieManager::removeAll) + <ul> + <li>Maar niet wanneer een andere tijd bereik is gespecificeerd: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> + <li>Verschijnt niet in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> + </ul> + </li> + <li>DOM Storage wordt <strong>niet</strong> verwijderd via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> + <li>Verschijnt niet in de "Tools -> Options -> Advanced -> Network -> Offline data" lijst, tenzij de site ook de offline cache gebruikt. Als de site wel verschijnt in de lijst, dan wordt de DOM storage data verwijderd samen met de <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> als er op de Verwijder knop wordt gedrukt.</li> +</ul> +<p>Zie ook <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> +<h2 id="Meer_informatie">Meer informatie</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> +<h2 id="Voorbeelden">Voorbeelden</h2> +<ul> + <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial die beschrijft hoe de Web Storage API te gebruiken door een simpele adresboek applicatie te maken</li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - laat een offline app demo zien en legt uit hoe het werkt.</li> + <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Notitie applicatie dat alle data lokaal opslaat.</li> + <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - Een gedeelde localStorage object interface dat door elke website kan worden aangesproken en werkt in Firefox 3+, Webkit 3.1.2+ nightlies, en IE8. Zie het als een pseudo-globalStorage[""] maar met schrijf toegang beschermd door gebruikers bevestiging.</li> + <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a>. Simpel en eenvoudig te begrijpen voorbeeld van localStorage. Slaat- en haalt teksten op en toont een lijst van opgeslagen items. Getest in Firefox 3 en hoger.</li> + <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. Een zeer simpel voorbeeld van sessionStorage. Bevat ook een voorbeeld van localStorage. Getest in Firefox 3.6 of hoger.</li> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> +</ul> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>globalStorage</td> + <td>{{ CompatNo }}</td> + <td>2-13</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>iOS 3.2</td> + </tr> + </tbody> + </table> +</div> +<p>All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> +<div class="note"> + <p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> +</div> +<h2 id="Related">Related</h2> +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> + <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> + <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> +</ul> +<div> + {{ HTML5ArticleTOC }}</div> diff --git a/files/nl/firefox_1.5_voor_ontwikkelaars/index.html b/files/nl/firefox_1.5_voor_ontwikkelaars/index.html new file mode 100644 index 0000000000..ad0bcb92a1 --- /dev/null +++ b/files/nl/firefox_1.5_voor_ontwikkelaars/index.html @@ -0,0 +1,157 @@ +--- +title: Firefox 1.5 voor ontwikkelaars +slug: Firefox_1.5_voor_ontwikkelaars +tags: + - CSS + - DOM + - Extensions + - HTML + - JavaScript + - RDF + - SVG + - Web Development + - Web Standards + - XML + - XML Web Services + - XSLT + - XUL +translation_of: Mozilla/Firefox/Releases/1.5 +--- +<div>{{FirefoxSidebar}}</div><p> </p> + +<h3 id="Firefox_1.5_RC_3_.28Deer_Park.29" name="Firefox_1.5_RC_3_.28Deer_Park.29">Firefox 1.5 RC 3 (Deer Park)</h3> + +<p>De laatste uitgave in de Firefox 1.5 product ontwikkelings cyclus, gericht op website-ontwikkelaren en extensie auteurs, Firefox 1.5 RC 3, gebaseerd op de Gecko 1.8 processor, verbetert al het beste in standaarden ondersteuning, en zorgt voor nieuwe capaciteiten om de nieuwe generatie web-applicaties mogelijk te maken. Firefox 1.5 zal verbeterde ondersteuning voor CSS2 en CSS3, APIs voor scriptbare en programeerbare 2D beelden dmv. <a href="nl/SVG">SVG</a> 1.1 en <code><canvas></code>, <a href="nl/XForms">XForms</a> en XML events, samen met nog veel meer DHTML, JavaScript en DOM verbeteringen.</p> + +<p><strong>Firefox 1.5 RC 3</strong> is beschikbaar op: <a class="external" href="http://www.mozilla.org/projects/firefox/" rel="freelink">http://www.mozilla.org/projects/firefox/</a></p> + +<h3 id="Ontwikkelaar_Hulpmiddelen" name="Ontwikkelaar_Hulpmiddelen">Ontwikkelaar Hulpmiddelen</h3> + +<p>Vescheidene hulpmiddelen en browser extensies zijn beschikbaar om ontwikkelaars te helpen om Firefox 1.5 te ondersteunen.</p> + +<ul> + <li><a href="nl/DOM_Inspector">DOM Inspector</a>, een hulpmiddel dat ontwikkelaars helpt om documenten te inspecteren en veranderen zonder het direct te moeten aanpassen. DOM Inspector is beschikbaar als deel van de Custom install optie in Firefox 1.5 Beta onder Developer Tools.</li> + <li>JavaScript console, een hulpmiddel om JavaScript code te schrijven en testen, zowel als JavaScript en CSS fouten op een pagina te bekijken.</li> + <li>Pagina bron bekijken, met 'syntax highlighting' en zoekfuncties.</li> + <li><a class="link-https" href="https://addons.mozilla.org/extensions/showlist.php?application=firefox&category=Developer%20Tools">Browser extensies</a> waaronder de <a href="nl/Web_Developer_Firefox_Extension_(external)">Web Developer toolbar</a>, <a href="nl/Live_HTTP_Headers_(external)">Live HTTP Headers</a>, <a href="nl/HTML_Validator_(external)">HTML Validator</a> en nog veel meer.</li> +</ul> + +<p><strong>Let op:</strong> Sommige extensies, zoals <a class="external" href="http://hacksrus.com/~ginda/venkman/">JavaScript Debugger (Venkman)</a>, ondersteunen Firefox 1.5 Beta niet op dit moment en worden automatisch buiten werking gezet.</p> + +<h3 id="Overzicht" name="Overzicht">Overzicht</h3> + +<p>Sommige van de nieuwe functies in Firefox 1.5:</p> + +<h4 id="Web_site_en_applicatie_ontwikkelaars" name="Web_site_en_applicatie_ontwikkelaars">Web site en applicatie ontwikkelaars</h4> + +<p><em>Zie <a href="nl/Wat_Is_Er_Nieuw_In_Deer_Park_Alpha">Wat Is Er Nieuw In Deer Park Alpha</a></em></p> + +<dl> + <dt><a href="nl/SVG_In_HTML_Introductie">SVG In XHTML Introductie</a> </dt> + <dd>Leer hoe je SVG in XHTML pagina's gebruikt en hoe je JavaScript en CSS gebruikt om het plaatje op dezelfde manier te manipuleren als dat je zou doen met normaal XHTML.</dd> +</dl> + +<dl> + <dt><a href="nl/Beelden_maken_met_Canvas">Beelden maken met Canvas</a> </dt> + <dd>Leer over de nieuwe <code><canvas></code> tag en hoe je grafieken en andere objecten tekent in Firefox.</dd> +</dl> + +<dl> + <dt><a href="nl/CSS3_Columns">CSS3 Columns</a> </dt> + <dd>Leer over de nieuwe ondersteuning voor automatisch multi-kolom text layout zoals voorgesteld voor CSS3.</dd> +</dl> + +<dl> + <dt><a href="nl/Gebruik_maken_van_Firefox_1.5_caching">Gebruik maken van Firefox 1.5 caching</a> </dt> + <dd>Leer over <code>bfcache</code> en hoe het voor- en achteruit navigeren sneller maakt.</dd> +</dl> + +<h4 id="XUL_en_Extensie_Ontwikkelaars" name="XUL_en_Extensie_Ontwikkelaars">XUL en Extensie Ontwikkelaars</h4> + +<dl> + <dt><a href="nl/Een_Extensie_Bouwen">Een Extensie Bouwen</a> </dt> + <dd>Dit document zal je leiden door de stappen die nodig zijn om een basis extensie te bouwen voor Firefox. Zie ook: <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">nog een document op het MozillaZine knowledge base</a> (Engels), dat demonstreert hoe je de nieuwe functies van de Extensie Manager in Firefox 1.5 dat het maken van een nieuwe extensie nog makkelijker maakt.</dd> +</dl> + +<dl> + <dt><a href="nl/XPCNativeWrapper">XPCNativeWrapper</a> </dt> + <dd><code>XPCNativeWrapper</code> is een manier om een object zo in te pakken dat het velig is om toegang tot te krijgen van bevoorrecht code. Het kan gebruikt worden in alle Firefox versies, al is het gedrag iets veranderd beginnend vanaf Firefox 1.5 (Gecko 1.8).</dd> +</dl> + +<dl> + <dt><a href="nl/Voorkeuren_Systeem">Voorkeuren Systeem</a> </dt> + <dd>Leer meer over de nieuwe 'widgets' die je makkelijker en met minder JavaScript code een Opties scherm kan laten maken.</dd> +</dl> + +<dl> + <dt><a href="nl/Internationale_Tekens_in_XUL_JavaScript">Internationale Tekens in XUL JavaScript</a> </dt> + <dd>XUL JavaScript bestanden kunnen nu niet-ASCII characters bevatten.</dd> +</dl> + +<dl> + <dt>Tree API veranderingen </dt> + <dd>De interface voor de toegang tot XUL <code><tree></code> elementen zijn veranderd. Zie <a class="external" href="http://mozdev.org/pipermail/project_owners/2004-April/002131.html" rel="freelink">http://mozdev.org/pipermail/project_...il/002131.html</a> (Engels) voor een lijst van veranderingen.</dd> +</dl> + +<h3 id="Nieuwe_Eindgebruiker_Functies" name="Nieuwe_Eindgebruiker_Functies">Nieuwe Eindgebruiker Functies</h3> + +<h4 id="Gebruiker_Ervaring" name="Gebruiker_Ervaring">Gebruiker Ervaring</h4> + +<ul> + <li><strong>Snellere browser navigatie</strong> met verbeteringen aan de terug- en vooruitknop.</li> + <li><strong>De mogelijkheid om browser tabs te reorganiseren.</strong></li> + <li><strong>Answers.com is toegevoegd aan de zoekmachine lijst</strong> als woordenboek.</li> + <li><strong>Verbeteringen aan product bruikbaarheid</strong>, waaronder informatieve foutmelding pagina's, een gereorganiseerd opties menu, RSS ontdekking, en "Veilige Modus" ervaring.</li> + <li><strong>Beter toegangkelijksheid ondersteuning</strong> waaronder DHTML toegangkelijkheid.</li> + <li><strong>Rapporteer een onfunctionele Web site scherm</strong>, om Web sites die niet in Firefox werken te rapporteren.</li> + <li><strong>Betere ondersteuning voor Mac OS X</strong> (10.2 en hoger) waaronder profiel migratie van Safari en Mac Internet Explorer.</li> +</ul> + +<h4 id="Veiligheid_en_Privacy" name="Veiligheid_en_Privacy">Veiligheid en Privacy</h4> + +<ul> + <li><strong>Geautomatiseerde updates</strong> om product upgrades te stroomlijnen. Notificatie van een update is opvallender, en updates voor Firefox kunnen nu een halve megabyte of kleiner zijn. Extensies upgraden is ook verbeterd.</li> + <li><strong>Verbeteringen voor de pop-up blocker.</strong></li> + <li><strong>Verwijder Privé Informatie</strong> functie zorgt voor een makkelijke manier om snel persoonlijke informatie te verwijderen dmv. een menu of toetsenbord snelkoppeling.</li> +</ul> + +<h4 id="Ondersteuning_voor_open_Web_standaarden" name="Ondersteuning_voor_open_Web_standaarden">Ondersteuning voor open Web standaarden</h4> + +<p>Firefox support for Web standards continues to lead the industry with consistent cross-platform implementations for:</p> + +<p>Firefox ondersteuning voor Web standaarden zet voort om de industrie te leiden met consistente multi-platform implementaties voor:</p> + +<ul> + <li>Hypertext Markup Language (<a href="nl/HTML">HTML</a>) en Extensible Hypertext Markup Language (<a href="nl/XHTML">XHTML</a>): <a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a> en <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0/1.1</a></li> + <li>Cascade Style Sheets (<a href="nl/CSS">CSS</a>): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> en delen van <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li> + <li>Document Object Model (<a href="nl/DOM">DOM</a>): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> en delen van <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li> + <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li> + <li>Extensible Markup Language (<a href="nl/XML">XML</a>): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li> + <li>XSL Transformations (<a href="nl/XSLT">XSLT</a>): <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li> + <li>XML Path Language (<a href="nl/XPath">XPath</a>): <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li> + <li>Resource Description Framework (<a href="nl/RDF">RDF</a>): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li> + <li>Simple Object Access Protocol (SOAP): <a class="external" href="http://www.w3.org/TR/SOAP/%20">SOAP 1.1</a></li> + <li><a href="nl/JavaScript">JavaScript</a> 1.6, based on ECMA-262, revision 3: <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li> +</ul> + +<p>Firefox 1.5 supports the following data transport protocols (HTTP, FTP, SSL, TLS, and others), multilingual character data (Unicode), graphics (GIF, JPEG, PNG, SVG, and others) and the latest version of the world's most popular scripting language, <a href="nl/New_in_JavaScript_1.6">JavaScript 1.6</a>.</p> + +<p>Firefox 1.5 ondersteunt data transport protocols (HTTP, FTP, SSL, TLS en meer), meertalig teken data (Unicode), grafische media (GIF, JPEG, PNG, SVG en meer) en de laatste versie van de meest populaire code taal, <a href="nl/Nieuw_in_JavaScript_1.6">JavaScript 1.6</a>.</p> + +<h3 id="Veranderingen_sinds_Firefox_1.0" name="Veranderingen_sinds_Firefox_1.0">Veranderingen sinds Firefox 1.0</h3> + +<p>Many changes have been introduced into Firefox since it was first released on November 9, 2004. Firefox has progressed with many new features and bug fixes. The Deer Park and Firefox release-notes are excellent sources of information about changes in each release of Firefox.</p> + +<p>Veel veranderingen zijn geintroduceerd in Firefox sinds het voor het eerst publiekelijk is uitgegeven op 9 november, 2004. Firefox is verbeterd met veel nieuwe functies en bug fixes. De Deer Park en Firefox uitgave details zijn een uitstekende bron van informatie over de veranderingen in elke uitgave van Firefox.</p> + +<ul> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc3.html">What's new in Firefox 1.5 RC 3</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc2.html">What's new in Firefox 1.5 RC 2</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc1.html">What's new in Firefox 1.5 RC 1</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b2.html">What's new in Firefox 1.5 Beta 2</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b1.html">What's new in Firefox 1.5 Beta 1</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a2.html">What's new in Deer Park Alpha 2</a></li> + <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a1.html">What's new in Deer Park Alpha 1</a></li> +</ul> + +<p>{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}</p> diff --git a/files/nl/gebruik_maken_van_dom_workers/index.html b/files/nl/gebruik_maken_van_dom_workers/index.html new file mode 100644 index 0000000000..cd5c32adaa --- /dev/null +++ b/files/nl/gebruik_maken_van_dom_workers/index.html @@ -0,0 +1,28 @@ +--- +title: Gebruik DOM workers +slug: Gebruik_maken_van_DOM_workers +tags: + - HeeftTaalgebruikHerzieningNodig +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +<p>{{ fx_minversion_header(3.1) }}</p> +<p>{{ draft() }}</p> +<div class="warning"> + <strong>Let op:</strong> De specificaties voor de DOM workers zijn nog niet volledig.</div> +<p>DOM workers maken het mogelijk voor web content om scripts in achtergrond threads uit te voeren. Zodra een worker aangemaakt is kan deze thread berichten sturen door middel van een event handler, die gespecificeerd is door de maker.</p> +<p>Een worker thread kan opdrachten uitvoeren zonder de gebruikers interface te storen.</p> +<div class="note"> + <strong>Notitie:</strong> Zoals altijd, background threads — inclusief workers — kunnen geen invloed uit oefenen op de DOM. Als er acties uitgevoerd moeten worden vanuit de background thread, moeten dezen eerst terug gestuurd worden naar de oorsprongkelijke maker (main thread).</div> +<h2 id="Het_maken_van_een_worker">Het maken van een worker</h2> +<p>Het maken van een nieuwe worker is simpel. Alles wat je hoeft te doen is de <code>Worker()</code> constructor op te roepen, opgeven van het script dat uitgevoerd moet worden in de background thread. Als je wenst notificaties te ontvangen van de worker, kun je de worker's <code>onmessage</code> property wijzigen naar een event handler functie.</p> +<pre class="brush: js">var myWorker = new Worker('my_worker.js'); +myWorker.onmessage = function(event) { + print("Called back by the worker!\n"); +};</pre> +<p>Regel 1 in dit voorbeeld maakt en start het uitvoeren van een worker thread. Regel 2 zet de <code>onmessage</code> handler voor de worker naar een functie, dat opgeroepen kan worden als de worker zijn eigen <code>postMessage()</code> functie oproept.</p> +<h2 id="Zie_ook">Zie ook</h2> +<ul> + <li><code><a class="internal" href="/Nl/DOM/Worker" title="Nl/DOM/Worker">Worker</a></code></li> + <li><code><a class="internal" href="/Nl/DOM/SharedWorker" title="Nl/DOM/SharedWorker">SharedWorker</a></code></li> + <li><code><a class="internal" href="/En/Using_DOM_workers" title="En/Using DOM workers">Using_DOM_workers (Engelstalig)</a></code></li> +</ul> diff --git a/files/nl/gecko/index.html b/files/nl/gecko/index.html new file mode 100644 index 0000000000..885c3cc664 --- /dev/null +++ b/files/nl/gecko/index.html @@ -0,0 +1,6 @@ +--- +title: Gecko +slug: Gecko +translation_of: Mozilla/Gecko +--- +<p>Gecko is een revolutionair nieuwe generatie verkenner motor ontworpen om open internet standaarden te ondersteunen zoals html 4.0, css 1/2, het w3c document object model, xml 1.0, RDF en javascript. Gecko bevat tevens een set complementaire verkenner componenten die samenwerken met de layout motor om op die manier het basisplatform te vormen voor de mozilla verkenner en voor producten van commerciele verkopers zoals netscape 6, de AOL-gateway verkenner producten en andere. Gecko is nog steeds onder ontwikkeling onder mozilla.org. Gecko was vroeger ook gekend onder de namen "Raptor" en "NGlayout"; de nieuwe naam is gekozen door een geschil van de handelsmerkovertreding.</p> diff --git a/files/nl/glossary/404/index.html b/files/nl/glossary/404/index.html new file mode 100644 index 0000000000..ee6679b475 --- /dev/null +++ b/files/nl/glossary/404/index.html @@ -0,0 +1,20 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - '404' + - HTTP-fouten + - Navigatie + - infrastructuur + - niet gevonden + - woordenlijst +translation_of: Glossary/404 +--- +<p>Een 404 is een Standaard-antwoordcode die betekent dat de {{Glossary("Server", "server")}} de opgevraagde bron niet kan vinden.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">lijst van HTTP reactie-codes</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">advies voor beginners om 404 fouten te voorkomen</a></li> +</ul> diff --git a/files/nl/glossary/abstractie/index.html b/files/nl/glossary/abstractie/index.html new file mode 100644 index 0000000000..e89972a444 --- /dev/null +++ b/files/nl/glossary/abstractie/index.html @@ -0,0 +1,20 @@ +--- +title: Abstractie +slug: Glossary/Abstractie +tags: + - Abstractie + - Coderen + - CodingScripting + - Programmeertaal + - woordenlijst +translation_of: Glossary/Abstraction +--- +<p>Abstractie in {{Glossary("computerprogrammeren")}} is een manier om complixiteit te verminderen en efficiënt design en efficiënte implementatie mogelijk te maken. Het verstopt de technische complexiteit van systemen achter simpelere {{Glossary("API", "API's")}}.</p> + +<h2 id="Meer_informatie"><strong>Meer informatie</strong></h2> + +<h3 id="Algemene_kennis"><strong>Algemene kennis</strong></h3> + +<ul> + <li>{{interwiki("wikipedia", "Abstractie")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/adobe_flash/index.html b/files/nl/glossary/adobe_flash/index.html new file mode 100644 index 0000000000..a442367934 --- /dev/null +++ b/files/nl/glossary/adobe_flash/index.html @@ -0,0 +1,21 @@ +--- +title: Adobe Flash +slug: Glossary/Adobe_Flash +tags: + - CodingScripting + - Flash + - infrastructuur + - woordenlijst +translation_of: Glossary/Adobe_Flash +--- +<p>Flash is een verouderende technologie, ontwikkeld door Adobe, die rijke webapplicaties, vectorafbeeldingen en multimedia mogelijk maakt. U dient de juiste plug-in te installeren om Flash in een {{Glossary("Browser","webbrowser")}} te gebruiken.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://www.adobe.com/products/flashruntimes.html">Officiële website</a></li> + <li><a href="https://mozilla.github.io/shumway/">Shumway, een gratis implementatie door Mozilla</a></li> + <li><a href="http://gnashdev.org/">Gnash, een gratis implementatie door GNU</a></li> +</ul> diff --git a/files/nl/glossary/ajax/index.html b/files/nl/glossary/ajax/index.html new file mode 100644 index 0000000000..6eb4bc02e8 --- /dev/null +++ b/files/nl/glossary/ajax/index.html @@ -0,0 +1,27 @@ +--- +title: AJAX +slug: Glossary/AJAX +tags: + - AJAX + - CodingScripting + - infrastructuur + - woordenlijst +translation_of: Glossary/AJAX +--- +<p>AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) is een progameertaal waarbij {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, {{glossary("DOM")}}, en het <code>XMLHttpRequest</code>-{{glossary("object")}} worden gecombineerd om complexere webpagina's te bouwen. AJAX maakt het mogelijk om bepaalde delen van een webpagina te vernieuwen (<em>updaten</em>) zonder de gehele pagina te moeten herladen. Met AJAX is het ook mogelijk om asychroon te werken, dit houdt in dat bij het vernieuwen van een bepaald gedeelte op de website de code van dit gedeelte nog steeds blijft werken (bij synchroon is dit juist andersom: de code van het gedeelte dat wordt vernieuwd stopt met werken todat dat gedeelte klaar is met laden).</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "AJAX")}} op Wikipedia</li> + <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Synchrone tegen asynchrone communicatie</a></li> +</ul> + +<h3 id="Technische_informatie">Technische informatie</h3> + +<ul> + <li>Het {{domxref("XMLHttpRequest")}}-object</li> + <li><a href="/nl/docs/AJAX">De AJAX-documentatie op MDN</a></li> +</ul> diff --git a/files/nl/glossary/api/index.html b/files/nl/glossary/api/index.html new file mode 100644 index 0000000000..c93d2634b3 --- /dev/null +++ b/files/nl/glossary/api/index.html @@ -0,0 +1,36 @@ +--- +title: API +slug: Glossary/API +tags: + - Nederlands + - codescripting + - infrastructuur + - woordenlijst +translation_of: Glossary/API +--- +<p>Een API (Application Programming Interface) is een verzameling van functies en regels die bestaan binnen een softwareprogramma waardoor interactie mogelijk wordt met software - in tegenstelling tot een menselijke gebruikersinterface. De API kan gezien worden als een simpel contract (de interface) tussen de toepassing die het aanbiedt en andere zaken, zoals software van derden of hardware.</p> + +<p>In webontwikkeling is een API over het algemeen een verzameling van code functies (bijvoorbeeld {{glossary("method","methods")}}, {{Glossary("property","properties")}}, events, en {{Glossary("URL","URLs")}}) die een ontwikkelaar kan gebruiken in zijn apps voor interactie met componenten van de browser van de gebruiker, of andere software/hardware op de computer van de gebruiker, of websites en services van derden.</p> + +<p>Bijvoorbeeld:</p> + +<ul> + <li>De <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a> API kan gebruikt worden om audio en video te gebruiken van de webcam van de gebruiker, dit kan dan gebruikt worden op eender welke manier dat de ontwikkelaar wil, bijvoorbeeld de audio en video opnemen, zenden naar een andere gebruiker in een conference call, of een afbeelding maken van de video.</li> + <li>De <a href="/en-US/docs/Web/API/Geolocation">Geolocation API</a> kan gebruikt worden om informatie op te halen van eender welke service die de gebruiker ter beschikking heeft op zijn toestel (bv. GPS), hetgeen dan samen met de <a href="https://developers.google.com/maps/">Google Maps APIs</a> gebruikt kan worden om bijvoorbeeld de locatie van de gebruiker te plotten op een aangepaste kaart en te tonen welke toeristische attracties in hun omgeving zijn.</li> + <li>De <a href="https://dev.twitter.com/overview/api">Twitter APIs</a> kunnen gebruikt worden om gegevens op te halen van de twitter account van de gebruiker, om bijvoorbeeld zijn laatste tweets op een webpagina te tonen.</li> + <li>De <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> kan gebruikt worden om delen van een webpagina te animeren — bijvoorbeeld om afbeeldingen te doen bewegen of roteren.</li> +</ul> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Application_programming_interface", "API")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="https://developer.mozilla.org/nl-BE/docs/Web/API">Web API reference</a></li> +</ul> diff --git a/files/nl/glossary/aria/index.html b/files/nl/glossary/aria/index.html new file mode 100644 index 0000000000..1badbf5c65 --- /dev/null +++ b/files/nl/glossary/aria/index.html @@ -0,0 +1,17 @@ +--- +title: ARIA +slug: Glossary/ARIA +tags: + - Toegankelijkheid + - woordenlijst +translation_of: Glossary/ARIA +--- +<p><strong>ARIA</strong> (<em>Accessible Rich {{glossary("Internet")}} Applications</em>) is een specificatie van {{Glossary("W3C")}} voor het toevoegen van semantiek en andere metadata aan {{Glossary("HTML")}} voor gebruikers van technologische hulpmiddelen.</p> + +<p>U kunt bijvoorbeeld het attribuut <code>role="alert"</code> toevoegen aan een {{HTMLElement("p")}}-{{glossary("tag")}} om slechtziende of blinde gebruikers te informeren dat de informatie belangrijk en tijdsgevoelig is (iets wat u anders zou overbrengen door middel van tekstkleur).</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<ul> + <li><a href="/nl/docs/Web/Accessibility/ARIA">ARIA </a></li> +</ul> diff --git a/files/nl/glossary/arpanet/index.html b/files/nl/glossary/arpanet/index.html new file mode 100644 index 0000000000..a5307d35c1 --- /dev/null +++ b/files/nl/glossary/arpanet/index.html @@ -0,0 +1,14 @@ +--- +title: Arpanet +slug: Glossary/Arpanet +translation_of: Glossary/Arpanet +--- +<p>Het <strong>ARPAnet </strong>(advanced research projects agency network) was een computer netwerk gebouwd in 1969 als voorloper van het {{glossary("Internet")}}. Het doel was het vormen van een robuust medium om data te versturen en leidende onderzoeksgroepen doorheen de Verenigde Staten te verbinden. Het ARPAnet maakte eerst gebruik van NCP (network control protocol) en vervolgens van de eerste versie van het Internet protocol oftewel {{glossary("TCP")}}/{{glossary("IPv6","IP")}}. Dit maakte dat ARPAnet een prominente rol had in de opgang van het {{glossary("Internet")}}. ARPAnet werd rond 1990 buiten gebruik gesteld.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "ARPAnet")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/array/index.html b/files/nl/glossary/array/index.html new file mode 100644 index 0000000000..f0feac84ca --- /dev/null +++ b/files/nl/glossary/array/index.html @@ -0,0 +1,22 @@ +--- +title: Array +slug: Glossary/array +translation_of: Glossary/array +--- +<p>Een <em>array</em> is een geordende collectie van data ({{Glossary("primitive", "primitieve")}} of {{Glossary("object")}}). Elk data object van de array heeft een numerieke index gebaseerd op de positie in de array. Deze index kan gebruikt worden om de corresponderende {{glossary("value", "waarde")}} op te vragen. In {{glossary("JavaScript")}} zijn {{jsxref("array")}}s objecten die gemanipuleerd kunnen worden door middel van verschillende {{Glossary("Method", "methoden")}}.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", " Array data structure ", "Array")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li>Javascript {{jsxref("Array")}} op MDN</li> +</ul> + +<p> </p> diff --git a/files/nl/glossary/ascii/index.html b/files/nl/glossary/ascii/index.html new file mode 100644 index 0000000000..94f7eb2336 --- /dev/null +++ b/files/nl/glossary/ascii/index.html @@ -0,0 +1,15 @@ +--- +title: ASCII +slug: Glossary/ASCII +tags: + - infrastructuur + - woordenlijst +translation_of: Glossary/ASCII +--- +<p><strong>ASCII</strong> (<em>American Standard Code for Information Interchange</em>) is de populairste methode voor computers om letters, nummers, interpunctie en stuurcodes om te zetten naar de digitale vorm. Sinds 2007 is het online vervangen door {{Glossary("UTF-8")}}.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<p>{{Interwiki("wikipedia", "ASCII (tekenset)")}} op Wikipedia</p> diff --git a/files/nl/glossary/asynchroon/index.html b/files/nl/glossary/asynchroon/index.html new file mode 100644 index 0000000000..2c3e490748 --- /dev/null +++ b/files/nl/glossary/asynchroon/index.html @@ -0,0 +1,25 @@ +--- +title: Asynchroon +slug: Glossary/Asynchroon +tags: + - Web + - WebMechanics + - woordenlijst +translation_of: Glossary/Asynchronous +--- +<p> </p> + +<p><em>Asynchroon </em>verwijst naar een communicatieomgeving waar beide partijen berichten sturen en verwerken wanneer het handig of mogelijk is in plaats van onmiddellijk.</p> + +<p>Het kan gebruikt worden om een menselijke communicatieomgeving zoals e-mail — de zender verstuurt een e-mail en de ontvanger zal antwoorden wanneer op een gepast moment; ze moeten niet onmiddellijk antwoorden.</p> + +<p>Het kan ook gebruikt worden om een programmatorische communicatieomgeving te beschrijven. Bijvoorbeeld {{domxref("Ajax")}} is een asynchroon mechanisme om kleine stukjes data te verzoeken via <a href="/en-US/docs/Web/HTTP">HTTP</a>; het resultaat wordt verstuurd wanneer het antwoord volledig is, niet onmiddellijk.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Data ophalen van de server</a> (Learning Area)</li> + <li>{{glossary("Synchronous")}}</li> +</ul> diff --git a/files/nl/glossary/atag/index.html b/files/nl/glossary/atag/index.html new file mode 100644 index 0000000000..01020be1b8 --- /dev/null +++ b/files/nl/glossary/atag/index.html @@ -0,0 +1,26 @@ +--- +title: ATAG +slug: Glossary/ATAG +tags: + - ATAG + - Authoring Tool Accessibility Guidelines + - Toegankelijkheid + - woordenlijst +translation_of: Glossary/ATAG +--- +<p>ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) is een aanbeveling van {{Glossary("W3C")}} voor het bouwen van toegankelijke opmaakprogramma's, waarmee toegankelijke inhoud kan worden gemaakt.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://nl.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tool_Accessibility_Guidelines_.28ATAG.29">ATAG als onderdeel van het Web Accessibility Initiative</a> op Wikipedia</li> +</ul> + +<h3 id="Technisch_naslagwerk">Technisch naslagwerk</h3> + +<ul> + <li><a href="http://www.w3.org/WAI/intro/atag.php">Overzicht van de Authoring Tool Accessibility Guidelines (ATAG)</a></li> + <li><a href="http://www.w3.org/TR/ATAG20/">De aanbeveling voor ATAG 2.0</a></li> +</ul> diff --git a/files/nl/glossary/bandwidth/index.html b/files/nl/glossary/bandwidth/index.html new file mode 100644 index 0000000000..b9d644a203 --- /dev/null +++ b/files/nl/glossary/bandwidth/index.html @@ -0,0 +1,15 @@ +--- +title: Bandbreedte +slug: Glossary/Bandwidth +tags: + - infrastructuur + - woordenlijst +translation_of: Glossary/Bandwidth +--- +<p>Bandbreedte<span style="color: #252525; font-family: sans-serif; line-height: 22.3999996185303px;"> </span>is de maat van hoeveel informatie door een gegevensverbinding over een bepaalde tijd kan worden doorgegeven.<span style="color: #252525; font-family: sans-serif; line-height: 22.3999996185303px;"> </span>Het wordt meestal gemeten in veelvouden van bits per seconde (bps), bijvoorbeeld megabits per seconde (Mbps) of gigabits per seconde (Gbps).</p> + +<h2 id="Kom_meer_te_weten">Kom meer te weten</h2> + +<ul> + <li>{{Interwiki("wikipedia", "Bandbreedte")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/blink/index.html b/files/nl/glossary/blink/index.html new file mode 100644 index 0000000000..84a15ab2c6 --- /dev/null +++ b/files/nl/glossary/blink/index.html @@ -0,0 +1,20 @@ +--- +title: Blink +slug: Glossary/Blink +tags: + - Layout + - infrastructuur + - woordenlijst +translation_of: Glossary/Blink +--- +<p>Blink is een layout-engine voor open-source-browsers, ontwikkeld door Google als onderdeel van Chromium (en daarmee is het ook onderdeel van Chrome). Blink is met name een afsplitsing van de WebCore-bibliotheek in {{glossary("WebKit")}}, die de layout, het renderen en {{Glossary("DOM")}} afhandelt.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="http://www.chromium.org/blink">Homepage</a> van het Blinkproject</li> + <li><a href="http://en.wikipedia.org/wiki/Blink_%28layout_engine%29">Blink</a> op Wikipedia (Engels)</li> + <li><a href="http://www.chromium.org/blink/developer-faq">Veelgestelde vragen</a> op Blink</li> +</ul> diff --git a/files/nl/glossary/block/css/index.html b/files/nl/glossary/block/css/index.html new file mode 100644 index 0000000000..3325357852 --- /dev/null +++ b/files/nl/glossary/block/css/index.html @@ -0,0 +1,18 @@ +--- +title: Block (CSS) +slug: Glossary/Block/CSS +translation_of: Glossary/Block/CSS +--- +<p>Een <strong>block </strong>op een webpagina is een {{glossary("HTML")}} {{glossary("element")}} dat op een nieuwe lijn, d.w.z. onder het voorgaande element in een horizontale schrijfwijze, en boven het volgende element (algemeen gekend als een <em>block-level element</em>). Bijvoorbeeld {{htmlelement("p")}} is standaard een block-level element, terwijl {{htmlelement("a")}} een <em>inline element</em> is — u kan verschillende links naast mekaar zetten in de HTML broncode en ze zullen op dezelfde lijn staan in de getoonde uitvoer.</p> + +<p>Gebruik makend van de {{cssxref("display")}} eigenschap kan u veranderen of een element als een inline-element of een block-level (of een van de vele andere opties) wordt weergegeven; <strong>blocks</strong> zijn ook onderhevig aan de effecten van positionering en het gebruik van de {{cssxref("position")}} eigenschap.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="/nl-BE/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/nl-BE/docs/Glossary")}}</div> diff --git a/files/nl/glossary/block/index.html b/files/nl/glossary/block/index.html new file mode 100644 index 0000000000..8f17177e82 --- /dev/null +++ b/files/nl/glossary/block/index.html @@ -0,0 +1,13 @@ +--- +title: Block +slug: Glossary/Block +tags: + - Disambiguation + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary/Block +--- +<p>The term <strong>block</strong> can have several meanings depending on the context. It may refer to:</p> + +<p>{{GlossaryDisambiguation}}</p> diff --git a/files/nl/glossary/block/scripting/index.html b/files/nl/glossary/block/scripting/index.html new file mode 100644 index 0000000000..b6f23e453a --- /dev/null +++ b/files/nl/glossary/block/scripting/index.html @@ -0,0 +1,16 @@ +--- +title: Block (scripting) +slug: Glossary/Block/Scripting +translation_of: Glossary/Block/Scripting +--- +<p>In {{glossary("JavaScript")}} is een block een verzameling van gerelateerde {{glossary("statement","statements")}} ingesloten in accolades ("{}"). U kan bijvoorbeeld een block met instructies zetten na een {{jsxref("Statements/if...else","if (condition)")}} block, om aan te geven dat de interpreter de code in het block moet uitvoeren als de voorwaarde waar is, of dat het hele block moet overgeslagen worden als de woorwaarde onwaar is.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Leer_erover">Leer erover</h3> + +<ul> + <li><a href="https://developer.mozilla.org/nl-BE/docs/Web/JavaScript/Reference/Statements/block">JavaScript block statement</a></li> +</ul> + +<p> </p> diff --git a/files/nl/glossary/class/index.html b/files/nl/glossary/class/index.html new file mode 100644 index 0000000000..ee63848a33 --- /dev/null +++ b/files/nl/glossary/class/index.html @@ -0,0 +1,20 @@ +--- +title: Klasse +slug: Glossary/Class +tags: + - CodingScripting + - woordenlijst +translation_of: Glossary/Class +--- +<p>Bij {{glossary("OOP","object-georiënteerd programmeren")}} definieert een <strong>klasse</strong> de karakteristieken van een {{glossary("object","object")}}. Een klasse vormt dan een sjabloon voor de {{glossary("property", "eigenschappen")}} en {{glossary("method", "methoden")}} van dat object. Voor het aanmaken van instanties van een klasse gebruikt men de {{glossary("Constructor", "constructoren")}} van die klasse.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Class-based vs. prototype-based programmeertalen</a> (zoals JavaScript)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Class">Functies a in JavaScript</a></li> + <li>{{Interwiki("wikipedia", "Class-based_programming")}} op Wikipedia</li> + <li>{{Interwiki("wikipedia", "Object-oriented_programming")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/cms/index.html b/files/nl/glossary/cms/index.html new file mode 100644 index 0000000000..4faf6cb438 --- /dev/null +++ b/files/nl/glossary/cms/index.html @@ -0,0 +1,18 @@ +--- +title: CMS +slug: Glossary/CMS +tags: + - CMS + - Contentmanagementsysteem + - woordenlijst +translation_of: Glossary/CMS +--- +<p>Een CMS (Contentmanagementsysteem) is software die het voor gebruikers mogelijk maakt om verschillende soorten content te publiceren, organiseren, veranderen of verwijderen. Deze content is niet alleen tekst, maar ook ingesloten afbeeldingen, video's, audio en interactieve code.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "Contentmanagementsysteem")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/codec/index.html b/files/nl/glossary/codec/index.html new file mode 100644 index 0000000000..c12261d259 --- /dev/null +++ b/files/nl/glossary/codec/index.html @@ -0,0 +1,23 @@ +--- +title: Codec +slug: Glossary/Codec +tags: + - Webmechaniek + - woordenlijst +translation_of: Glossary/Codec +--- +<p>Een <em>codec</em> (afgeleid van "<em><strong>co</strong></em>der-<em><strong>dec</strong></em>oder") is een computerprogramma dat een datastroom encodeert en decodeert.</p> + +<h3 id="Meer_informatie" style="line-height: 24px;"><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Meer informatie</strong></h3> + +<h3 id="Algemene_kennis" style="line-height: 24px;">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Codec")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Supported_media_formats">Mediaformaten die worden ondersteund door audio- en video-elementen van HTML</a></li> +</ul> diff --git a/files/nl/glossary/constant/index.html b/files/nl/glossary/constant/index.html new file mode 100644 index 0000000000..b821eebe34 --- /dev/null +++ b/files/nl/glossary/constant/index.html @@ -0,0 +1,19 @@ +--- +title: Constante +slug: Glossary/Constant +translation_of: Glossary/Constant +--- +<p>Een <strong>constante</strong> is een onveranderlijke {{glossary("value", "waarde")}}, bijvoorbeeld getallen (1, 2, 42). {{glossary("variable","Variabelen")}} daarentegen kunnen van waarde veranderen wanneer een programmeur een nieuwe waarde toekent aan een reeds bestaande variabele.</p> + +<p>Net zoals variabelen worden constanten soms toegekend aan {{glossary("Identifier", "identifiers")}}. Zo kan, bijvoorbeeld 3,14... worden toegekend aan identifier <code>pi</code>.</p> + +<p>In {{glossary("JavaScript")}} kan men voor constanten <code>const</code> gebruiken. Dit impliceert dat de referentie naar de waarde niet kan veranderen, wat niet noodzakelijk betekent dat de waarde waarnaar wordt verwezen niet aanpasbaar is.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Constant_(computer_programming)", "Constante")}} op Wikipedia</li> + <li><a href="https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/const">Const in JavaScript</a></li> +</ul> diff --git a/files/nl/glossary/constructor/index.html b/files/nl/glossary/constructor/index.html new file mode 100644 index 0000000000..728e316c05 --- /dev/null +++ b/files/nl/glossary/constructor/index.html @@ -0,0 +1,45 @@ +--- +title: Constructor +slug: Glossary/Constructor +translation_of: Glossary/Constructor +--- +<p>Een <strong>constructor</strong> behoort tot een bepaalde {{glossary("object")}} {{glossary("class", "klasse")}} en wordt gebruikt om een instantie van het object te maken en het object te initialiseren. Het concept van een constructor is terug te vinden in de meeste {{glossary("OOP","object-georiënteerde")}} programmeertalen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">// Dit is een generische standaard constructor voor klasse Default +function Default() { +} + +// Dit is een overloaded constructor voor klasse Overloaded +// met parameter argumenten +function Overloaded(arg1, arg2, ...,argN){ +} +</pre> + +<p>Om in {{glossary("JavaScript")}} een nieuwe {{glossary("object reference", "object referentie")}} toe te wijzen aan een {{glossary("variable", "variabele")}} gebruiken we de new operator in combinatie met een constructor van de gewenste klasse.</p> + +<pre class="brush: js">function Default() { +} + +// Een nieuwe referentie naar een Default object wordt toegewezen +// aan een lokale variabele defaultReference +var defaultReference = new Default(); +</pre> + +<p> </p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Constructor_%28object-oriented_programming%29", "Constructor")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Constructor">The constructor in object oriented programming for JavaScript</a> op MDN</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">New operator in JavaScript</a> op MDN</li> +</ul> diff --git a/files/nl/glossary/cookie/index.html b/files/nl/glossary/cookie/index.html new file mode 100644 index 0000000000..17122c333f --- /dev/null +++ b/files/nl/glossary/cookie/index.html @@ -0,0 +1,21 @@ +--- +title: Cookie +slug: Glossary/Cookie +tags: + - Webmechaniek + - woordenlijst +translation_of: Glossary/Cookie +--- +<p>Een cookie is een klein stukje informatie dat door een website via een web browser op de computer van een gebruiker is achtergelaten.</p> + +<p>Cookies worden gebruikt om de webervaring van een gebruiker met een website te personaliseren. Een cookie kan de voorkeuren of invoer van de gebruiker bevatten wanneer de website bezocht wordt. Een gebruiker kan de web browser zo aanpassen dat hij cookies accepteert, weigert of verwijdert.</p> + +<p>Cookies kunnen ingesteld en gewijzigd worden op serverniveau door middel van de <code>Set-Cookie</code> <a href="/en-US/docs/Web/HTTP/Cookies">HTTP header</a>, of met JavaScript door <code><a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a></code> te gebruiken.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "Cookie (internet)")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/css/index.html b/files/nl/glossary/css/index.html new file mode 100644 index 0000000000..90d0df922b --- /dev/null +++ b/files/nl/glossary/css/index.html @@ -0,0 +1,48 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - CodingScripting + - Web + - woordenlijst +translation_of: Glossary/CSS +--- +<p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets) is een verklarende taal die bepaalt hoe een webpagina eruitziet in de {{glossary("browser")}}. De browser past de stijldeclaratie van CSS toe op geselecteerde elementen om ze op de goede manier te tonen. Een stijldeclaratie bevat eigenschappen en hun waardes, die bepalen hoe een webpagina eruitziet.</span></p> + +<p>CSS is één van de drie basiswebtechnologieën, samen met {{Glossary("HTML")}} en {{Glossary("JavaScript")}}. CSS verzorgt over het algemeen de stijl voor {{Glossary("Element","HTML-elementen")}}, maar kan ook worden gebruikt voor andere opmaaktalen zoals {{Glossary("SVG")}} of {{Glossary("XML")}}.</p> + +<p>Een CSS-regel is een set van {{Glossary("CSS Property","eigenschappen")}} met een bijbehorende {{Glossary("CSS_selector","selector")}}. Dit is een voorbeeld van CSS-regels die elke paragraaf van de HTML geel maken op een zwarte achtergrond:</p> + +<pre class="brush: css">/* The selector "p" indicate that all paragraphs in the document will be affected by that rule */ +p { + /* The "color" property defines the text color, in this case yellow. */ + color: yellow; + + /* The "background-color" property defines the background color, in this case black. */ + background-color: black +}</pre> + +<p>"Cascading" verwijst naar de regels die bepalen hoe selectors worden geprioriteerd om de opmaak van de pagina te veranderen. Dit is een heel belangrijk kenmerk, omdat een ingewikkelde website duizenden CSS-regels kan bevatten.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://developer.mozilla.org/nl/docs/Learn/CSS">CSS leren</a></li> + <li>{{interwiki("wikipedia", "CSS")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/nl/docs/Web/CSS">De documentatie van CSS op MDN</a></li> + <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Het huidige werk van de CSS-werkgroep</a></li> +</ul> + +<h3 id="Leren_over_CSS">Leren over CSS</h3> + +<ul> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">De online cursus van codecademy.com</a></li> +</ul> diff --git a/files/nl/glossary/dhtml/index.html b/files/nl/glossary/dhtml/index.html new file mode 100644 index 0000000000..ce71d5f6be --- /dev/null +++ b/files/nl/glossary/dhtml/index.html @@ -0,0 +1,19 @@ +--- +title: DHTML +slug: Glossary/DHTML +tags: + - CodingScripting + - DHTML + - HTML + - woordenlijst +translation_of: Glossary/DHTML +--- +<p><strong>DHTM</strong><strong>L</strong> (Dynamic {{glossary("HTML")}}) verwijst naar de code achter interactieve webpagina's die geen plug-ins nodig hebben zoals {{Glossary("Adobe Flash","Flash")}} of {{Glossary("Java")}}. DHTML voegt de functionaliteit van {{Glossary("HTML")}}, {{Glossary("CSS")}}, de {{Glossary("DOM")}}, en {{Glossary("JavaScript")}} samen.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "Dynamic HTML", "DHTML")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/dns/index.html b/files/nl/glossary/dns/index.html new file mode 100644 index 0000000000..5167a7d600 --- /dev/null +++ b/files/nl/glossary/dns/index.html @@ -0,0 +1,26 @@ +--- +title: DNS +slug: Glossary/DNS +tags: + - DNS + - DNS-naslag + - Domain Name System + - Domeinnaam-systeem + - infrastructuur + - omgekeerde-DNS-naslag + - rDNS + - woordenlijst +translation_of: Glossary/DNS +--- +<p><strong>DNS (Domeinnaam-systeem)</strong> is een hiërarchisch en decentraal naamgevings-systeem voor aan internet verbonden bronnen. DNS houd een lijst bij van {{Glossary("domain name","domain names")}} samen met andere bronnen, zoals IP-adressen, die met de {{Glossary("domain name","domain names")}} geassocieerd worden.</p> + +<p>De meest prominente functie van een DNS is het vertalen van mens-vriendelijke domeinnamen (zoals mozilla.org) naar een numeriek {{Glossary("IP adress")}} (zoals 151.106.5.172). Dit proces van het het verwijzen van een domainnaam naar het bijbehorende IP-adres staat bekent als een <strong>DNS-naslag</strong> (in het Engles een DNS-lookup). In contrast bestaat er ook een <strong>omgekeerde-DNS-naslag</strong> (ook wel reverse-DNS-lookup of rDNS genoemd). rDNS wordt gebruikt om vast te stellen welke domainnaam bij een betpaald IP-adres hoort.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="/en-US/Learn/Understanding_domain_names">Domeinnamen begrijpen</a></li> + <li>{{interwiki("wikipedia", "Domain_Name_System", "Domain Name System")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/ecma/index.html b/files/nl/glossary/ecma/index.html new file mode 100644 index 0000000000..016c222d41 --- /dev/null +++ b/files/nl/glossary/ecma/index.html @@ -0,0 +1,18 @@ +--- +title: ECMA +slug: Glossary/ECMA +tags: + - Webmechaniek + - woordenlijst +translation_of: Glossary/ECMA +--- +<p><strong>Ecma International</strong> (officieel <em>European Computer Manufacturers Association</em>) is een non-profitorganisatie die standaarden ontwikkelt in hardware voor computers, communicatie en programmeertalen.</p> + +<p>Op het web is Ecma het beroemdst voor het onderhouden van <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">de ECMA-262-specificatie</a> (ook bekend als {{Glossary("ECMAScript")}}), welke de basisspecificatie is voor de programmeertaal {{Glossary("JavaScript")}}.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<ul> + <li>{{interwiki("wikipedia", "Ecma_International", "Ecma International")}} op Wikipedia</li> + <li><a href="http://www.ecma-international.org/">De website van Ecma International</a></li> +</ul> diff --git a/files/nl/glossary/ecmascript/index.html b/files/nl/glossary/ecmascript/index.html new file mode 100644 index 0000000000..54a06d9d34 --- /dev/null +++ b/files/nl/glossary/ecmascript/index.html @@ -0,0 +1,23 @@ +--- +title: ECMAScript +slug: Glossary/ECMAScript +tags: + - Webmechaniek + - woordenlijst +translation_of: Glossary/ECMAScript +--- +<p><strong>ECMAScript</strong> is de scripttaal waarop {{glossary("JavaScript")}} is gebaseerd. <a href="http://www.ecma-international.org">Ecma International</a> is verantwoordelijk voor het standaardiseren van ECMAScript.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "ECMAScript")}} op Wikipedia</li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="http://www.ecmascript.org/">ECMAScript</a></li> +</ul> diff --git a/files/nl/glossary/element/index.html b/files/nl/glossary/element/index.html new file mode 100644 index 0000000000..c78032883a --- /dev/null +++ b/files/nl/glossary/element/index.html @@ -0,0 +1,21 @@ +--- +title: Element +slug: Glossary/Element +translation_of: Glossary/Element +--- +<p> </p> + +<p>Een element is een onderdeel van een webpagina. In XML en HTML kan een element een gegevensitem of een stuk tekst of een afbeelding bevatten, of misschien niets. Een typisch element omvat een openingstag met enkele kenmerken, ingesloten tekstinhoud en een afsluitende tag.<br> + <img alt="Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag." src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p> </p> + +<p>Elementen en tags zijn <em>niet </em>dezelfde dingen. Tags geven het begin of einde aan van een element in de broncode, terwijl elementen deel uitmaken van het {{Glossary ("DOM")}}, het documentmodel voor het weergeven van de pagina in de {{glossary ("browser")}}.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>De {{domxref("Element")}} interface, welke een element in de DOM representeert.</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Element">Meer details over elementen.</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Web_Components/Custom_Elements</a></li> +</ul> diff --git a/files/nl/glossary/falsy/index.html b/files/nl/glossary/falsy/index.html new file mode 100644 index 0000000000..2e27b754a2 --- /dev/null +++ b/files/nl/glossary/falsy/index.html @@ -0,0 +1,33 @@ +--- +title: Falsy +slug: Glossary/Falsy +translation_of: Glossary/Falsy +--- +<p id="Summary">Een '<strong>falsy'</strong> waarde is een waarde die zich gedraagt als false als de interpreter deze evalueert in een {{Glossary("Boolean")}} context.</p> + +<p>{{Glossary("JavaScript")}} gebruikt type {{Glossary("Type_Conversion", "coercion")}} in Boolean contexten.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<p>Voorbeelden van <em>falsy</em> waarden in JavaScript (die zich vertalen naar false en dus het <code>if</code> block <em>overslaan</em>):</p> + +<pre class="brush: js">if (false) +if (null) +if (undefined) +if (0) +if (NaN) +if ('') +if ("") +if (document.all) [1]</pre> + +<p>[1] <code>document.all</code> is in het verleden gebruikt voor browserdetectie en de <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-all">HTML specificatie definieert een moedwillige overtreding </a>van de ECMAScript standard voor dit geval om compatibiliteit te bewaren met legacy code (<code>if (document.all) { // Internet Explorer code here }</code> of bij het gebruik van <code>document.all</code> properties zonder eerst de aanwezigheid van document.all zelf te controleren: <code>document.all.foo</code>).</p> + +<p>Wordt soms ook geschreven als <strong>falsey</strong>, hoewel in de Engelse taal bij het omzetten van een zelfstandig naamwoord naar een bijvoeglijk naamwoord door toevoeging van een <em>-y </em>normaal gesproken een laatste letter <em>e</em> vervalt (noise => noisy, ice => icy, shine => shiny)</p> + +<h2 id="Meer_weten">Meer weten</h2> + +<ul> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Type_Conversion", "Coercion")}}</li> + <li>{{Glossary("Boolean")}}</li> +</ul> diff --git a/files/nl/glossary/ftp/index.html b/files/nl/glossary/ftp/index.html new file mode 100644 index 0000000000..7907c78d51 --- /dev/null +++ b/files/nl/glossary/ftp/index.html @@ -0,0 +1,24 @@ +--- +title: FTP +slug: Glossary/FTP +tags: + - CodingScripting + - FTP + - Protocol + - woordenlijst +translation_of: Glossary/FTP +--- +<p><strong>FTP </strong>(File Transfer Protocol) was jarenlang het standaard {{glossary("protocol", "protocol")}} voor het verplaatsen van bestanden van één {{glossary("host")}} naar een andere host. Het gebeurt echter steeds vaker dat teams en hostingaccounts FTP niet toestaan en in plaats daarvan vertrouwen op een versiebeheersysteem zoals Git. Op oudere hostingaccounts wordt het nog steeds gebruikt, maar het is duidelijk dat FTP niet langer wordt beschouwd als de optimale werkwijze.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="/en-US/Learn/Upload_files_to_a_web_server">Beginnersgids voor het uploaden van bestanden via FTP</a></li> + <li>{{interwiki("wikipedia", "File Transfer Protocol", "FTP")}} op Wikipedia + <p> </p> + </li> +</ul> + +<p> </p> diff --git a/files/nl/glossary/gif/index.html b/files/nl/glossary/gif/index.html new file mode 100644 index 0000000000..3e8f846fad --- /dev/null +++ b/files/nl/glossary/gif/index.html @@ -0,0 +1,22 @@ +--- +title: GIF +slug: Glossary/gif +tags: + - woordenlijst +translation_of: Glossary/gif +--- +<p>GIF (Graphics Interchange Format) is een afbeeldingsformaat dat gebruik maakt van compressie zonder kwaliteitsverlies, en kan worden gebruikt voor animaties. Een GIF gebruikt maximaal 8 bits per pixel en een maximum van 256 kleuren van de 24-bits kleurruimte.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "GIF")}} op Wikipedia</li> +</ul> + +<p> </p> + +<p> </p> + +<h2 id="sect1"> </h2> diff --git a/files/nl/glossary/head/index.html b/files/nl/glossary/head/index.html new file mode 100644 index 0000000000..e65df64e7f --- /dev/null +++ b/files/nl/glossary/head/index.html @@ -0,0 +1,21 @@ +--- +title: Head +slug: Glossary/Head +tags: + - CodingScripting + - HTML + - head + - metadata + - woordenlijst +translation_of: Glossary/Head +--- +<p>De <strong>Head</strong><strong> </strong>is het gedeelte van een {{glossary("HTML")}}-document dat {{glossary("metadata")}} bevat over dat document, zoals de auteur, de beschrijving en verwijzingen naar CSS- of Javascriptbestanden die moeten worden toegepast op de HTML.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="HTML_head">HTML head</h3> + +<ul> + <li>Referentie naar het {{htmlelement("head")}}-element op MDN</li> + <li><a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML">De HTML <head>-tag</a> op de leerzone van MDN</li> +</ul> diff --git a/files/nl/glossary/hoisting/index.html b/files/nl/glossary/hoisting/index.html new file mode 100644 index 0000000000..82aca448f7 --- /dev/null +++ b/files/nl/glossary/hoisting/index.html @@ -0,0 +1,41 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Hoisting +--- +<p>{{Glossary("Function", "Functies")}} en {{Glossary("Variable", "variabelen")}} zijn <strong><em>hoisted</em> </strong>(letterlijk: "getakeld" of "omhoog gehesen") in {{Glossary("JavaScript")}}. <em>Hoisting</em> is het gedrag in JavaScript waarbij declaraties naar het begin van een {{Glossary("scope")}} verplaatst worden (globale scope of de scope van de huidige functie).</p> + +<p>Dit betekent dat men een functie of een variabele kan gebruiken vooraleer ze gedeclareerd is. Met andere woorden: een functie of een variabele kan geclareerd worden nadat ze al is gebruikt.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Technisch_voorbeeld">Technisch voorbeeld</h3> + +<p>Variabelen:</p> + +<pre class="brush: js">foo = 2 +var foo; + +// wordt impliciet begrepen als: + +var foo; +foo = 2;</pre> + +<p>Functies:</p> + +<pre class="brush: js">hoisted(); // logt "foo" + +function hoisted() { + console.log("foo"); +}</pre> + +<h3 id="Technische_referenties">Technische referenties</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li> +</ul> diff --git a/files/nl/glossary/html/index.html b/files/nl/glossary/html/index.html new file mode 100644 index 0000000000..4bbe86067b --- /dev/null +++ b/files/nl/glossary/html/index.html @@ -0,0 +1,49 @@ +--- +title: HTML +slug: Glossary/HTML +tags: + - Glossary + - HTML +translation_of: Glossary/HTML +--- +<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div> + +<p><strong>HTML</strong> (HyperText Markup Language) is een beschrijvende taal specifiek voor de structuur van een webpagina.</p> + +<h2 id="Korte_geschiedenis">Korte geschiedenis</h2> + +<p>In 1990, als deel van zijn visie voor de {{Glossary("World Wide Web","Web")}} definieerde Tim Berners-Lee het concept van {{Glossary("hypertext")}}. Hetgeen Berners-Lee het jaar daarop formaliseerde met een opmaak die vooral gebaseerd was op {{Glossary("SGML")}}. Officieel begon de {{Glossary("IETF")}} HTML te noemen in 1993 en na verschillende proefversies werd de versie 2.0 uitgebracht in 1995. In 1994 richtte Berners-Lee de {{Glossary("W3C")}} om het Web verder uit te bouwen. In 1996 nam W3C het HTML-werk over en publiceerde HTML 3.2 een jaar later. HTML 4.0 werd in 1999 uitgebracht en werd een {{Glossary("ISO")}}-standaard in 2000.</p> + +<p>Toen gaf W3C bijna HTML op voor de {{Glossary("XHTML")}}, dit leidde tot de stichting van de onafhankelijke groep {{Glossary("WHATWG")}} in 2004. Dankzij de WHATWG werd het werk aan {{Glossary("HTML5")}} voortgezet: de twee organisaties brachten de eerste proefversie uit in 2008 en de definitieve versie in 2014.</p> + +<h2 id="Concept_en_syntax">Concept en syntax</h2> + +<p>Een HTML-document is een onbewerkt tekstdocument gestructureerd met elementen{{Glossary("element","elements")}}. Elementen zitten tussen "opening" (geopende) en "closing (sluitende) {{Glossary("tag","tags")}}. Iedere tag begint met het teken 'kleiner dan' en eindigt met het teken 'groter dan'. Er bestaan enkele lege of '<em>void</em>' tags die geen enkele tekst omvat, bijvoorbeeld {{htmlelement("img")}}.</p> + +<p>Je kan HTML-tags uitbreiden met attributen of "{{Glossary("attribute","attributes")}}", zij zorgen voor bijkomende informatie over hoe de browser het element moet interpreteren:</p> + +<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>Een HTML-document wordt normaal bewaard met een .htm of .html extensie op een {{Glossary("Server","web server")}} en kan weergegeven worden door iedere {{Glossary("Browser","Web browser")}}.</p> + +<h2 id="Meer_weten">Meer weten</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "HTML", "HTML")}} on Wikipedia</li> +</ul> + +<h3 id="HTML_leren">HTML leren</h3> + +<ul> + <li><a href="/en-US/Learn/HTML">Our HTML tutorial </a></li> + <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">The web course on codecademy.com</a></li> +</ul> + +<h3 id="Technische_referenties">Technische referenties</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML">The HTML documentation on MDN</a></li> + <li><a href="http://www.w3.org/TR/html5/" rel="external">The HTML specification</a></li> +</ul> diff --git a/files/nl/glossary/http/index.html b/files/nl/glossary/http/index.html new file mode 100644 index 0000000000..d5a6d6df0c --- /dev/null +++ b/files/nl/glossary/http/index.html @@ -0,0 +1,24 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - HTTP + - infrastructuur + - woordenlijst +translation_of: Glossary/HTTP +--- +<p>HyperText Transfer Protocol (<strong>HTTP</strong>) is het onderliggend netwerk {{glossary("protocol")}} dat het mogelijk maakt om hypermediabestanden over te brengen op het {{glossary("World Wide Web","Web")}}. Meestal gebeurt dit tussen een browser en een server. De huidige versie van de HTTP specificatie is {{glossary("HTTP_2", "HTTP/2")}}.</p> + +<p>De "http://" of het "schema" , als onderdeel van een {{glossary("URI")}}, staat meestal in het begin van een adres, zoals bijvoorbeeld in "https://developer.mozilla.org", om aan te geven aan de browser dat hij het document moet aanvragen met het HTTP protocol.</p> + +<p>Het HTTP protocol is tekstgebaseerd (alle communicatie wordt gedaan in onbewerkte tekst) en is staatloos (geen enkele communicatie is zich bewust van vorige communicaties). Deze eigenschap maakt het ideaal om documenten (websites) te lezen op "the world wide web". Maar HTTP kan ook gebruikt worden als basis voor {{glossary("REST")}} webdiensten van server tot server of {{glossary("AJAX")}} aanvragen binnen websites om ze dynamischer te maken.</p> + +<div> +<h2 id="Meer_informatie">Meer informatie</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP">HTTP op MDN</a></li> + <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} op Wikipedia</li> +</ul> +</div> diff --git a/files/nl/glossary/https/index.html b/files/nl/glossary/https/index.html new file mode 100644 index 0000000000..6b3632ba6d --- /dev/null +++ b/files/nl/glossary/https/index.html @@ -0,0 +1,19 @@ +--- +title: HTTPS +slug: Glossary/https +tags: + - HTTPS + - Security + - infrastructuur + - woordenlijst +translation_of: Glossary/https +--- +<p><strong>HTTPS</strong> (<em>HTTP Secure</em>) is een versleutelde versie van het {{Glossary("HTTP")}} protocol. Het maakt meestal gebruik van {{Glossary("SSL")}} of {{Glossary("TLS")}} om alle communicatie tussen een client en een server te versleutelen. Met deze veilige verbinding kunnen klanten veilig gevoelige gegevens uitwisselen met een server, bijvoorbeeld voor bankactiviteiten of online winkelen.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "HTTPS")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/identifier/index.html b/files/nl/glossary/identifier/index.html new file mode 100644 index 0000000000..7b18bbd4d3 --- /dev/null +++ b/files/nl/glossary/identifier/index.html @@ -0,0 +1,17 @@ +--- +title: Identifier +slug: Glossary/Identifier +translation_of: Glossary/Identifier +--- +<p>Een sequentie van karakters in de code die een <strong>{{glossary("variable", "variabele")}}, {{glossary("function", "functie")}}, of {{glossary("property", "eigenschap")}}</strong> identificeren.</p> + +<p>In {{glossary("JavaScript")}} kunnen identifiers enkel alfanumerieke karakters (of "$" of "_") bevatten en mogen niet starten met een cijfer. Een identifier verschilt van een <strong>string</strong> in dat een string data is terwijl een identifier een deel is van de code. In JavaScript is er geen manier om identifiers om te zetten naar strings maar is het soms wel mogelijk om strings om te zetten (<strong>parse</strong>) naar identifiers.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{interwiki("wikipedia", "Identifier#In_computer_science", "Identifier")}} op Wikipedia</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables">Variabele identifier in JavaScript</a></li> +</ul> diff --git a/files/nl/glossary/index.html b/files/nl/glossary/index.html new file mode 100644 index 0000000000..e5d3bab8be --- /dev/null +++ b/files/nl/glossary/index.html @@ -0,0 +1,29 @@ +--- +title: Woordenlijst +slug: Glossary +tags: + - Beginner + - Index + - Landing + - NeedsTranslation + - TopicStub + - woordenlijst +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Leer een nieuw begrip:"})}}</div> + +<p>Webtechnologieën bevatten lange lijsten met jargon en afkortingen die worden gebruikt in documentatie en codering. Deze woordenlijst bevat definities van woorden en afkortingen die u moet weten om het web succesvol te kunnen begrijpen en bouwen.</p> + +<h2 id="Begrippenlijst"><strong>Begrippenlijst</strong></h2> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Bijdragen_aan_de_woordenlijst">Bijdragen aan de woordenlijst</h2> + +<p>This glossary is a never ending work in progress. You can help improving it by <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">writing new entries</a> or by making the existing ones better. The easiest way to start is to hit the following button or to pick one of the suggested terms below.</p> + +<p><strong><a href="nl/docs/new?parent=4391">Voeg een nieuw begrip toe aan de woordenlijst</a></strong></p> + +<p>{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>If you want to know more on how to contribute to the glossary, check out <a href="/en-US/docs/MDN/Doc_status/Glossary">the glossary documentation status page</a>.</p> diff --git a/files/nl/glossary/irc/index.html b/files/nl/glossary/irc/index.html new file mode 100644 index 0000000000..fd372b7d8d --- /dev/null +++ b/files/nl/glossary/irc/index.html @@ -0,0 +1,21 @@ +--- +title: IRC +slug: Glossary/IRC +tags: + - Internet Relay Chat + - Open Protocol + - infrastructuur + - irc + - woordenlijst +translation_of: Glossary/IRC +--- +<p><strong>IRC</strong> (<em>Internet Relay Chat</em>) is een wereldwijd chatsysteem dat een internetverbinding nodig heeft en een IRC-client, die berichten verzendt en ontvangt via de IRC-server.</p> + +<p>IRC is ontworpen door Jarrko Oikarinen aan het einde van 1980. Het gebruikt {{glossary("TCP")}} en is een open protocol. De IRC-server zendt berichten uit naar iedereen die is verbonden met één van de vele IRC-kanalen (elk kanaal heeft een eigen ID).</p> + +<h3 id="Meer_informatie"><strong>Meer informatie</strong></h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/QA/Getting_Started_with_IRC">Beginnen met IRC</a></li> + <li><a href="https://wiki.mozilla.org/IRC">IRC gebruiken bij Mozilla</a></li> +</ul> diff --git a/files/nl/glossary/leeg_element/index.html b/files/nl/glossary/leeg_element/index.html new file mode 100644 index 0000000000..0293d5b811 --- /dev/null +++ b/files/nl/glossary/leeg_element/index.html @@ -0,0 +1,34 @@ +--- +title: Leeg element +slug: Glossary/Leeg_element +tags: + - CodingScripting + - Gemiddeld niveau + - Woordenboek +translation_of: Glossary/Empty_element +--- +<p>Een <strong>leeg element</strong> is een {{Glossary("element")}} van HTML, SVG of MathML dat <strong>geen</strong> childnode kan bevatten (geneste elementen of tekstnodes).</p> + +<p>De specificaties voor <a href="https://html.spec.whatwg.org/multipage/">HTML</a>, <a href="https://www.w3.org/TR/SVG2/">SVG</a> en <a href="https://www.w3.org/TR/MathML3/">MathML</a> definiëren heel nauwkeurig wat elk element kan bevatten. Vele combinaties hebben geen semantische betekenis, bijvoorbeeld een {{HTMLElement("audio")}}-element dat is genest in een {{HTMLElement("hr")}}-element.</p> + +<p>In HTML is het gebruik van een sluitlabel op een leeg element over het algemeen ongeldig. <code><input type="text"></input></code> is bijvoorbeeld ongeldige HTML.</p> + +<p>In HTML bestaan de volgende lege elementen:</p> + +<ul> + <li>{{HTMLElement("area")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("br")}}</li> + <li>{{HTMLElement("col")}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("img")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("keygen")}}(Geschrapt in HTML 5.2)</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("param")}}</li> + <li>{{HTMLElement("source")}}</li> + <li>{{HTMLElement("track")}}</li> + <li>{{HTMLElement("wbr")}}</li> +</ul> diff --git a/files/nl/glossary/mitm/index.html b/files/nl/glossary/mitm/index.html new file mode 100644 index 0000000000..39c08deeb7 --- /dev/null +++ b/files/nl/glossary/mitm/index.html @@ -0,0 +1,31 @@ +--- +title: MitM +slug: Glossary/MitM +tags: + - Beveiliging + - aanval + - man-in-het-midden + - woordenlijst +translation_of: Glossary/MitM +--- +<p>Een <strong>man-in-het-midden-aanval</strong> (ook bekent onder de Engelse afkorting van man-in-the-middle: MitM) onderschept de communicatie tussen twee systemen. Zo kan bijvoorbeeld een wifi-router worden overgenomen.</p> + +<p>Ter vergelijking met fysieke e-mail: als u brieven naar elkaar schrijft, kan de postbode elke brief die u stuurt onderscheppen. Hij of zij opent hem, leest hem, past hem uiteindelijk aan, pakt de brief weer in en stuurt hem alleen naar degene voor wie de brief was bedoeld. De oorspronkelijke ontvanger zou u dan een brief terugsturen, en de postbode zou de brief weer openen, hem lezen, uiteindelijk aanpassen, weer inpakken, en aan u overhandigen. U zou niet weten dat iemand zich in het midden van uw communicatiekanaal bevindt – de postbode is onzichtbaar voor u en uw ontvanger.</p> + +<p>In fysieke e-mail en in onlinecommunicatie zijn MitM-aanvallen moeilijk te verdedigen. Een paar tips:</p> + +<ul> + <li>Negeer certificaatwaarschuwingen niet zomaar. U zou verbinding kunnen maken met een bedrieglijke of phishingserver.</li> + <li>Gevoelige websites zonder HTTPS-versleuteling op openbare wifi-netwerken zijn niet betrouwbaar.</li> + <li>Controleer de aanwezigheid van HTTPS in uw adresbalk en controleer voor het aanmelden of versleuteling wordt gebruikt.</li> +</ul> + +<div> +<h2 id="Meer_info">Meer info</h2> + +<ul> + <li>OWASP-artikel: <a href="https://www.owasp.org/index.php/Man-in-the-middle_attack">Man-in-het-midden-aanval</a></li> + <li>Wikipedia: <a href="https://nl.wikipedia.org/wiki/Man-in-the-middle-aanval">Man-in-het-midden-aanval</a></li> + <li>De header {{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}}) kan het risico op een MitM significant verkleinen door browsers te instrueren een ‘whitelisted’ certificaat voor alle daaropvolgende verbindingen met die website te vereisen.</li> +</ul> +</div> diff --git a/files/nl/glossary/pdf/index.html b/files/nl/glossary/pdf/index.html new file mode 100644 index 0000000000..9b782b091d --- /dev/null +++ b/files/nl/glossary/pdf/index.html @@ -0,0 +1,18 @@ +--- +title: PDF +slug: Glossary/PDF +tags: + - PDF + - Portable Document Format + - woordenlijst +translation_of: Glossary/PDF +--- +<p><strong>PDF</strong> (Portable Document Format) is een bestandsformaat dat wordt gebruikt om documentatie te delen, zonder afhankelijk te zijn van een bepaalde softwareimplementatie, besturingssysteem of een bepaald hardwareplatform. PDF levert een digitale afbeelding of een afgedrukt document, en behoudt dezelfde opmaak wanneer het wordt afgedrukt.</p> + +<h2 id="Meer_informatie"><strong>Meer informatie</strong></h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Portable Document Format", "PDF")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/png/index.html b/files/nl/glossary/png/index.html new file mode 100644 index 0000000000..9926dc214b --- /dev/null +++ b/files/nl/glossary/png/index.html @@ -0,0 +1,19 @@ +--- +title: PNG +slug: Glossary/PNG +tags: + - Beginner + - PNG + - infrastructuur + - woordenlijst +translation_of: Glossary/PNG +--- +<p><strong>PNG </strong>(<em>Portable Network Graphics</em>) is een bestandsformaat voor afbeeldingen dat compressie zonder kwaliteitsverlies ondersteunt.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://nl.wikipedia.org/wiki/Portable_Network_Graphics">PNG </a>op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/protocol/index.html b/files/nl/glossary/protocol/index.html new file mode 100644 index 0000000000..b7989f4a93 --- /dev/null +++ b/files/nl/glossary/protocol/index.html @@ -0,0 +1,21 @@ +--- +title: Protocol +slug: Glossary/Protocol +tags: + - Protocollen + - infrastructuur + - woordenlijst +translation_of: Glossary/Protocol +--- +<p id="Summary">Een <strong>protocol</strong> is een systeem van regels die definiëren hoe data wordt uitgewisseld in of tussen computers. Voor communicatie tussen apparaten is het vereist dat de apparaten het eens zijn over het formaat van de data die wordt uitgewisseld. De set van regels die het formaat definieert, wordt een protocol genoemd.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Netwerkprotocol")}} op Wikipedia</li> + <li><a href="http://www.rfc-editor.org/search/standards.php">Officiële standaarden voor internetprotocollen (RFC)</a></li> +</ul> + +<p> </p> diff --git a/files/nl/glossary/regular_expression/index.html b/files/nl/glossary/regular_expression/index.html new file mode 100644 index 0000000000..d097e9d5c3 --- /dev/null +++ b/files/nl/glossary/regular_expression/index.html @@ -0,0 +1,28 @@ +--- +title: Reguliere expressie +slug: Glossary/Regular_expression +tags: + - CodingScripting + - Reguliere Expressie + - woordenlijst +translation_of: Glossary/Regular_expression +--- +<p><strong>Reguliere expressies</strong> (of <em>regex</em>) zijn regels die bepalen welke sequenties van karakters er voldoen bij een zoekopdracht. Om na te gaan of een stuk tekst voldoet aan een bepaald patroon kan men reguliere expressies gebruiken om dit patroon te definiëren en te vergelijken met de tekst.</p> + +<p>Reguliere expressies zijn geïmplementeerd in verschillende talen. De meest bekende implementatie is de Perl-implementatie, welke inspireerde tot de PCRE (<em>Perl Compatible Regular Expression</em>) bibliotheek. Voor het Web biedt {{glossary("JavaScript")}} een regex-implementatie via het {{jsxref("RegExp")}}-object.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Reguliere expressie")}} op Wikipedia</li> + <li><a href="http://regexone.com/">Interactieve tutorial</a></li> + <li><a href="http://regexper.com/">Gevisualiseerde Reguliere Expressie</a></li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Reguliere expressies schrijven in JavaScript</a></li> +</ul> diff --git a/files/nl/glossary/sleutelwoord/index.html b/files/nl/glossary/sleutelwoord/index.html new file mode 100644 index 0000000000..45d30d453a --- /dev/null +++ b/files/nl/glossary/sleutelwoord/index.html @@ -0,0 +1,21 @@ +--- +title: Sleutelwoord +slug: Glossary/Sleutelwoord +tags: + - Sleutelwoord + - Sleutelwoord zoeken + - woordenlijst + - zoeken +translation_of: Glossary/Keyword +--- +<p id="Summary">Een <strong>sleutelwoord</strong> is een woord dat of zin die inhoud beschrijft. Online sleutelwoorden worden gebruikt als zoekopdracht voor zoekmachines of als woorden om inhoud op websites te identificeren.</p> + +<p>Wanneer u een zoekmachine gebruikt, gebruikt u sleutelwoorden om te specificeren waar u naar op zoek bent, en de zoekmachine geeft relevante webpagina's terug. Probeer specifiekere sleutelwoorden te gebruiken voor nauwkeurigere resultaten, zoals "Blauwe Mustang GTO" in plaats van alleen "Mustang". Webpagina's gebruiken ook sleutelwoorden in een metatag (in de {{htmlelement("head")}}-sectie) om paginainhoud te beschrijven, zodat zoekmachines webpagina's beter kunnen identificeren en organiseren. </p> + +<h2 id="Meer_informatie"><strong>Meer informatie</strong></h2> + +<h3 id="Algemene_kennis"><strong>Algemene kennis</strong></h3> + +<ul> + <li>{{interwiki("wikipedia", "Sleutelwoord")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/ssl_woordenlijst/index.html b/files/nl/glossary/ssl_woordenlijst/index.html new file mode 100644 index 0000000000..579de9153f --- /dev/null +++ b/files/nl/glossary/ssl_woordenlijst/index.html @@ -0,0 +1,19 @@ +--- +title: SSL +slug: Glossary/SSL_Woordenlijst +translation_of: Glossary/SSL +--- +<p>SSL (Secure Sockets Layer) is een standaard protocol dat verzekert dat de communicatie tussen twee computerprogramma's vertrouwelijk en beveiligd is (berichten kunnen gelezen noch gewijzigd worden door buitenstaanders). Het is de basis voor het {{Glossary("TLS")}} protocol.</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<p>{{Interwiki("wikipedia", "Transport Layer Security")}} on Wikipedia</p> + +<h3 id="Zie_ook">Zie ook</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Projects/NSS/SSL_functions">SSL functies</a></li> + <li>{{Glossary("HTTPS")}}</li> +</ul> diff --git a/files/nl/glossary/tag/index.html b/files/nl/glossary/tag/index.html new file mode 100644 index 0000000000..1956cc3a09 --- /dev/null +++ b/files/nl/glossary/tag/index.html @@ -0,0 +1,30 @@ +--- +title: Label +slug: Glossary/Tag +tags: + - CodingScripting + - HTML + - Intro + - woordenlijst +translation_of: Glossary/Tag +--- +<p>Een label wordt in {{Glossary("HTML","HTML")}} gebruikt voor het maken van een {{Glossary("Element","element")}}. De <strong>naam</strong> van een HTML-element is de <strong>naam</strong> die wordt gebruikt tussen punthaken, zoals <p> voor paragraaf. Merk op dat de naam van een sluitingslabel wordt voorafgegaan door een schuine streep, "</p>", en dat in lege elementen het sluitingslabel niet vereist of toegestaan is. Wanneer attributen niet worden vermeld, worden altijd de standaardwaarden gebruikt.</p> + +<h2 id="Kom_meer_te_weten">Kom meer te weten</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "HyperText_Markup_Language#Elementen", "HTML elementen")}} op Wikipedia</li> + <li><a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html">HTML op W3 </a></li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/HTML_tags">Wat zijn HTML-labels & hoe gebruik je ze [en-US]</a></li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/nl/glossary/tcp/index.html b/files/nl/glossary/tcp/index.html new file mode 100644 index 0000000000..f43f84247f --- /dev/null +++ b/files/nl/glossary/tcp/index.html @@ -0,0 +1,21 @@ +--- +title: TCP +slug: Glossary/TCP +tags: + - Netwerk + - Transmission Control Protocol + - data + - infrastructuur + - netwerken + - woordenlijst +translation_of: Glossary/TCP +--- +<p>TCP (Transmission Control Protocol) is een belanrijk netwerk {{Glossary("protocol")}} dat twee hosts in staat stelt om te verbinden en data stromen uit te wisselen. TCP garandeert de bezorging van gegevens en pakketjes in dezelfde volgorde als die waarin ze werden verstuurd. Vint Cerf en Bob Kahn, op dat moment DARPA wetenschappers, ontworpen het in de jaren '70.</p> + +<h2 id="Meer_informatie"><strong>Meer informatie</strong></h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Transmission Control Protocol")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/toegankelijkheid/index.html b/files/nl/glossary/toegankelijkheid/index.html new file mode 100644 index 0000000000..11e4ff6c7c --- /dev/null +++ b/files/nl/glossary/toegankelijkheid/index.html @@ -0,0 +1,32 @@ +--- +title: Toegankelijkheid +slug: Glossary/Toegankelijkheid +tags: + - Toegankelijkheid + - woordenlijst +translation_of: Glossary/Accessibility +--- +<p><em>Webtoegankelijkheid</em> (<strong>A11Y</strong>) verwijst naar optimale werkwijzen om een website gebruiksvriendelijk te houden ondanks fysieke of technische beperkingen. Webtoegankelijkheid is formeel gedefinieerd en besproken op de {{Glossary("W3C")}} door het {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).</p> + +<h2 id="Meer_informatie">Meer informatie</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">Hulpmiddelen voor toegankelijkheid op MDN</a></li> + <li>{{Interwiki("wikipedia", "Web accessibility")}} op Wikipedia (Engels)</li> +</ul> + +<h3 id="Leer_over_webtoegankelijkheid">Leer over webtoegankelijkheid</h3> + +<ul> + <li><a href="http://webaim.org/" rel="external">Web Accessibility In Mind</a></li> +</ul> + +<h3 id="Technische_referentie">Technische referentie</h3> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA">De ARIA-documentatie op MDN</a></li> + <li><a href="http://www.w3.org/WAI/" rel="external">De homepage van het Web Accessibility Initiative</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">De WAI-ARIA-aanbeveling</a></li> +</ul> diff --git a/files/nl/glossary/value/index.html b/files/nl/glossary/value/index.html new file mode 100644 index 0000000000..912859e4f4 --- /dev/null +++ b/files/nl/glossary/value/index.html @@ -0,0 +1,17 @@ +--- +title: Waarde +slug: Glossary/Value +tags: + - CodingScripting + - woordenlijst +translation_of: Glossary/Value +--- +<p>In de context van data of een object <strong>{{Glossary("Wrapper", "wrapper")}}</strong> rond die data, de waarde is de <strong>{{Glossary("Primitive","primitieve waarde")}} </strong>die de wrapper bevat. In de context van een <strong>{{Glossary("Variable","variabele")}}</strong> of <strong>{{Glossary("Property","eigenschap")}}</strong>, de waarde kan zowel een primitieve als een <strong>{{Glossary("Object reference","object referentie")}}</strong> zijn.</p> + +<h2 id="Leer_meer">Leer meer</h2> + +<h3 id="Algemene_kennis">Algemene kennis</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Primitive wrapper class")}} op Wikipedia</li> +</ul> diff --git a/files/nl/glossary/waarachtig/index.html b/files/nl/glossary/waarachtig/index.html new file mode 100644 index 0000000000..a99021a002 --- /dev/null +++ b/files/nl/glossary/waarachtig/index.html @@ -0,0 +1,26 @@ +--- +title: Waarachtig ("Truthy") +slug: Glossary/Waarachtig +translation_of: Glossary/Truthy +--- +<p>In {{Glossary("JavaScript")}}, is een <strong>waarachtige </strong>waarde (truthy value) een waarde welke vertaalbaar is naar <code>true</code> wanneer deze geevalueerd wordt in een {{Glossary("Boolean")}} context. Alle waarden zijn waarachtig, tenzij deze worden gedefinieerd als foutief {{Glossary("Falsy", "falsy")}} (bijv., met uitzondering van <code>false</code>, <code>0</code>, <code>""</code>, <code>null</code>, <code>undefined</code>, and <code>NaN</code>).</p> + +<p>{{Glossary("JavaScript")}} gebruikt type {{Glossary("Type_Conversion", "coercion")}} in een Boolean context.</p> + +<p>Voorbeelden van waarachtige waarden/ "<em>truthy values"</em> in JavaScript (die vertaalbaar zijn naar true en dus het <code>if</code> blok zullen doen uitvoeren):</p> + +<pre class="brush: js">if (true) +if ({}) +if ([]) +if (42) +if ("foo") +if (new Date()) +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Glossary("Falsy")}}</li> + <li>{{Glossary("Type_Conversion", "Coercion")}}</li> + <li>{{Glossary("Boolean")}}</li> +</ul> diff --git a/files/nl/l10n_met_mercurial/index.html b/files/nl/l10n_met_mercurial/index.html new file mode 100644 index 0000000000..a56bea54cd --- /dev/null +++ b/files/nl/l10n_met_mercurial/index.html @@ -0,0 +1,134 @@ +--- +title: L10n met Mercurial +slug: L10n_met_Mercurial +tags: + - Build documentation + - Internationalization + - Localization +translation_of: Mozilla/Localization/Localizing_with_Mercurial +--- +<p>Het vertalen de huidige versies van Firefox, SeaMonkey en Thunderbird betekent werken met Mercurial. Deze documentatie is niet compleet; kom langs in #l10n of #hg op irc.mozilla.org als u vragen hebt, of vraag het op de discussiepagina van dit artikel.</p> +<p>Er zijn verschillende documenten over het gebruik van Mercurial op MDC. Deze zijn <a class="external" href="/Special:Tags" title="special:Tags?tag=Mercurial&language=en">gelabeld met "Mercurial"</a>. De <a class="internal" href="/en/Mercurial_FAQ" title="En/Mercurial FAQ">Mercurial FAQ</a> is zeker het lezen waard. Hier staan een paar commando’s om en-US (een locale-repo) te verkrijgen en een <code>.mozconfig</code> waarmee u een taalpakket en builds kunt maken.</p> +<h3 id="Programma’s">Programma’s</h3> +<p>Er zijn een aantal programma’s voor het gebruik met Mercurial. Natuurlijk is er de commandoregel-client, maar voor mensen die liever een GUI-programma gebruiken is er <a class="external" href="http://tortoisehg.sourceforge.net/" title="http://tortoisehg.sourceforge.net/">TortoiseHg</a> voor Windows, en <a class="external" href="http://trac-hg.assembla.com/mercurialeclipse" title="http://trac-hg.assembla.com/mercurialeclipse">Mercurial Eclipse</a> voor de liefhebbers van deze crossplatform-omgeving.</p> +<h3 id="Repository’s">Repository’s</h3> +<p>Er zijn twee repository’s die de en-US-bestanden bevatten:</p> +<ul> + <li><a class="external" href="http://hg.mozilla.org/releases/mozilla-aurora/" title="http://hg.mozilla.org/releases/mozilla-aurora/">mozilla-aurora</a> bevat de bestanden voor Firefox.next (currently Firefox 8.0).</li> + <li><a class="external" href="http://hg.mozilla.org/releases/comm-aurora/" title="http://hg.mozilla.org/releases/comm-aurora">comm-aurora</a> bevat de bestanden voor SeaMonkey en Thunderbird die geen onderdeel uitmaken van Firefox.</li> +</ul> +<p>{{ Note("Wanneer u de comm-aurora-repository binnenhaalt, bevat deze ook de mozilla-aurora-repository. U kunt dus een set-up gebruiken voor het werken aan Firefox, SeaMonkey en Thunderbird zonder de mozilla-aurora-repository nogmaals te moeten binnenhalen.") }}</p> +<h3 id="Pulling_en-US" name="Pulling_en-US">en-US voor de eerste keer binnenhalen</h3> +<p>Om de en-US-bestanden te verkrijgen moet u de repository mozilla-aurora of comm-aurora binnenhalen.</p> +<h4 id="Alleen_Firefox">Alleen Firefox</h4> +<p>Als u alleen aan Firefox werkt gebruikt u:</p> +<pre class="eval">hg clone <a class="external" href="http://hg.mozilla.org/releases/mozilla-aurora/" rel="freelink">http://hg.mozilla.org/releases/mozilla-aurora/</a> +</pre> +<p>Dit maakt een kloon van de mozilla-aurora-repository in de map mozilla-aurora.</p> +<h4 id="Een_combinatie_van_Firefox_SeaMonkey_Thunderbird">Een combinatie van Firefox, SeaMonkey, Thunderbird</h4> +<p>Als u aan een combinatie van Firefox, SeaMonkey en Thunderbird werkt gebruikt u:</p> +<pre>hg clone http://hg.mozilla.org/releases/comm-aurora/ +cd comm-aurora +python client.py checkout +</pre> +<p>Het eerste commando maakt een kloon van de comm-aurora-repository in de map comm-aurora. Het tweede commando verplaatst u naar die map.</p> +<p>Het derde commando maakt een kloon van mozilla-aurora en haalt een hg-repository binnen. De andere directory’s zijn nodig voor SeaMonkey en Thunderbird.</p> +<h3 id="en-US_bijwerken">en-US bijwerken</h3> +<p>Om uw mozilla-aurora-werkkopie bij te werken gaat u naar uw mozilla-aurora-map en typt u</p> +<pre class="eval">hg pull -u +</pre> +<p>Dit zal de nieuwe changesets van mozilla-aurora ophalen en deze toepassen op uw werkkopie.</p> +<p>Om uw comm-aurora-werkkopie bij te werken gaat u naar uw comm-aurora-map en typt u</p> +<pre>python client.py checkout</pre> +<p>Dit zal de nieuwe changesets van comm-aurora, mozilla-aurora en de andere benodigde locaties ophalen en deze toepassen op uw werkkopie.</p> +<h3 id="Pull_your_locale" name="Pull_your_locale">Uw locale verkrijgen</h3> +<p>Alle locales bevinden zich in mxr, . De repository’s staan apart; u vindt een lijst van de repo’s op . Gebruik de volgende regel om uw vertaling te klonen (vervang ab-CD met de code van uw locale)</p> +<pre class="eval">hg clone <a class="external" href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/" rel="freelink">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a><a class="moz-txt-link-freetext external" href="http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/">ab-CD/</a> +</pre> +<p>of werk deze bij met</p> +<pre>hg pull -u +</pre> +<h3 id="Uw_wijzigingen_naar_Mozilla_verzenden">Uw wijzigingen naar Mozilla verzenden</h3> +<p>Voeg deze regels toe aan uw <code>~/.hgrc</code>-bestand voordat u wijzigingen verzendt:</p> +<pre class="eval">[ui] +username = Your Name <<a class="link-mailto" href="mailto:your.email@example.com" rel="freelink">your.email@example.com</a>> +</pre> +<p>Met mercurial werkt u in uw eigen repository. Voordat u uw werk verzendt moet u zeker weten dat er geen wijzigingen aan de repository op de server zijn aangebracht. Om dit te controleren moet u uw locale eerst bijwerken, zoals hierboven staat omschreven.</p> +<p>Als u klaar bent met uw wijzigingen en u gecontroleerd hebt of u de repo hebt bijgewerkt naar de naar de laatste versie, kunt u de wijzigingen toepassen met:</p> +<pre class="eval">hg commit -m "message identifying the change (bug 555)" +</pre> +<p>In tegenstelling tot CVS verzendt dit niet uw wijzigingen naar Mozilla’s repository. Eerst dient u de wijzigingen te ‘pushen’ (verzenden). Om een ‘push’ naar <a class="external" href="http://hg.mozilla.org/l10n-central/" title="http://hg.mozilla.org/l10n-central/">l10n-central</a> en andere door mozilla gehoste repository’s te verrichten moet u ‘committer’-toegang hebben en het bestand <code><em>(your-local-hg-root)</em>/.hg/hgrc</code> bewerken (let op, dit is <strong>niet</strong> uw <code>~/.hgrc</code>) zodat de volgende regel wordt toegevoegd (vervang hierin ab-CD met de code van uw locale):</p> +<pre class="eval">[paths] +default = <a class="external" href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/ab-CD/" rel="freelink">http://hg.mozilla.org/releases/l10n/...-aurora/ab-CD/</a> +default-push = <a class="external" href="ssh://hg.mozilla.org/releases/l10n/mozilla-aurora/ab-CD/" rel="freelink">ssh://hg.mozilla.org/releases/l10n/m...-aurora/ab-CD/</a> +</pre> +<p>Ook dient u ssh te vertellen welke account er moet worden gebruikt voor het verzenden door <code>~/.ssh/config</code> te bewerken en de volgende regels toe te voegen:</p> +<pre>Host hg.mozilla.org +User user@host.domain +</pre> +<p><code>user@domain</code> is uw account met een @ in plaats van de % die u gebruikte voor CVS. Daarna kunt u uw werk verzenden naar de repository (en het resultaat controleren op het dashboard).</p> +<pre class="eval">hg push</pre> +<h3 id="A_.mozconfig" name="A_.mozconfig">Een .mozconfig</h3> +<h4 id="Firefox_via_mozilla-central">Firefox via mozilla-central</h4> +<p>Als u de bovenstaande stappen hebt gevolgd voor het verkrijgen van mozilla-aurora ziet uw mapindeling er als volgt uit:</p> +<pre class="eval">mozilla-aurora ++ browser +nl ++ browser +</pre> +<p>en een .mozconfig zou er zo uitzien:</p> +<pre>mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../fx-nl +ac_add_options --with-l10n-base=.. +ac_add_options --disable-compile-environment +ac_add_options --enable-application=browser</pre> +<p>Plaats dit bestand in de map mozilla-aurora.</p> +<div class="note"> + <strong>Noot:</strong> de --with-l10n-base is relative tot objdir, niet srcdir.</div> +<p><span id="result_box" lang="nl"><span class="hps">Wilt u</span> <span class="hps">een gelokaliseerde versie</span> <span class="hps">direct</span> <span class="hps">te bouwen</span><span>, voegt u</span> <span class="hps">de volgende regel</span></span> to</p> +<pre>ac_add_options --enable-ui-locale=<language code> +</pre> +<p>Een andere optie is zoner deze regel en gebruik een taalpakket zoals hieroner staat beschreven.</p> +<h4 id="Firefox_via_comm-central">Firefox via comm-central</h4> +<p>Als u de bovenstaande stappen hebt gevolgd voor het verkrijgen van comm-central ziet uw mapindeling er als volgt uit:</p> +<pre>comm-central ++ mozilla + + browser +nl ++ browser +</pre> +<p>en een .mozconfig zou er als volgt uitzien:</p> +<pre>mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../../fx-nl +ac_add_options --with-l10n-base=.. +ac_add_options --disable-compile-environment +ac_add_options --enable-application=browser</pre> +<p>{{ Note("Het configuratiecommando <code>make -f client.mk</code> moet worden opgegeven vanuit de map comm-aurora/mozilla.") }}</p> +<p>De regel <code>--with-l10n-base</code> is juist met alleen “<code>..</code>”. Dit is vanwege de manier waarop het werkt binnen comm-aurora.</p> +<p>Dit bestand dient te worden geplaatst in de map comm-aurora/mozilla.</p> +<h4 id="Thunderbird_en_SeaMonkey">Thunderbird en SeaMonkey</h4> +<p>Als u de bovenstaande stappen hebt gevolgd voor het verkrijgen van comm-central ziet uw mapindeling er als volgt uit:</p> +<pre>comm-aurora ++ mail ++ suite +nl ++ mail ++ suite +</pre> +<p>en een .mozconfig voor Thunderbird zou er zo uitzien:</p> +<pre>mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../tb-nl +ac_add_options --with-l10n-base=.. +ac_add_options --disable-compile-environment +ac_add_options --enable-application=mail</pre> +<p>Vervang <code>tb-nl</code> door <code>sm-nl</code> en <code>mail</code> door <code>suite</code> voor een SeaMonkey-.mozconfig.</p> +<p>Plaats dit bestand in de map comm-central.</p> +<p>Voer <code>make -f client.mk build</code> uit vanuit de map comm-aurora.</p> +<h3 id="Compare-locales" name="Compare-locales">Compare-locales</h3> +<p><a href="/en/Compare-locales" title="en/Compare-locales">Compare-locales</a> werkt nog hetzelfde, voor Firefox:</p> +<pre class="eval">compare-locales mozilla-aurora/browser/locales/l10n.ini . nl +</pre> +<p>of voor Thunderbird:</p> +<pre>compare-locales comm-aurora/mail/locales/l10n.ini . nl +</pre> +<p>Vervang mail door suite als u SeaMonkey wilt controleren.</p> +<h3 id="Building_langpacks_etc" name="Building_langpacks_etc">Taalpakket maken etc.</h3> +<p>Er is een kleine kans dat u <code>--with-l10n-base</code> moet toevoegen als een configuratieargument, dat verwijst naar de basismap van uw l10n-repo. Volg <a href="/en/Creating_a_Language_Pack" title="en/Creating_a_Language_Pack">Creating a Language Pack</a> en pas de paden aan als het nodig is.</p> +<p>{{ languages( { "en": "en/L10n_on_Mercurial", "es": "es/L10n_en_Mercurial", "fr": "fr/Localisation_avec_Mercurial" } ) }}</p> diff --git a/files/nl/learn/accessibility/html/index.html b/files/nl/learn/accessibility/html/index.html new file mode 100644 index 0000000000..f5751efac9 --- /dev/null +++ b/files/nl/learn/accessibility/html/index.html @@ -0,0 +1,541 @@ +--- +title: 'HTML: Een goede basis voor toegankelijkheid' +slug: Learn/Accessibility/HTML +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">Een bijzonder groot deel van alle webcontent kan toegankelijk gemaakt worden door correcte HTML elementen te gebruiken voor het juiste doel. Dit artikel gaat in detail over hoe HTML gebruikt kan worden om maximale toegankelijkheid te garanderen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td> + <p>basiscomputervaardigheden, basiskennis van HTML (zie <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie in HTML</a>) en inzicht in <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">wat toegankelijkheid is</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td> + <p>Vertrouwd raken met HTML functies die toegankelijkheidsvoordelen hebben en hoe je deze op de juiste manier kunt gebruiken in je webdocumenten.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="HTML_en_toegankelijkheid">HTML en toegankelijkheid</h2> + +<p>Naarmate je meer leert over HTML - des te meer bronnen je leest, des te meer voorbeelden je bekijkt, enz. - blijf je een terugkerend thema zien: het belang van het gebruik van semantische HTML (ook wel POSH of 'Plain Old Semantic HTML' genoemd). Dit betekent eigenlijk niets anders dan zoveel mogelijk gebruik maken van de juiste HTML-elementen voor hun juiste doel.</p> + +<p>Je vraagt je misschien af waarom dit zo belangrijk is? Je kunt immers een combinatie van CSS en JavaScript gebruiken om zo ongeveer elk HTML-element te laten werken zoals je wilt. Een control button om een video op uw site af te spelen, kan bijvoorbeeld als volgt worden gemarkeerd:</p> + +<pre class="brush: html"> <div>Speel video af</div></pre> + +<p>Maar zoals je verderop in dit artikel in meer detail zult zien, is het logisch om het juiste HTML element voor deze taak te gebruiken:</p> + +<pre class="brush: html"> <button>Speel video af</button></pre> + +<p>Niet alleen HTML <button> s hebben standaard een geschikte stijl toegepast (die je waarschijnlijk wilt overschrijven), ze hebben ook een ingebouwde toetsenbordtoegankelijkheid - ze kunnen namelijk worden weergegeven tussen tabbladen en worden geactiveerd met Return / Enter.</p> + +<p>Het schrijven van semantische HTML duurt niet langer dan niet-semantische (slechte) markup. En als je dit consequent vanaf het begin van je project doet heeft het ook andere voordelen dan alleen toegankelijkheid:<br> + </p> + +<ol> + <li><strong>Gemakkelijker te ontwikkelen</strong> — zoals hierboven vermeld, krijg je al standaard wat extra functionaliteit. En bovendien is het waarschijnlijk gemakkelijker te begrijpen.</li> + <li><strong>Beter op mobiel</strong> — semantische HTML is aantoonbaar lichter in bestandsgrootte dan niet-semantische spaghetti-code, en gemakkelijker om responsive te maken.</li> + <li><strong>Goed voor SEO</strong> — zoekmachines geven meer aandacht aan zoekwoorden binnen headings, links, enzovoort dan zoekwoorden die zijn opgenomen in niet-semantische <div> s, enz., Zo zijn je documenten en webpagina's beter vindbaar voor klanten.</li> +</ol> + +<p>Laten we meer in detail duiken, en toegankelijke HTML bekijken.</p> + +<div class="note"> +<p><strong>N.b.</strong>: het is een goed idee om een schermlezer in te stellen op uw lokale computer, zodat u de onderstaande voorbeelden kunt testen. Raadpleeg de handleiding voor schermlezers (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders guide</a>) voor meer informatie.</p> +</div> + +<h2 id="Goede_semantiek">Goede semantiek</h2> + +<p>We hebben al gesproken over het belang van goede semantiek en waarom we het juiste HTML-element voor het juiste doel moeten gebruiken. Deze taak mag niet worden genegeerd. Het is een van de belangrijkste punten waarop toegankelijkheid misloopt als het niet goed wordt toegepast.</p> + +<p>De rauwe waarheid van het internet is dat mensen heel vreemde dingen doen met HTML-markup. Het misbruik van HTML is te wijten aan legacy-praktijken die niet volledig zijn vergeten, en soms is het gewoon onwetendheid. Hoe het ook zij, je dient dergelijke slechte code altijd te vervangen. Waar je deze ook ziet, wanneer je maar kunt.</p> + +<p>Soms ben je niet altijd in de positie om slechte markup te verwijderen - zo kunnen je pagina's worden gegenereerd door een soort server-side framework waar je geen volledige controle over hebt, of dat je inhoud van derden op je pagina hebt (zoals als advertentiebanners) waar je geen controle over hebt.</p> + +<p>Het doel is echter niet "alles of niets". Elke verbetering die je kunt maken, zal de gedachte achter toegankelijkheid helpen.</p> + +<h3 id="Text_content">Text content</h3> + +<p>Een van de beste toegankelijkheidshulpmiddelen die een gebruiker van een schermlezer kan hebben, is een goede inhoudsstructuur van kopjes, alinea's, lijsten, enz. Een goed semantisch voorbeeld kan er ongeveer zo uitzien:</p> + +<pre class="brush: html example-good"> <h1>Mijn heading</h1> + + <p>Dit is de eerste sectie van mijn document.</p> + + <p>En ik voeg hier nog een paragraaf toe.</p> + + <ol> + <li>Hier is</li> + <li>een lijst voor</li> + <li>jou om te lezen</li> + </ol> + + <h2>Mijn subheading</h2> + + <p>Dit is de eerste subsectie van mijn document. Ik hou van mensen die mijn content kunnen vinden!</p> + + <h2>Mijn 2e subheading</h2> + + <p>Dit is de tweede subsectie van mijn document. Ik denk dat deze nog interessanter is dan de andere.</p></pre> + +<p>We hebben een andere versie voor je voorbereid met wat langere teksten. Deze kun je uitproberen met een screenreader (zie <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Als je hierdoor heen probeert te navigeren, dan zie je dat dit vrij eenvoudig is om jezelf doorheen te navigeren:</p> + +<ol> + <li>De screenreader leest elke header uit zodra je verder door de content heen gaat. Je wordt geïnformeerd over wat een heading is, wat een paragraaf is, enz.</li> + <li>Het stopt na ieder element. Het laat jou werken in een tempo wat prettig is voor jou.</li> + <li>Je kunt naar ieder andere heading springen met (volgende/vorige) in de meeste screenreaders.</li> + <li>Je kunt in vele screenreaders ook een lijst met headings naar voren brengen, en deze gebruiken als een handige 'inhoudspagina' om specifieke content te vinden.</li> +</ol> + +<p>Soms schrijven mensen headings, paragrafen, enz. alleen als presentaarbare HTML en bijv. met line-breaks (<br>). Zoiets als onderstaande:</p> + +<pre class="brush: html example-bad"> <font size="7">Mijn heading</font> + <br><br> + Dit is de eerste sectie van mijn document. + <br><br> + Ik zal hier nog een paragraaf toevoegen. + <br><br> + 1. Hier is + <br><br> + 2. een lijst voor + <br><br> + 3. jou om te lezen + <br><br> + <font size="5">Mijn subheading</font> + <br><br> + Dit is de eerste subsectie van mijn document. Ik hou van mensen die mijn content kunnen vinden! + <br><br> + <font size="5">My 2nd subheading</font> + <br><br> + Dit is de tweede subsectie van mijn document. Ik denk dat deze nog interessanter is dan de andere.</pre> + +<p>Als je onze langere versie uitprobeert met een screenreader (zie <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), dan zul je zien dat je niet echt een goede ervaring hebt. De screenreader kan niets als wegwijzer gebruiken, dus je kunt ook geen bruikbare inhoudsopgave vinden. De hele pagina wordt zo gezien als één gigantisch blok, dus daarom het gewoon in één keer volledig uitgelezen.</p> + +<p>Er zijn nog andere zaken die nog verder gaan dan toegankelijkheid. Het is bijvoorbeeld moeilijker om de inhoud te stijlen met CSS, of het manipuleren met Javascript. Er zijn immers geen elementen die als 'selectors' kunnen worden gebruikt.</p> + +<h4 id="Gebruik_duidelijke_taal">Gebruik duidelijke taal</h4> + +<p>De taal die je gebruikt, kan ook de toegankelijkheid beìnvloeden. Over het algemeen moet je zo duidelijk mogelijke taal gebuiken die niet overdreven complex is, en geen onnodig jargon bevat. Dit komt niet alleen ten goede aan mensen met cognitieve of andere handicaps; het komt alle lezers ten goede voor wie de tekst niet in hun eerste taal is geschreven, voor oudere mensen, voor jongere mensen ... eigenlijk iedereen! Daarnaast zou je altijd moeten proberen om taal en karakters te vermijden die niet duidelijk worden voorgelezen door de schermlezer. Bijvoorbeeld:</p> + +<p> </p> + +<ul> + <li>Gebruik geen streepjes als u dit kunt voorkomen. In plaats van 5-7 te schrijven, schrijf je 5 tot 7.</li> + <li>Breid afkortingen uit - schrijf 'Januari' in plaats van 'Jan' te schrijven.</li> + <li>Schrijf afkortingen uit, minstens één of twee keer. In plaats van in eerste instantie HTML te schrijven, schrijf je Hypertext Markup Language.</li> +</ul> + +<h3 id="Pagina_layouts">Pagina layouts</h3> + +<p>Vroeger in de 'niet-zo-goede-oude-tijd' maakten mensen gebruik van HTML-tabellen om paginalay-outs te maken - ze gebruikten verschillende tabelcellen om de kop-, voettekst-, zijbalk-, hoofdinhoudskolom, enz. te gebruiken. Dit is geen goed idee, omdat een schermlezer hoogstwaarschijnlijk hele verwarrende zaken zal uitlezen, vooral als de lay-out complex is en veel geneste tabellen bevat.</p> + +<p>Probeer ons <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a> voorbeeld. Dit ziet er ongeveer zo uit:</p> + +<pre class="brush: html"> <table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Ons team</a> + </td> + <td width="200"> + <a href="#" align="center">Projecten</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Zoeken" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Zoek!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Gerelateerd</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p> </p> + +<p>Als je probeert hierdoor heen te navigeren met een schermlezer, zal het waarschijnlijk zeggen dat er een tabel moet worden bekeken (hoewel sommige schermlezers het verschil tussen tabel-lay-outs en gegevenstabellen kunnen raden). Je zult dan waarschijnlijk (afhankelijk van welke schermlezer je gebruikt) als object naar de tabel moeten gaan en apart naar de functies kijken, en dan weer uit de tabel gaan om verder door de inhoud te kunnen navigeren.</p> + +<p>Tabel-lay-outs zijn een overblijfsel uit het verleden - ze waren logisch terug toen CSS-ondersteuning niet wijdverspreid was in browsers. Maar ze creëren verwarring voor schermlezers-gebruikers en zijn ook slecht voor veel andere redenen (onnodig gebruik van tabellen, betwistbaar meer markup, ontwerp maken wordt minder handig). Doe het niet!</p> + +<p>Je kunt deze opvattingen verifiëren door je eerdere ervaring te vergelijken met een moderner voorbeeld van een websitestructuur (<a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">more modern website structure example</a>), dat zou er ongeveer zo uit kunnen zien:</p> + +<p> </p> + +<pre class="brush: html"> <header> + <h1>Header</h1> + </header> + + <nav> + <!-- main navigatie hier --> + </nav> + + <!-- Hiet is onze pagina's main content --> + <main> + + <!-- Het bevat een article --> + <article> + <h2>Article heading</h2> + + <!-- article content gaat hier --> + </article> + + <aside> + <h2>Gerelateerd</h2> + + <!-- aside content gaat hier --> + </aside> + + </main> + + <!-- En hier onze onze main footer die gebruikt worden op al onze pagina's in onze website --> + + <footer> + <!-- footer content gaat hier --> + </footer></pre> + +<p>Als je ons modernere HTML structuurvoorbeeld met een schermlezer probeert, zie je dat de opmaakmarkering niet langer in de weg zit en de inhoud keurig uitgelezen wordt. Het is ook veel schoner en kleiner qua hoeveelheid code. Dit betekent dat code eenvoudiger te onderhouden is en minder bandbreedte kost voor de gebruiker om de code te downloaden (dus vooral belangrijk voor mensen met langzame verbindingen!).</p> + +<p>Een andere overweging bij het maken van lay-outs is het gebruik van HTML5-semantische elementen zoals te zien in het bovenstaande voorbeeld (zie <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">content sectioning</a>). Je kunt een lay-out maken met alleen geneste {{htmlelement ("div")}} elementen, maar het is beter om de juiste sectie te gebruiken elementen om je hoofdnavigatie in te pakken ({{htmlelement ("nav")}}), footer ({{htmlelement ("footer")}}), contenteenheden ({{htmlelement ("article")}}), enz. te herhalen Deze bieden extra semantiek voor schermlezers (en andere hulpmiddelen) om de gebruiker extra aanwijzingen te geven over de inhoud waarin ze navigeren (zie <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> voor een idee van hoe ondersteuning voor schermlezers eruit ziet).</p> + +<div class="note"> +<p><strong>N.b.</strong>: Naast je inhoud met een goede semantiek en een aantrekkelijke lay-out, moet deze logisch en zinvol zijn in de bronvolgorde - je kunt deze later altijd plaatsen waar je wilt met behulp van CSS, maar je moet eerst de bronvolgorde in orde krijgen. Dit is namelijk hetgeen wat gebruikers van schermleesprogramma's word voorgelezen.</p> +</div> + +<h3 id="UI_besturingselementen">UI besturingselementen</h3> + +<p> </p> + +<p>Met UI-besturingselementen bedoelen we de belangrijkste delen van webdocumenten waarmee gebruikers communiceren - meestal knoppen, links en formulierbesturingselementen. In deze sectie zullen we kijken naar de fundamentele toegankelijkheidsproblemen waar je rekening mee moet houden bij het maken van dergelijke besturingselementen. Andere artikelen over WAI-ARIA en multimedia zullen andere aspecten van UI-toegankelijkheid toelichten.</p> + +<p>Een belangrijk aspect van de toegankelijkheid van UI-besturingselementen is dat browsers standaard toestaan dat ze door het toetsenbord worden gemanipuleerd. Je kunt dit uitproberen met ons <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> voorbeeld (zie de <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">source code</a>) - open dit op een nieuw tabblad en probeer de tabtoets in te drukken; na een paar keer drukken, zou je moeten zien dat de tab-focus begint om door de verschillende focusseerbare elementen te bewegen; de gefocuste elementen krijgen een gemarkeerde standaardstijl in elke browser (deze verschilt enigszins tussen verschillende browsers), zodat je kunt zien welk element is gefocust.</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>Je kunt vervolgens op Enter / Return drukken om een gefocusde link te volgen of op een knop te drukken (we hebben wat JavaScript toegevoegd om de knoppen een bericht te laten 'alert'). Of begin met typen om een tekst in te voeren in een text input (andere formulierelementen hebben verschillende bedieningselementen, bijvoorbeeld het element {{htmlelement ("select")}} kan zijn opties laten weergeven en rouleren zodra je de pijltjestoetsen omhoog en omlaag gebruikt).</p> + +<div class="note"> +<p><strong>N.b.</strong>: Verschillende browsers hebben mogelijk verschillende toetsenbordbesturingsopties beschikbaar. Zie <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> voor meer informatie.</p> +</div> + +<p>Eigenlijk krijg je dit gedrag in principe gratis, gewoon door alleen maar de juiste elementen te gebruiken, bijvoorbeeld:</p> + +<pre class="brush: html example-good"> <h1>Links</h1> + + <p>Dit is een link naar <a href="https://www.mozilla.org">Mozilla</a>.</p> + + <p>Nog een link, naar <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + + <h2>Buttons</h2> + + <p> + <button data-message="Dit is van de eerste button">Klik mij!</button> + <button data-message="Dit is van de tweede button">Klik mij ook!</button> + <button data-message="Dit is van de derde button">En mij ook!</button> + </p> + + <h2>Formulier</h2> + + <form> + <div> + <label for="name">Vul je naam in:</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age">Voeg je leeftijd toe:</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood">Hoe voel je je vandaag:</label> + <select id="mood" name="mood"> + <option>Blij</option> + <option>Verdrietig</option> + <option>Boos</option> + <option>Bezorgd</option> + </select> + </div> + </form></pre> + +<p> </p> + +<p>Dit betekent dat je op de juiste manier links, knoppen, formulierelementen en labels gebruikt (inclusief het element {{htmlelement ("label")}} voor formulierbesturingselementen).</p> + +<p>Het is echter altijd zo dat mensen soms rare dingen doen met HTML. Je ziet bijvoorbeeld soms knoppen gemaakt worden met behulp van {{htmlelement ("div")}} s, bijvoorbeeld:</p> + +<p> </p> + +<pre class="brush: html example-bad"> <div data-message="Dit is van de eerste button">Klik mij!</div> + <div data-message="Dit is van de tweede button">Klik mij ook!</div> + <div data-message="Dit is van de derde button">En mij ook!</div></pre> + +<p>Het gebruik van dergelijke code wordt sterk afgeraden - je verliest namelijk onmiddellijk de toegankelijkheid voor het native toetsenbord die je wel zou hebben gehad als je net {{htmlelement ("button")}} -elementen had gebruikt. Daarnaast is het zo dat je geen van de standaard CSS-styling krijgt die knoppen automatisch meekrijgen.</p> + +<h4 id="Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</h4> + +<p>Adding such advantages back in takes a bit of work (you can an example code in our <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example — also see the <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Here we've given our fake <code><div></code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex="0"</code>:</p> + +<pre class="brush: html"> <div data-message="This is from the first button" tabindex="0">Click me!</div> + <div data-message="This is from the second button" tabindex="0">Click me too!</div> + <div data-message="This is from the third button" tabindex="0">And me!</div></pre> + +<p>Basically, the {{htmlattrxref("tabindex")}} attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for <code>tabindex</code>:</p> + +<ul> + <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li> + <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li> +</ul> + +<p>Whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:</p> + +<pre class="brush: js"> document.onkeydown = function(e) { + if(e.keyCode === 13) { // The Enter/Return key + document.activeElement.click(); + } + };</pre> + +<p>Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> property; if it is the keycode that matches Return/Enter, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.click()</code>. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> gives us the element that is currently focused on the page.</p> + +<p>This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. <strong>Better to just use the right element for the right job in the first place.</strong></p> + +<h4 id="Meaningful_text_labels">Meaningful text labels</h4> + +<p>UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.</p> + +<p>You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screenreader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:</p> + +<pre class="brush: html example-good"> <p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p></pre> + +<p>but this is bad link text:</p> + +<pre class="brush: html example-bad"> <p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p></pre> + +<div class="note"> +<p><strong>Note</strong>: You can find a lot more about link implementation and best practices in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article. You can also see some good and bad examples at <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p> +</div> + +<p>Form labels are also important, for giving you a clue what you need to enter into each form input. The following seems like a reasonable enough example:</p> + +<pre class="brush: html example-bad"> Fill in your name: <input type="text" id="name" name="name"></pre> + +<p>However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input, and make it clear how to fill it in if you cannot see it. If you access this with some screenreaders, you may only be given a description along the lines of "edit text".</p> + +<p>The following is a much better example:</p> + +<pre class="brush: html example-good"> <div> + <label for="name">Fill in your name:</label> + <input type="text" id="name" name="name"> + </div></pre> + +<p>With the code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> + +<p>As an added bonus, in most browsers associating a label with a form input means that you can click the label to select/activate the form element. This gives the input a bigger hit area, making it easier to select.</p> + +<div class="note"> +<p><strong>Note</strong>: you can see some good and bad form examples in <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> +</div> + +<h2 id="Accessible_data_tables">Accessible data tables</h2> + +<p>A basic data table can be written with very simple markup, for example:</p> + +<pre class="brush: html"> <table> + <tr> + <td>Name</td> + <td>Age</td> + <td>Gender</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Male</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Female</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Female</td> + </tr> + </table></pre> + +<p>But this has problems — there is no way for a screenreader user to associate rows or columns together as groupings of data. To do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for the above table (see <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> and try the example out yourself).</p> + +<p>Now have a look at our <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">punk bands table example</a> — you can see a few accessibility aids at work here:</p> + +<ul> + <li>Table headers are defined using {{htmlelement("th")}} elements — you can also specify if they are headers for rows or columns using the <code>scope</code> attribute. This gives you complete groups of data that can be consumed by screen readers as single units.</li> + <li>The {{htmlelement("caption")}} element and <code><table></code> <code>summary</code> attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. <code><caption></code> is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a> article for some more details around accessible data tables.</p> +</div> + +<h2 id="Text_alternatives">Text alternatives</h2> + +<p>Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We'll cover video and audio content in detail in the Accessible multimedia article later on, but for this article we'll look accessibility for the humble {{htmlelement("img")}} element.</p> + +<p>We have a simple example written up, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, which features four copies of the same image:</p> + +<pre> <img src="dinosaur.png"> + + <img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + + <img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> + + + <img src="dinosaur.png" aria-labelledby="dino-label"> + + <p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> + </pre> + +<p>The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.</p> + +<div class="note"> +<p><strong>Note</strong>: This is why you should never include text content inside an image — screen readers simply can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!</p> +</div> + +<p>When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".</p> + +<p>This highlights the importance of not only using meaningful file names in case so-called <strong>alt text</strong> is not available, but also making sure that alt text is provided in <code>alt</code> attributes wherever possible. Note that the contents of the <code>alt</code> attribute should always provide a direct representation of the image and what it conveys visually. Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before.</p> + +<p>One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, so have no meaning. If they are decorational, it is better to write an empty text as a value for <code>alt</code> attribute (see <a href="#Empty_alt_attributes">Empty alt attributes</a>) or to just include them in the page as CSS background images.</p> + +<div class="note"> +<p><strong>Note</strong>: Read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a> and <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> for a lot more information about image implementation and best practices.</p> +</div> + +<p>If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a <code>title</code> attribute, as shown above. In this case, most screenreaders will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>Let's have another quick look at the fourth method:</p> + +<pre class="brush: html"> <img src="dinosaur.png" aria-labelledby="dino-label"> + + <p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>In this case, we are not using the <code>alt</code> attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an <code>id</code>, and then used the <code>aria-labelledby</code> attribute to refer to that <code>id</code>, which causes screenreaders to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with <code>alt</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>aria-labelledby</code> is part of the <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> spec, which allows developers to add in extra semantics to their markup to improve screenreader accessibility where needed. To find out more about how it works, read our <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a> article.</p> +</div> + +<h3 id="Other_text_alternative_mechanisms">Other text alternative mechanisms</h3> + +<p>Images also have another mechanisms available for providing descriptive text. For example, there is a <code>longdesc</code> attribute that is meant to point to a separate web document containing an extended description of the image, for example:</p> + +<pre class="brush: html"> <img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>This sounds like a good idea, especially for infographics like big charts with lots of information on that could perhaps be represented as an accessible data table instead (see previous section). However, <code>longdesc</code> is not supported consistently by screenreaders, and the content is completely inaccessible to non-screenreader users. It is arguably much better to include the long description on the same page as the image, or link to it with a regular link.</p> + +<p>HTML5 includes two new elements — {{htmlelement("figure")}} and {{htmlelement("figcaption")}} — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:</p> + +<pre class="brush: html"> <figure> + <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"> + <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> + </figure></pre> + +<p>Unfortunately, most screenreaders don't seem to associate figure captions with their figures yet, but the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.</p> + +<h3 id="Empty_alt_attributes">Empty alt attributes</h3> + +<pre class="brush: html"> <h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: the king of the dinosaurs + </h3></pre> + +<p>There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's <code>alt</code> attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).</p> + +<p>The reason to use an empty <code>alt</code> instead of not including it is because many screen readers announce the whole image URL if no <code>alt</code> is provided. In the above example, the image is acting as a visual decoration to the heading its associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should put an empty <code>alt</code> on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.</p> + +<div class="note"> +<p><strong>Note</strong>: if possible you should use CSS to display images that are only decoration.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/nl/learn/accessibility/index.html b/files/nl/learn/accessibility/index.html new file mode 100644 index 0000000000..9dcfc071a1 --- /dev/null +++ b/files/nl/learn/accessibility/index.html @@ -0,0 +1,62 @@ +--- +title: Accessibility +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), do <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and consider accessibility from the start. In this module, we'll cover the latter in detail.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> + <dd>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> +</ul> diff --git a/files/nl/learn/css/css_layout/index.html b/files/nl/learn/css/css_layout/index.html new file mode 100644 index 0000000000..5990002230 --- /dev/null +++ b/files/nl/learn/css/css_layout/index.html @@ -0,0 +1,68 @@ +--- +title: CSS layout +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Doorgeefpagina + - Floating + - Gids + - Grids + - Landing + - Leren + - Meerdere kolommen + - Module + - Overzicht + - Positionering + - Rasters + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Op dit punt gekomen hebben we al gekeken naar de fundamenten van CSS, hoe tekst te stijlen en hoe de dozen te stijlen en de inhoud ervan te manipuleren. Nu wordt het tijd om te kijken naar hoe we de dozen in de juiste plaats zetten ten opzichte van de viewport en elkaar. We hebben de noodzakelijke vereisten al gezien, en dus kunnen we nu diep duiken in de CSS layout. We kijken naar de verschillende displayinstellingen, traditionele layout methoden (dozen laten drijven en ze positioneren), en nieuwe layout opties zoals flexibele dozen.</p> + +<h2 id="Vereisten">Vereisten</h2> + +<p>Voor je begint aan deze module zou je het volgende al moeten kennen:</p> + +<ol> + <li>De basis van hoe HTML werkt, zoals gezien in de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML">Inleiding tot HTML</a> module.</li> + <li>De CSS fundamenten kennen, zoals besproken in de <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS">Inleiding tot CSS</a> module.</li> + <li>Begrijpen hoe je <a href="/en-US/docs/Learn/CSS/Styling_boxes">dozen moet stijlen.</a></li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je werkt op een computer/tablet/ander apparaat waar je niet de mogelijkheid hebt om je files aan te maken, kan je de meeste voorbeelden uitproberen in een online code-omgeving zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<p>Deze hoofdstukken zullen instructies geven over de fundamentele layouttechnieken en -hulpmiddelen die CSS rijk is.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introductie tot CSS layout</a></dt> + <dd>Dit hoofdstuk zal enkele CSS layout mogelijkheden herhalen die we al zagen in vorige modules, zoals de verschillende waarden voor {{cssxref("display")}}, en enkele van de concepten introduceren die we zullen zien doorheen deze module.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats / Drijvers</a></dt> + <dd>Oorspronkelijk bedacht voor het laten drijven van afbeeldingen in blokken tekst, is de {{cssxref("float")}} eigenschap één van de meest gebruikte hulpmiddelen geworden voor het maken van layouts met meerdere kolommen op webpagina's. Dit artikel zal alles uitleggen.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionering</a></dt> + <dd>Positionering laat je toe om elementen uit de normale flow van de pagina te halen, zodat ze zich anders gedragen: bv. door op elkaar te zitten of altijd in dezelfde plaats te blijven "plakken" in de viewport. Dit hoofdstuk legt de verschillende mogelijke waarden voor de {{cssxref("position")}} eigenschap uit en hoe je die kan gebruiken.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Praktische positioneringsvoorbeelden</a></dt> + <dd>Verder bouwend op de basis van positionering uit het vorige hoofdstuk, gaan we nu proberen enkele voorbeelden uit het "echte leven" te bouwen, om te tonen welke zaken er mogelijk zijn met positionering.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox / flexibele dozen</a></dt> + <dd>Een nieuwe technologie, maar met sterke ondersteuning door de browsers. <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> wordt bijgevolg al veel gebruikt. Het verschaft hulpmiddelen die toestaan om zeer snel complexe, flexibele layouts te maken. Het staat toe om zaken te doen die traditioneel zeer moeilijk waren in CSS. Dit hoofdstuk legt de basis uit.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids / Rasters</a></dt> + <dd>Rastersystemen zijn nog een veel voorkomend kenmerk van CSS layouts, die dikwijls met behulp van floats of andere layoutmogelijkheden geïmplementeerd worden. Stel je voor dat layouts gebruik maken van een vast aantal kolommen (bv. 4, 6 of 12) en dat je inhoud binnen deze denkbeeldige kolommen wordt weergegeven. In dit hoofdstuk zullen we het basisidee verkennen dat leidde tot de creatie van een raster. We kijken verder naar voorgemaakt raster dat verschaft wordt door een rasterframework en eindigen door te experimenteren met CSS Rasters, een nieuwe mogelijkheid in de browser die het een pak makkelijker maakt om rasters te implementeren in CSS.</dd> +</dl> + +<h2 id="Beoordelingen">Beoordelingen</h2> + +<p>De volgende beoordelingen zullen je vaardigheid om pagina's vorm te geven met behulp van CSS testen.</p> + +<dl> + <dt>Een flexibele layout creëeren met meerdere kolommen (TBD)</dt> + <dd>Deze beoordeling test je vaardigheid in het creëeren van een standaard meerkolommige layout met enkele interessante kenmerken.</dd> + <dt>Een vastgeplakte controlewidget maken (TBD)</dt> + <dd>Deze beoordeling test je kunde in positionering doro je te vragen om een vastgeplakte controlewidget te maken die gebruikers toelaat om de instellingen van een web app te openen, ongeacht waar die gebruiker naartoe scrollt op de pagina.</dd> +</dl> diff --git a/files/nl/learn/css/css_layout/positionering/index.html b/files/nl/learn/css/css_layout/positionering/index.html new file mode 100644 index 0000000000..a46d73a38b --- /dev/null +++ b/files/nl/learn/css/css_layout/positionering/index.html @@ -0,0 +1,467 @@ +--- +title: Positionering +slug: Learn/CSS/CSS_layout/Positionering +tags: + - Article + - Beginner + - CSS + - CoderenScripten + - Gids + - Layout + - Positionering + - VAST + - absoluut + - relatief +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal. Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport. Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basis van HTML (bestudeer <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie tot HTML</a>) en een idee van Hoe CSS werkt (bestudeer <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie tot CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Leren hoe CSS positionering werkt.</td> + </tr> + </tbody> +</table> + +<h2 id="Documentstroom">Documentstroom</h2> + +<p>Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.</p> + +<p>Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS/doosmodel">doosmodel</a>. Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud. Inline elementen zijn zo hoog en zo breed als hun inhoud. Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen. Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met <code>display: block;</code>.</p> + +<p>Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen? De <strong>normale layout flow</strong> (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden. Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.</p> + +<p>Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels. Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement. Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen. </p> + +<p>Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen. Dit noemen we <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">samenvallende marges</a>, wat we al eerder zagen.</p> + +<p>We illustreren dit alles met een eenvoudig voorbeeld:</p> + +<pre class="brush: html"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p> + +<p>We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.</p> + +<p>We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk. Haal een kopie van <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> af van onze Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">broncode hier</a>) en gebruik dat als aanvangspunt.</p> + +<h2 id="Inleiding_tot_positionering">Inleiding tot positionering</h2> + +<p>Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven. Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken? Positioneren is de manier waarop je dat kan. Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled? Positioneren maakt dit mogelijk.</p> + +<p>Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen. Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.</p> + +<h3 id="Statische_positionering">Statische positionering</h3> + +<p>Statische positionering is de standaard voor elk element. Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".</p> + +<p>Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse <code>positioned</code> toe aan het tweede {{htmlelement("p")}} in de HTML:</p> + +<pre class="brush: html"><p class="positioned"> ... </p></pre> + +<p>Voeg nu de volgende regel toe aan de onderkant van je CSS:</p> + +<pre class="brush: css">.positioned { + position: static; + background: yellow; +}</pre> + +<p>Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf. </p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">zie broncode</a>).</p> +</div> + +<h3 id="Relatieve_positionering">Relatieve positionering</h3> + +<p>Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken. Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen. Zo kan je het andere elementen laten overlappen op de pagina. Probeer de positiedeclaratie te updaten in je code:</p> + +<pre class="brush: css">position: relative;</pre> + +<p>Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat. Hoe wijzig je dan de positie van het element? Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.</p> + +<h3 id="Kennis_maken_met_top_bottom_left_and_right">Kennis maken met top, bottom, left, and right</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet. Om dit uit te proberen kan je de volgende declaraties toevoegen aan de <code>.positioned</code> regel in je CSS:</p> + +<pre>top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>Opmerking</strong>: De waarden van deze eigenschappen kunnen alle <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">eenheden</a> aanvaarden die je logischerwijze zou verwachten: pixels, mm, rems, %, enz.</p> +</div> + +<p>IIndien je nu opslaat en herlaad zal je dit resultaat krijgen:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> + +<p>Cool, niet? Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden? Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt. Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt. Als je dus specifieert <code>top: 30px;</code>, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan dit voorbeeld in actie zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">zie broncode</a>).</p> +</div> + +<h3 id="Absolute_positionering">Absolute positionering</h3> + +<p>Absolute positionering geeft radicaal andere resultaten. Laten we proberen om de positie in onze declaratie als volgt te veranderen:</p> + +<pre>position: absolute;</pre> + +<p>Als je nu opslaat en herlaad, zou je iets moeten zien dat hier op trekt:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<p>Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat! Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow. In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen. Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina. Popups, menus, enz. zijn mogelijke voorbeelden.</p> + +<p>Merk ten tweede op dat de positie van het element veranderd is. Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering. In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit. In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig. Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: <code>top: 0; bottom: 0; left: 0; right: 0;</code> en <code>margin: 0;</code>. Zet die waarden nadien terug naar de originele waarden.</p> +</div> + +<div class="note"> +<p><strong>Opmerking</strong>: Ja, marges zijn nog steeds van toepassing op gepositioneerde elementen. Ze vallen echter niet samen.</p> +</div> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan dit voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">zie broncode</a>).</p> +</div> + +<h3 id="Positioneringscontexten">Positioneringscontexten</h3> + +<p>Welk element is het "vervattende element" van een absoluut gepositioneerd element? Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de <strong>positioneringscontext</strong> van het element genoemd.</p> + +<p>We kunnen de <strong>positioneringscontext</strong> (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen. Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is). Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:</p> + +<pre>position: relative;</pre> + +<p>Dit zou het volgende resultaat moeten geven:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> + +<p>Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">zie broncode</a>).</p> +</div> + +<h3 id="De_z-index">De z-index</h3> + +<p>Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen? In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext. Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen. Maar wat als er meer dan één is?</p> + +<p>Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:</p> + +<pre>p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan. Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen. Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.</p> + +<p>Kan je die volgorde veranderen? Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as. Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets. (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).</p> + +<p>Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt). {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen. Standaard hebben gepositioneerde elementen een <code>z-index</code> van auto, wat praktisch gezien 0 is.</p> + +<p>Om de volgorde te veranderen, voeg je volgende declaratie toe aan de <code>p:nth-of-type(1)</code> regel:</p> + +<pre>z-index: 1;</pre> + +<p>Je zou nu het voltooide voorbeeld moeten zien:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> + +<p>Bemerk dat <code>z-index</code> enkel eenheidsloze waarden aanvaardt. Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet. Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt. 2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.</p> + +<p>Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld. Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden. Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index. Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index artikel.</a> In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">zie broncode</a>).</p> +</div> + +<h3 id="Fixed_positioning">Fixed positioning</h3> + +<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p> + +<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p> + +<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p> + +<pre>body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p> + +<pre>h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p> + +<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p> + +<pre>p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>You should now see the finished example:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan dit voorbeeld live aan het werk zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">zie broncode</a>).</p> +</div> + +<h3 id="Experimental_position_sticky">Experimental: position sticky</h3> + +<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Ik ben er zeker van dat je plezier had om met de basis positionering te spelen. Het is één van de elementaire tools om complexe layouts te maken met CSS. Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/nl/learn/css/index.html b/files/nl/learn/css/index.html new file mode 100644 index 0000000000..aeb4f56374 --- /dev/null +++ b/files/nl/learn/css/index.html @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the second technology you should start learning after {{glossary("HTML")}}. Whereas HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p> + +<ul> + <li>CSS, starting with the Introduction to CSS module</li> + <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> +</ul> + +<p>We'd recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting with CSS, and you can't really learn CSS without knowing HTML.</p> + +<p>Before starting this topic, you should also have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.) You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> + +<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> + +<dl> + <dt><a href="/nl/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> + <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> + <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> + <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such drop shadows and filters on boxes.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> + <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd> + <dt>Responsive design (TBD)</dt> + <dd>With some many different types of devices able to browser the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different video and images depending on such features.</dd> +</dl> + +<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage: Styling boxes,</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> + <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> +</dl> diff --git a/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html b/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html new file mode 100644 index 0000000000..118139d178 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html @@ -0,0 +1,58 @@ +--- +title: Basissoftware installeren +slug: Learn/Getting_started_with_the_web/Basis_software_installeren +tags: + - Beginner + - Browser + - Gereedschap + - Leren + - Setup + - WebMechanics + - tekstverwerker +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>In <em>Basissoftware installeren</em> gaan we u laten zien welke gereedschappen u nodig hebt om eenvoudige websites te maken en hoe u deze gereedschappen correct kunt installeren.</p> +</div> + +<h2 id="Welke_gereedschappen_gebruiken_de_professionals">Welke gereedschappen gebruiken de professionals?</h2> + +<ul> + <li><strong>Een computer -</strong> Dit klinkt logisch voor de meeste mensen, maar sommige mensen lezen dit artikel op een smartphone of een computer in de bibliotheek. Voor serieuze webontwikkeling is het beter om te investeren in een desktop-computer (Windows, Mac of Linux).</li> + <li><strong>Een broncodeverwerker </strong>(noemen we ook een tekstverwerker)<strong> - </strong>Dit kan een gratis broncodeverwerker zijn (bijvoorbeeld: <a href="http://notepad-plus-plus.org/">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit">gedit</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> of <a href="http://www.barebones.com/products/textwrangler/">Text Wrangler</a>), een commerciële tekstverwerker (<a href="http://www.sublimetext.com/">Sublime Text</a> of <a href="https://panic.com/coda/">Coda</a>) of een hybride tekstverwerker (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>).</li> + <li><strong>Webbrowsers</strong> voor het testen van uw code. De meest gebruikte browsers van dit moment zijn <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, en <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. U moet hierbij ook rekening houden met de prestaties van uw site op mobiele toestellen en oudere browsers waar uw doelpubliek misschien nog gebruik van maakt (zoals IE 6-8.)</li> + <li><strong>Een grafische editor</strong>, zoals <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> of <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> om afbeeldingen te maken voor uw webpagina's.</li> + <li><strong>Een versiebeheersysteem </strong>- Hiermee kunt u uw bestanden beheren, samenwerken met een team, uw code en hulpprogramma's delen en bewerkingsconflicten voorkomen. Momenteel is <a href="http://git-scm.com/">Git</a> het populairste versiebeheersysteem. <a href="https://github.com/">GitHub, </a>de hostingdienst voor code en die is gebaseerd op Git, is ook heel populair.</li> + <li><strong>Een FTP-programma</strong> - Op oudere webhosting accounts wordt het gebruikt om de bestanden op servers te beheren (Hiervoor is <a href="http://git-scm.com/">Git</a> FTP meer en meer aan het vervangen). Het wordt gebruikt om webpagina's te uploaden naar een server. Er zijn veel programma's beschikbaar zoals onder andere <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, en <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Een automatiseringssysteem</strong>, zoals <a href="http://gruntjs.com/">Grunt</a> of <a href="http://gulpjs.com/">Gulp</a>, dat repititieve opdrachten automatisch uitvoert, voor bijvoorbeeld het minimaliseren van code en om code te testen.</li> + <li>Sjablonen, bibliotheken, frameworks, etc., waarmee u allerlei functionaliteit die u vaak gebruikt, veel sneller kunt schrijven.</li> + <li>En nog zoveel meer!</li> +</ul> + +<h2 id="Welke_gereedschappen_heb_ik_nu_nodig">Welke gereedschappen heb ik nu nodig?</h2> + +<p>Het is een akelige lijst, maar gelukkig kunt u al met webontwikkeling beginnen zonder al te veel kennis over dit gereedschap. In dit artikel gaan we de minimale benodigdheden installeren: een tekstverwerker en een paar moderne webbrowsers.</p> + +<h3 id="Een_tekstverwerker_installeren">Een tekstverwerker installeren</h3> + +<p>Waarschijnlijk hebt u al een eenvoudige tekstverwerker op uw computer. Windows bevat standaard <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> en OS X heeft <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux verschilt per distro; <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> wordt standaard met Ubuntu geïnstalleerd.</p> + +<p>Voor webontwikkeling, kunt u wel een beter programma gebruiken dan Notepad of TextEdit. Wij raden beginners <a href="http://brackets.io">Brackets</a> aan, een gratis editor met een live voorbeeldmodus en hints voor de code.</p> + +<h3 id="Moderne_webbrowsers_installeren">Moderne webbrowsers installeren</h3> + +<p>We beginnen met de installatie van een paar webbrowsers op uw desktop waarmee we onze code kunnen uittesten. Kies uw besturingssysteem hieronder en klik op de relevante links om de installatieprogramma's van uw favoriete browsers te downloaden :</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (Als u Windows 8 of hoger gebruikt, kunt u IE 10 of hoger installeren; anders, kunt u het beste een alternatieve browser installeren)</li> + <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari komt standaard met iOS en OS X)</li> +</ul> + +<p>Voor u verder gaat, zou u op zijn minst twee van deze browsers geïnstalleerd moeten hebben om de code mee te testen.</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html b/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html new file mode 100644 index 0000000000..66219f2149 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html @@ -0,0 +1,103 @@ +--- +title: Omgaan met bestanden +slug: Learn/Getting_started_with_the_web/Bestanden_beheren +tags: + - Beginner + - Bestanden + - CodingScripting + - Gids + - HTML + - Theorie + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media- inhoud enzovoort. Als u een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op uw lokale computer. U moet ervoor zorgen dat ze met elkaar kunnen praten en uw volledige inhoud moet er goed uitzien, vooraleer u uw bestanden <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">naar een server uploadt</a>. Omgaan met bestanden bespreekt een aantal problemen waar u zich bewust van zou moeten zijn, zodat u een verstandige mappenstructuur voor uw website kunt opzetten.</p> +</div> + +<h2 id="Waar_moet_uw_website_op_uw_computer_leven">Waar moet uw website op uw computer leven?</h2> + +<p>Als u op uw lokale computer aan uw website werkt, moet u alle gerelateerde bestanden in een enkele map bewaren die de mappenstructuur van de gepuliceerde website op de server spiegelt. Deze map kan eender waar leven, maar u kunt hem het beste ergens plaatsen waar u hem gemakkelijk terugvindt; misschien op uw Bureaublad, in uw Home-map of in het hoofdpad (i.e. the root) van uw harde schijf. </p> + +<ol> + <li>Kies een plaats om uw website-projecten op te slaan. Crëeer hier een nieuwe map die u webprojecten (of iets gelijkaardigs) noemt. Hier zullen al uw webprojecten leven. </li> + <li>In deze eerste map, maakt u een nog een map waarin u uw eerste website opslaat. Noem hem testsite (of kies een naam die meer tot uw verbeelding spreekt).</li> +</ol> + +<h2 id="Over_hoofdletters_en_spaties">Over hoofdletters en spaties </h2> + +<p>U zult merken dat we u in dit artikel zullen vragen om de namen van u bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor: </p> + +<ol> + <li>Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat u een afbeelding op uw website zet met dit pad: <code>testsite/MijnAfbeelding.jpg.</code> In een ander bestand probeert u het beeld op te roepen met<code> testsite/mijnafbeelding.jpg</code>. Tja, dat zal misschien niet werken. </li> + <li>Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als u bijvoorbeeld spaties in uw bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in uw bestandsnamen door "%20" (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al uw hyperlinks breken. Het is beter om woorden van elkaar te scheiden met underscores (i.e. zo'n streepje dat op de regel zelf ligt) of door koppeltekens: <code>my-file.html</code> of <code>my_file.html</code>.</li> +</ol> + +<p>Daarom is het beter om er een gewoonte van te maken uw bestands- en mappennamen altijd met kleine letters en zonder spaties te schrijven, tenminste tot u weet wat u doet. Op die manier zult u minder problemen tegenkomen. </p> + +<h2 id="Wat_voor_een_structuur_moet_uw_website_hebben">Wat voor een structuur moet uw website hebben?</h2> + +<p>Nu gaan we de structuur van onze website bekijken. De meest voorkomende zaken die we op een website tegenkomen, zijn een <code>index.html</code>-bestand en mappen met afbeeldingen, stijlbladen en scriptbestanden erin. Die gaan we nu maken:</p> + +<ol> + <li><code><strong>index.html</strong></code>: Dit betand zal standaard uw startpagina (homepage in het Engels) bevatten, d.w.z de tekst en de afbeeldingen die mensen zien als ze naar uw site surfen. Maak een nieuw bestand met uw broncodeverwerker en noem het <code>index.html</code> . Sla het op in uw <code>test-site</code>-map.</li> + <li><strong><code>Afbeeldingenmap</code></strong>: In deze map zullen alle afbeeldingen zitten die u op uw website gebruikt. Creëer in uw testsite-map een map die afbeeldingen heet. </li> + <li><font face="consolas, Liberation Mono, courier, monospace"><strong>Stijlbladenmap</strong></font>: Deze map zal de CSS-code bevatten die u gebruikt om een stijl aan uw inhoud te geven. (door bijvoorbeeld de kleur van uw tekst en die van de achtergrond te bepalen). In uw testsite-map maakt u een map die stijlen heet.</li> + <li><strong><code>Scriptsmap</code></strong>: Deze map zal alle JavaScriptcode bevatten die wordt gebruikt om interactieve functionaliteit aan uw site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in uw testsite-map een map die scripts heet.</li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Op Windows computers kunt u wat problemen tegenkomen als u de betandsnamen wilt zien, omdat Windows over een hinderlijke optie beschikt die <strong>Verberg Bestandsnaamextensies</strong> heet en die standaard wordt aangezet. Meestal kunt u die uitzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op <strong>OK </strong>klikken. Specifieke informatie die de correcte procedure voor uw Windowsversie behandelt, kunt u met Yahoo! opzoeken. </p> +</div> + +<h2 id="Bestandspaden">Bestandspaden</h2> + +<p>Om bestanden met elkaar te laten praten, moet u paden tussen hen maken — een route zodat elk bestand weet waar de anderen zijn. Om dit te demonstreren, zullen we een beetje HTML in ons <code>index.html</code> bestand plaatsen, zodat het de afbeeldingen toont die u in het vorige artikel (<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Hoe gaat uw website eruitzien?"</a>) hebt gekozen.</p> + +<ol> + <li>Kopiëer de afbeelding die u reeds hebt gekozen in uw afbeeldingenmap. </li> + <li>Open uw <code>index.html</code>-bestand en plaats de volgende code exact zoals die wordt getoond in het bestand. Maakt u zich nu nog geen zorgen over wat het allemaal betekent — we zullen deze structuren later in deze reeks in detail bekijken. + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mijn testpagina</title> + </head> + <body> + <img src="" alt="Mijn testafbeelding"> + </body> +</html> </pre> + </li> + <li>The regel <code><img src="" alt="Mijn testafbeelding"></code> is de HTML-code waarmee een afbeelding in de webpagina wordt ingevoegd. We moeten de HTML vertellen waar de afbeelding is. Het beeld zit in de afbeeldingenmap en die zit in dezelfde map als <code>index.html</code>. Om in de bestandsstructuur van <code>index.html</code> tot aan onze afbeelding af te dalen, hebben we het volgende bestandspad nodig: <code>afbeeldingen/jouw-beeld-bestandsnaam</code>. Onze afbeelding heet bijvoorbeeld <code>firefox-icon.png</code>, dus het bestandspad is <code>afbeeldingen/firefox-icon.png</code>.</li> + <li>Schrijf het bestandspad in uw HTML-code tussen de dubbele aanhalingstekens van de <code>src=""</code> code.</li> + <li>Sla uw HTML-bestand op en laadt het dan in in uw webbrowser (dubbelklik op het bestand). U zou nu uw niewe webpagina moeten zien met uw afbeelding erin!</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Enkele algemene regels voor bestandspaden:</p> + +<ul> + <li>Om een doelbestand te verbinden met het HTML-bestand dat alles activeert en in in dezelfde map zit, gebruikt u gewoon de bestandsnaam, bijvoorbeeld <code>mijn-afbeelding.jpg</code>.</li> + <li>Om een verwijzing te maken naar een bestaand bestand dat in een lagere map steekt, schrijft u de naam van de lagere map voor het pad met een schuine streep die naar voor leunt, bijvoorbeeld submap<code>/mijn-afbeelding.jpg</code>.</li> + <li>Om een verbinding te maken met een doelbestand dat in een map <strong>boven</strong> het activerende HTML-bestand zit, schrijft u twee punten. Dus als index.html bijvooorbeeld in de lagere subfolder van testsite zit en mijn-afbeelding.png zit in testsite, zou u een verwijzing naar mijn-afbeelding.png kunnen maken door <code>../mijn-afbeelding.png te schrijven</code>.</li> + <li>U mag zo veel combinaties maken als u wilt, bijvoorbeeld <code>../subfolder/nog-een-subfolder/mijn-afbeelding.png</code>.</li> +</ul> + +<p>Voorlopig is dat alles wat u moet weten.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld <code>C:\windows</code>. Op zich is dat niet zo erg. Zelfs als u uw website ontwikkelt met Windows, moet u in uw code nog steeds schuine streepjes gebruiken die naar voor leunen.</p> +</div> + +<h2 id="Wat_moet_er_nog_worden_gedaan">Wat moet er nog worden gedaan? </h2> + +<p>Voorlopig is dit ongeveer alles. Uw bestandenstructuur moet er ongeveer zo uitzien:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html new file mode 100644 index 0000000000..8b24396a2f --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html @@ -0,0 +1,278 @@ +--- +title: De basisbegrippen van CSS +slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen +tags: + - Beginner + - CSS + - CodingScripting + - Leren + - Stijlen + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die u gebruikt om uw webpagina van stijlen te voorzien. In <em>De Basisbegrippen van CSS</em> nemen we alles door wat u nodig hebt om te beginnen. We beantwoorden vragen zoals : Hoe maak ik mijn tekst zwart of rood? Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen? Hoe versier ik mijn webpagina met afbeeldingen en kleuren?</p> +</div> + +<h2 id="Dus_wat_is_CSS_eigenlijk">Dus wat is CSS eigenlijk?</h2> + +<p>Zoals HTML is CSS niet echt een programmeertaal. Het is ook geen <em>opmaaktaal.</em> Het is een <em>stijlbladtaal, </em>dat wil zeggen, dat het u toestaat om stijlen op geselecteerde elementen in uw HTML-documenten toe te passen. Om bijvoorbeeld, <strong>alle</strong> paragraaf-elementen in uw HTML-pagina te selecteren en de tekst erin rood te maken, zou u deze CSS schrijven:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in uw broncode-editor. Dan noemt u het bestand <code>stijl.css</code> en slaat u het op in uw <font face="consolas, Liberation Mono, courier, monospace">stijlbladenmap.</font></p> + +<p>Maar we moeten de CSS nog op uw HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop uw browser het HTML-document weergeeft. (Als u niet aan ons project hebt meegedaan, lees dan eerst <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met Bestanden</a> en <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Basisbegrippen HTML</a> zodat u weet wat u eerst moet doen.)</p> + +<ol> + <li>Open uw <code>index.html</code> bestand en plak de volgende lijnen ergens in het hoofd, dat wil zeggen tussen de <code><head></code> en <code></head>-labels</code>: + + <pre class="brush: html"><link href="stijlen/stijl.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>Sla <code>index.html</code> op en laadt het in uw browser. U zou iets moeten zien dat er ongeveer zo uitziet:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png"></p> + +<p>Als de tekst van uw paragraaf nu rood is, kan ik u feliciteren; u hebt nu uw eerste succesvolle CSS geschreven! </p> + +<h3 id="Anatomie_van_een_set_CSS-regels">Anatomie van een set CSS-regels</h3> + +<p>We gaan de CSS hierboven wat grondiger bekijken:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:</p> + +<dl> + <dt>Selector</dt> + <dd>Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verandert u gewoon de selector.</dd> + <dt>Stijldeclaratie (declaration)</dt> + <dd>Een stijldeclaratie is enkele stijlregel, zoals <code>color: red;</code>. De declaratie bepaalt welke <strong>eigenschappen </strong>(properties in het Engels) van het element een stijl zullen krijgen.</dd> + <dt>Eigenschappen (properties)</dt> + <dd>Met eigenschappen kunt u een HTML-elementstijlen (In dit geval is <code>color</code> een eigenschap van de p-elementen). Met CSS kunt u de eigenschappen kiezen die u met uw regel wilt beïnvloeden. </dd> + <dt>Stijlwaarden (property values)</dt> + <dd>Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).</dd> +</dl> + +<p>Dit zijn de andere belangrijke delen van de syntax:</p> + +<ul> + <li>Elke regelset (behalve de selector) moeten worden ingesloten tussen accolades (<code>{}</code>).</li> + <li>Binnen elke stijldeclaratie , moet u een dubbele punt (<code>:</code>) gebruiken om de eigenschap van zijn stijlwaarden te scheiden.</li> + <li>Binnen elke regelset, moet u een puntkomma (<code>;</code>) gebruiken om elke stijldeclaratie van de volgende te scheiden.</li> +</ul> + +<p>Dus om meerdere stijlwaarden tegelijk te gebruiken, moet u ze apart en gescheiden door puntkomma's schrijven zoals hieronder:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Meerdere_elementen_selecteren">Meerdere elementen selecteren</h3> + +<p>U kunt meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 id="Verschillende_selectortypes">Verschillende selectortypes</h3> + +<p>Er zijn vele verschillende selectortypes. Hierboven hebben we enkel <strong>elementselectoren</strong> bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-document selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selectornaam</th> + <th scope="col">Wat het selecteert</th> + <th scope="col">Voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>Elementselector (soms een label of typeselector genoemd)</td> + <td>Alle HTML-elementen van het gekozen type.</td> + <td><code>p</code><br> + selecteert <code><p></code></td> + </tr> + <tr> + <td>ID-selector</td> + <td>Het element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is slechts 'één element per ID toegestaan).</td> + <td><code>#my-id</code><br> + selecteert <code><p id="my-id"></code> of <code><a id="my-id"></code></td> + </tr> + <tr> + <td>Class-selector</td> + <td>Een of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse, maar u moet het Engelse 'class' als selector gebruiken.) (verschillende elementen kunnen dezelfde klasse krijgen ).</td> + <td><code>.my-class</code><br> + selecteert <code><p class="my-class"></code> en <code><a class="my-class"></code></td> + </tr> + <tr> + <td>Attribuut- selector</td> + <td>Een of meerdere elementen op de pagina met het specifieke attribuut. </td> + <td><code>img[src]</code><br> + selecteert <code><img src="myimage.png"></code> maar niet <code><img></code></td> + </tr> + <tr> + <td>Pseudo-class selector</td> + <td>Een of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als u er met uw muis overheen beweegt (dat is "hover" in het Engels). </td> + <td><code>a:hover</code><br> + selecteert <code><a></code>, maar enkel als de muis over de hyperlink heen beweegt.</td> + </tr> + </tbody> +</table> + +<p>Er zijn nog veel meer selectoren om te onderzoeken en u kunt er een gedetailleerde lijst van vinden in onze <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectorengids</a>.</p> + +<h2 id="Lettertypes_en_tekst">Lettertypes en tekst</h2> + +<p>Nu we een inleiding op CSS hebben verwerkt, kunnen we meer stijlregels en informatie aan ons <code>stijl.css</code> bestand toevoegen om ons voorbeeld er mooi uit te laten zien. Eerst gaan we aan onze lettertypes en tekst werken.</p> + +<ol> + <li>Om te beginnen, gaat u terug en vindt u de <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">code van Google Fonts</a> die u ergens veilig hebt opgeslagen. Voeg het <code><link ... >-</code>element in het hoofd van <code>index.html</code> toe (opnieuw, ergens tussen de <code><head></code> en <code></head>-label</code>s). Het zal er ongeveer zo uitzien: + + <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>Dan verwijdert u de regel die in uw stijl.css bestand staat. Die regel was een goede test, maar rode tekst ziet er eigenlijk echt niet goed uit. </li> + <li>Vervang de verwijderde regel door de regels die u hieronder in het voorbeeld ziet, terwijl u de tijdelijke aanduiding door het lettertype (i.e. de '<code>font-family'-</code>regel) vervangt die u uit Google Fonts hebt gehaald. ('<code>font-family'</code> betekent gewoon een of meerdere lettertypes die u voor uw tekst wilt gebruiken). Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina. ( <code><html></code> is het ouderelement van de volledige pagina en alle elementen die erin zitten erven hetzelfde lettertype en dezelfde lettergrootte): + <pre class="brush: css">html { + font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog */ + font-family: tijdelijke aanduiding: dit zou de rest van de stijlregel moeten zijn die u uit Google fonts hebt gehaald +}</pre> + + <div class="note"> + <p><strong>Opmerking</strong>: In het voorbeeld hierboven is er een commentaar toegevoegd dat uitlegt wat "px" betekent. Alles dat in een CSS-document tussen <code>/*</code> en <code>*/</code> staat is een <strong>CSS-commentaar</strong>, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor u waar u nuttige opmerkingen kunt schrijven over de code waar u mee bezig bent.</p> + </div> + </li> + <li>Nu gaan we de lettergroottes instellen voor elementen binnen het HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van het body instellen om die wat leesbaarder te maken: </li> + <li> + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>U kunt deze px-waarden afstemmen tot u het ontwerp hebt dat u wilt, maar in grote lijnen moet het er ongeveer zo uitzien:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Dozen_dozen_het_gaat_allemaal_over_dozen">Dozen, dozen, het gaat allemaal over dozen</h2> + +<p>Er is een ding dat u zult merken als u CSS-code schrijft. Heel vaak gaat die over dozen — hoe u hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld.</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Het is dan ook geen verrassing dat CSS-opmaak hoofdzakelijk op het <em>doos-model </em>is gebaseerd.<em> </em>Elk van de blokken, die plaats innemen op uw pagina, heeft eigenschappen zoals die hieronder:</p> + +<ul> + <li><code>padding</code>, (vulling, wattering) de ruimte die juist rond de inhoud zit (bijvoorbeeld rond de tekst van een paragraaf)</li> + <li><code>border</code>, (boord) de volle lijn die zich rond de padding bevindt </li> + <li><code>margin</code>, (marge) de ruimte die rond de buitenkant van het element zit (dus ook rond de border)</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>In dit gedeelte gebruiken we ook:</p> + +<ul> + <li><code>width</code> (breedte) van een element</li> + <li><code>background-color</code>, (achtergrondkleur) de kleur die achter de inhoud en padding van een element zit</li> + <li><code>color</code>, (kleur) de kleur van de inhoud van een element (meestal de tekst) </li> + <li><code>text-shadow</code>: (tekstschaduw) stelt een slagschaduw in op de tekst in een element</li> + <li><code>display</code>: (weergave) stelt de weergavemodus van een element in (maakt u zich hier nog geen zorgen over) </li> +</ul> + +<p>We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan uw pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren. </p> + +<h3 id="De_kleur_van_de_pagina_veranderen">De kleur van de pagina veranderen</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>Deze regel stelt de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in eender welke kleur <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">die u kiest als u het ontwerp van uw site plant</a>.</p> + +<h3 id="Uitzoeken_hoe_de_body_in_elkaar_steekt">Uitzoeken hoe de body in elkaar steekt</h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>En dan nu het <code>body-</code>element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen:</p> + +<ul> + <li><code>width: (breedte) 600px;</code> — Dit dwingt de body om altijd 600 pixels breed te zijn.</li> + <li><code>margin: (marge) 0 auto;</code> — Als u deze twee waarden op een eigenschap zoals <code>margin</code> of <code>padding</code>, instelt, zal de eerste waarde (in dit geval <code>0</code>) de bovenkant en onderkant van het element bepalen en de tweede waarde (auto) de linker- en rechterkant van het element. (Hier is auto een speciale waarde die de beschikbare horizontale ruimte gelijk in een linkse en rechtse helft verdeelt). U kunt ook één, drie of vier waarden invullen, zoals <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">hier</a> verder wordt uitgelegd. </li> + <li><code>background-color: #FF9500;</code> — Zoals reeds vermeld, stelt dit de achtergrondkleur van het element in. Er is een soort van roodachtig oranje voor de body gebruikt in tegenstelling tot donkerblauw voor het <code>html-</code>element. Gaat uw gang en experimenteer. Gebruik wit of eender welke kleur die u bevalt. </li> + <li><code>padding: (vulling) 0 20px 20px 20px;</code> — We hebben deze vier waarden op de padding ingesteld om een beetje ruimte rond onze inhoud te maken. Deze keer stellen we geen padding in op de bovenkant van de body en 20 pixels op de linker-, onder- en rechterkant. De waarden stellen boven-., rechter-, onder-, en linkerkant in, in die volgorde.</li> + <li><code>border: (boord) 5px solid black;</code> — dit stelt een volle zwarte boord in die 5px breed is rond alle zijden van de body .</li> +</ul> + +<h3 id="Onze_hoofdtitel_positioneren_en_stijlen">Onze hoofdtitel positioneren en stijlen</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>Het is u misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt, omdat browsers een <strong>default styling</strong> (een standaardstijl) op het {{htmlelement("h1")}}- element toepassen (en ook op andere), zelfs als u geen enkele CSS hebt ingesteld! Dat klinkt misschien als een slecht idee, maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de marge op <code>0</code> te zetten: <code>margin: 0;</code>.</p> + +<p>We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de html.</p> + +<p>We hebben hier een interessante eigenschap gebruikt: <code>text-shadow</code>, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:</p> + +<ul> + <li>De eerste pixelwaarde stelt de <strong>horizontale offset</strong> van de tekstschaduw in — hoe ver die van de letter weg beweegt: een negatieve waarde zou hem naar links moeten schuiven.</li> + <li>De tweede pixelwaarde stelt de <strong>verticale offset</strong> van de slagschaduw van de tekst in — hoe ver hij naar beneden beweegt, in dit voorbeeld zou een negatieve waarde de tekstschaduw naar boven moeten duwen.</li> + <li>De derde pixelwaarde stelt de <strong>troebelewaarde voor de omtrek </strong>(in het Engels blur radius) van de tekstschaduw in — een grotere waarde creëert een vagere schaduw.</li> + <li>De vierde waarden bepalen de basiskleur van de schaduw.</li> +</ul> + +<p>Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat u zoal kunt bedenken.</p> + +<h3 id="Het_beeld_centreren">Het beeld centreren</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de <code>margin: 0 auto</code> truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op <strong>block niveau</strong>, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen). Afbeeldingen, daarentegen, zijn <strong>inline</strong> elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met <code>display: block;</code>.(display is weergave in het Nederlands)</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Maakt u zich geen zorgen als u <code>display: block;</code> en het block/inline verschil nog niet begrijpt. Dat komt als u CSS grondiger bestudeert. U kunt meer over de verschillende display-waarden ontdekken op onze <a href="/en-US/docs/Web/CSS/display">display referentiepagina</a>.</p> +</div> + +<h2 id="Conclusie">Conclusie</h2> + +<p>Als u alle instructies in dit artikel hebt gevolgd, zou u een pagina moeten hebben gemaakt die er ongeveer zo uitziet (U kan ook <a href="http://mdn.github.io/beginner-html-site-styled/">onze versie hier bekijken</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>Als u vast komt te zitten, kunt u uw werk altijd vergelijken met onze <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">voltooide voorbeeldcode op Github</a>.</p> + +<p>Hier hebben we u niet meer dan de eerste stappen op het CSS-pad laten zetten. Ga naar onze <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a> om meer te ontdekken.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html b/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html new file mode 100644 index 0000000000..9c16e8b1a9 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html @@ -0,0 +1,102 @@ +--- +title: Hoe gaat uw website eruitzien? +slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien +tags: + - Beginner + - Benodigdheden + - Design + - Inhoud + - Leren + - Lettertypes + - Ontwerpen + - Plannen +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Hoe gaat uw website eruitzien?</em> beschrijft een eenvoudige methode die u kunt volgen om de inhoud en het ontwerp van uw website te plannen voordat u code begint te schrijven, en geeft antwoorden op vragen als ‘Welke informatie ga ik aanbieden?’, ‘Welke lettertypen en kleuren wil ik gebruiken?’ en ‘Wat is het doel van mijn website?’</p> +</div> + +<h2 id="Beginnen_bij_het_begin_planning">Beginnen bij het begin: planning</h2> + +<p>Voordat u begint, hebt u een paar ideeën nodig. Wat gaat uw website bieden? Een website kan zo goed als alles doen, maar met uw eerste probeersel kunt u het beter simpel houden. We beginnen met een eenvoudige webpagina die een hoofdkop, een afbeelding en een paar alinea’s bevat.</p> + +<p>Om te beginnen, hebt u een antwoord op deze vragen nodig:</p> + +<ol> + <li><strong>Waar gaat uw website over? </strong>Houdt u van honden, New York of Pacman?</li> + <li><strong>Welke informatie wilt u over het onderwerp aanbieden? </strong>Schrijf een titel, een paar alinea’s en denk na over een afbeelding die u op uw pagina wilt tonen.</li> + <li><strong>Hoe gaat uw website eruitzien? </strong>Gebruik eenvoudige termen. Welke achtergrondkleur kiest u? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?</li> +</ol> + +<div class="note"> +<p><strong>Noot</strong>: complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypen, spaties tussen items op de pagina, aangewezen schrijfstijl, enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. U kunt een voorbeeld bekijken op <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> +</div> + +<h2 id="Uw_ontwerp_schetsen">Uw ontwerp schetsen</h2> + +<p>Vervolgens neemt u pen en papier en maakt u een ruwe schets van uw webpagina. Voor uw eerste pagina is er nog niet veel dat u op papier kunt zetten, maar u zou er nu al een gewoonte van moeten maken. Het helpt echt en u hoeft geen Van Gogh te zijn!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Noot</strong>: zelfs op echte, complexe websites begint het ontwerpteam meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (modellen) met een grafische editor of een andere webtechnologie.</p> + +<p>Een grafisch ontwerper en een {{Glossary("UX", "user-experience")}} (UX)-designer zijn vaak leden van een webteam. Grafische ontwerpers ontwikkelen de visuele aspecten van een website. UX-ontwerpers spelen een eerder abstracte rol. Zij zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.</p> +</div> + +<h2 id="Uw_hulpprogramma’s_kiezen">Uw hulpprogramma’s kiezen</h2> + +<p>Nu bent u zo ver om de inhoud samen te stellen die uiteindelijk op uw webpagina terecht zal komen.</p> + +<h3 id="Tekst">Tekst</h3> + +<p>U zou nog steeds de alinea’s en de titel van uw ontwerp van eerder moeten hebben. Houd die paraat.</p> + +<h3 id="Themakleur">Themakleur</h3> + +<p>Ga naar de <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Colors/Color_picker_tool">Kleurenkiezer</a> om een kleur te kiezen. Zoek er een uit die u bevalt. Als u op een kleur klikt, zult u een vreemde code zien die uit zes tekens bestaat, zoals bijvoorbeeld <code>#660066</code>. Die tekens vormen een <em>hex(adecimale)-code</em>, en vertegenwoordigen uw kleur. Kopieer de code in een document dat u ergens veilig bijhoudt.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Afbeeldingen">Afbeeldingen</h3> + +<p>Om een afbeelding te kiezen, gaat u naar <a href="https://www.google.com/imghp?hl=nl&gws_rd=ssl">Google Afbeeldingen</a> en zoekt u naar iets geschikts.</p> + +<ol> + <li>Als u een afbeelding hebt gevonden die u bevalt, klikt u op de afbeelding.</li> + <li>Druk op de knop <em>Afbeeldingen bekijken</em>.</li> + <li>Op de volgende pagina klikt u met de rechtermuisknop op de afbeelding (Ctrl + klik op een Mac), kies daarna <em>Afbeelding opslaan als…</em> en kies een veilige plek om de afbeelding op te slaan. Als alternatief voor deze methode kunt u ook het webadres van uw afbeelding opslaan voor later gebruik (het webadres vindt u in de adresbalk van uw browser).</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p><strong>Noot</strong>: de meeste afbeeldingen op het web, dus ook die van Google Afbeeldingen, zijn auteursrechtelijk beschermd. Om de kans op het schenden van dat auteursrecht te verkleinen, kunt u Google’s licentiefilter gebruiken. Klik hiervoor op 1) <strong>Tools </strong> en dan op 2) <strong>Gebruiksrechten</strong>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 id="Lettertypen">Lettertypen</h3> + +<p>Om een lettertype te kiezen:</p> + +<ol> + <li>Ga naar <a href="http://www.google.com/fonts">Google Fonts</a> en scroll omlaag totdat u een lettertype in de lijst vindt dat u wilt gebruiken. U kunt ook het bedieningspaneel aan de rechterkant gebruiken om uw resultaten verder te filteren.</li> + <li>Klik op het ‘plus’-pictogram (Toevoegen aan) naast het lettertype van uw keuze.</li> + <li>Klik op de knop ‘* Family Selected’<em> </em> in het paneel aan de onderkant van de pagina (‘*’ is afhankelijk van het aantal lettertypen dat u hebt geselecteerd).</li> + <li>In het pop-upscherm kunt u de regels met code zien die Google aan u doorgeeft. Die regels kopieert u in een teksteditor en slaat u op voor later gebruik.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html b/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html new file mode 100644 index 0000000000..763655de10 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html @@ -0,0 +1,98 @@ +--- +title: Hoe werkt het web? +slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Leren + - Server + - TCP + - infrastructuur +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Hoe werkt het web</em> biedt een vereenvoudigde kijk op wat er gebeurt als u een webpagina in uw browser op uw computer of telefoon bekijkt.</p> +</div> + +<p>Op korte termijn is deze theorie niet van essentieel belang, maar als u webcode wilt schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor u echt van die kennis begint te profiteren.</p> + +<h2 id="Clienten_en_servers">Clienten en servers</h2> + +<p>Computers die met het web verbonden zijn, noemen we <strong>clienten e</strong>n <strong>servers</strong>. Zo ziet een eenvoudig diagram van de interactie tussen hen beide er uit:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul> + <li>Clienten zijn de typische toestellen van een webgebruiker die met het internet verbonden zijn (uw computer is bijvoorbeeld verbonden met uw Wi-Fi, of uw telefoon met uw mobiele netwerk). De term slaat ook op de software die deze apparaten gebruiken om zich met het web te verbinden (meestal een webbrowser zoals Firefox of Chrome).</li> + <li>Servers zijn computers waarop zich webpaginas, sites of apps bevinden. Als een client een webpagina wil openen (dat is het verzoek of <em>request </em>in het Engels), wordt een kopie van de webpagina van de webserver naar de client gedownload en vervolgens weergegeven in de browser van de gebruiker (dat is het antwoord of de <em>response</em>). </li> +</ul> + +<h2 id="De_andere_instrumenten_in_de_gereedschapskist">De andere instrumenten in de gereedschapskist</h2> + +<p>De client en de server die we hierboven hebben beschreven, vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.</p> + +<p>Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als uw huis. Aan de andere kant is de server en die is een winkel waar u iets wilt kopen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p> Behalve de client en de server moeten we ook hallo zeggen tegen: </p> + +<ul> + <li><strong>Uw internetverbinding</strong>: Die laat u data versturen en ontvangen op het web. U kunt zich die voorstellen als de straat tussen uw huis en de winkel. </li> + <li><strong>TCP/IP</strong>: Transmission Control Protocol and Internet Protocol zijn communicatieprotocollen die bepalen hoe data door het web moet reizen. Ze zijn als de transportmechanismen die u een bestelling laten plaatsen, u naar de winkel laten gaan en inkopen doen. In ons voorbeeld zijn ze als een auto of een fiets of elk ander vervoermiddel dat u van A naar B helpt.</li> + <li><strong>DNS</strong>: Domain Name Servers zijn de adresboeken van websites. Als u een webadres in uw browser typt, kijkt de browser eerst in de DNS voor hij de website kan ophalen. De browser moet er eerst achterkomen op welke server de website bestaat, zodat hij HTTP-berichten naar de juiste plaats kan versturen (zie hieronder). Het is alsof hij het adres van de winkel opzoekt, zodat u ernaar toe kunt gaan. </li> + <li><strong>HTTP</strong>: Hypertext Transfer Protocol is een applicatie{{Glossary("Protocol" , "protocol")}} dat een taal voor clienten en servers definiëert, zodat ze met elkaar kunnen praten. U kunt dit vergelijken met de taal die u gebruikt om uw artikelen te bestellen.</li> + <li><strong>Component files</strong>: (componentbestanden) Een website bestaat uit veel verschillende bestanden, die lijken op de artikelen die u in de winkel koopt. Deze bestanden bestaan voornamelijk uit deze twee types: + <ul> + <li><strong>Codebestanden</strong>: Websites worden voornamelijk met HTML, CSS en JavaScript gebouwd, hoewel u later nog andere technologieën zult tegenkomen.</li> + <li><strong>Assets</strong>: (middelen) Dit is een verzamelnaam voor alle andere onderdelen die samen een website maken. Het zijn afbeeldingen, muziek, video, Worddocumenten en PDF's.</li> + </ul> + </li> +</ul> + +<h2 id="Wat_er_gebeurt_er_nu_precies">Wat er gebeurt er nu precies?</h2> + +<p>Stel dat u een webadres in uw browser typt (analoog met: stel dat u naar de winkel gaat), wat gebeurt er dan?</p> + +<ol> + <li>De browser gaat naar de DNS-server en vindt het echte adres van de server waarop de website staat (u vindt het adres van de winkel).</li> + <li>De browser verzendt een bericht met HTTP-verzoek erin naar de server en vraagt die een kopie van de website naar de client te sturen (u gaat naar de winkel en u bestelt uw artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs uw internetverbinding met TCP/IP verstuurd.</li> + <li>Als de server het verzoek van de client goedkeurt, stuurt de server een boodschap met daarin "200 OK". Dit betekent zoiets als: "maar natuurlijk kunt u die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (<em>chunks </em>in het Engels) worden verdeeld (de winkel geeft u uw artikelen en u neemt ze mee naar huis). Die brokken noemen we <em>data packets</em> (datapakketjes).</li> + <li>De browser stelt de kleine brokken samen tot een volledige website en toont die aan u (de goederen arriveren aan uw deur — nieuw blinkend materiaal, geweldig!).</li> +</ol> + +<h2 id="DNS_uitgelegd">DNS uitgelegd</h2> + +<p>Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die u in uw adresbalk typt om uw favoriete websites te vinden. Een webadres is een serie getallen zoals deze: <code>63.245.215.20</code>.</p> + +<p>Zo'n getallenreeks noemen we een {{Glossary("IP Address", "IP-adres")}} en het staat voor een unieke locatie op het web. Het is echter niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat u in de adresbalk van uw browser typt (zoals "mozilla.org") aan het echte (IP-)adres van de website vastkoppelen.</p> + +<p>Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door <code>63.245.215.20</code> in de adresbalk van een nieuwe tabpagina in uw browser te typen.</p> + +<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h2 id="Paketten_uitgelegd">Paketten uitgelegd</h2> + +<p>Eerder hebben we de term "pakketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client wordt verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web wordt verstuurd, als duizenden kleine brokken worden verzonden, zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">Hoe werkt het internet?</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> +</ul> + +<h2 id="Illustratie">Illustratie</h2> + +<p>Straatfoto: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, door <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html new file mode 100644 index 0000000000..e454602471 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html @@ -0,0 +1,218 @@ +--- +title: De basisbegrippen van HTML +slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen +tags: + - Beginner + - CodingScripting + - HTML + - Leren + - Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Bestanden_beheren", "Learn/Getting_started_with_the_web/CSS_basisbegrippen", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (<strong>H</strong>ypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel u de basisbegrippen van HTML uitleggen en wat zijn functie is.</p> +</div> + +<h2 id="Dus_wat_is_HTML_nu_eigenlijk">Dus wat is HTML nu eigenlijk?</h2> + +<p>HTML is geen programmeertaal; het is <em>een opmaaktaal </em>en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie <strong>{{Glossary("element", "elementen")}} </strong>die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De tags (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:</p> + +<pre>Mijn kat is heel chagrijnig</pre> + +<p>Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met ({{htmlelement("p")}}) paragraaflabels te omhullen:</p> + +<pre class="brush: html"><p>Mijn kat is heel chagrijnig</p></pre> + +<h3 id="Anatomie_van_een_HTML-element">Anatomie van een HTML-element</h3> + +<p>We gaan dit paragraafelement wat verder onderzoeken.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>De belangrijkste onderdelen van ons element zijn:</p> + +<ol> + <li><strong>De opening-tag:</strong> (het openingslabel) Deze bestaat uit de naam van het element (in dit geval p), ingesloten door kleiner- en groter-dan-tekens. <elementnaam> toont ons waar het element begint. Hier begint ook de invloed die het op de regel uitoefent en in dit geval duidt het het begin van de paragraaf aan.</li> + <li><strong>De closing-tag: </strong> (het eindlabel) Die is identiek aan de opening-tag, behalve dat er ook nog een schuine streep voor de naam van het element staat. De schuine streep leunt naar voor en staat net achter <. Het eindlabel duidt het einde van het element aan, in dit geval dus het einde van de paragraaf. Beginners vergeten de eindmarkeerder nogal eens en dat kan tot vreemde resultaten leiden.</li> + <li><strong>De inhoud:</strong> Dit is de inhoud van het element, in dit geval gewoon een regel tekst. </li> + <li><strong>Het element:</strong> De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.</li> +</ol> + +<p>Elementen kunnen ook attributen krijgen die er zo uitzien:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Attributen bevatten extra informatie over het element die u niet in de inhoud wilt zien zitten. Hier is <code>class</code> the <em>naam</em> van het attribuut en <code>editor-note</code> is de <em>waarde </em>van het attribuut. Met het <code>class</code>-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.</p> + +<p>Een attribuut krijgt altijd de volgende kenmerken:</p> + +<ol> + <li>Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).</li> + <li>De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).</li> + <li>De waarde van het attribuut staat tussen aanhalingstekens. </li> +</ol> + +<h3 id="Geneste_Elementen">Geneste Elementen</h3> + +<p>U kunt elementen in andere elementen steken - we noemen dit <strong>nesten</strong>. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:</p> + +<pre class="brush: html"><p>Mijn kat is <strong>heel</strong> chagrijnig.</p></pre> + +<p>U moet er echter wel voor zorgen dat uw elementen correct worden genest: in het voorbeeld hierboven openden we het <p> element eerst en dan het <strong> element. Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:</p> + +<pre class="example-bad brush: html"><p>Mijn kat is <strong>heel chagrijnig.</p></strong></pre> + +<p>De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat u wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!</p> + +<h3 id="Lege_elementen">Lege elementen</h3> + +<p>Sommige elementen hebben geen inhoud en worden <strong>lege elementen</strong> genoemd. Het {{htmlelement("img")}}-element bijvoorbeeld, die al in onze HTML zit, is zo'n leeg element:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Dit element bevat twee attributen, maar er is geen <code></img></code> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het < /img>-element. </p> + +<h3 id="Anatomie_van_een_HTML-document">Anatomie van een HTML-document</h3> + +<p>Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons <code>index.html-</code>voorbeeld hebben gestoken (we hebben die voor het eerst gebruikt in <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met Bestanden</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mijn testpagina</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="Mijn testafbeelding"> + </body> +</html></pre> + +<p>Wat zit er in die pagina ?</p> + +<ul> + <li><code><!DOCTYPE html></code> — Het doctype. Lang geleden was HTML jong (rond 1991/2). Doctypes moesten toen als links naar een serie regels dienen. De HTML-pagina moest die regels volgen om als goede HTML te kunnen worden beschouwd. Dat kon automatische foutcontrole zijn en andere nuttige zaken. Maar tegenwoordig trekt niemand zich nog iets van die regels aan. Ze zijn enkel nog een historisch artefact dat erin moet staan opdat alles correct zou werken. Voorlopig is dat alles dat u moet weten.</li> + <li><code><html></html></code> — Het <code><html></code>-element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).</li> + <li><code><head></head></code> — Het <code><head></code>-element gedraagt zich als een container voor alle zaken die u in uw HTML-pagina wilt steken, maar die niet tot de inhoud behoren die u aan de gebruikers wilt tonen als die uw pagina lezen. Dit houdt zaken in zoals {{Glossary("sleutelwoord", "sleutelwoorden")}}, een beschrijving van uw pagina zoals u die in zoekresultaten wilt zien verschijnen, CSS om uw inhoud van stijlen te voorzien, tekensetverklaringen en meer.</li> + <li><code><body></body></code> — Het<code><body></code>-element bevat de volledige inhoud die u aan webgebruikers wilt tonen als die uw pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (i.e. audio tracks) of wat dan ook.</li> + <li><code><meta charset="utf-8"></code> — Met dit element bepaalt u dat de tekenset voor uw document utf-8 zal zijn. In utf-8 steken bijna alle tekens die voor alle gekende menselijke talen worden gebruikt. In wezen houdt dit in dat het nu elke tekstinhoud aankan, die u erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan u helpen om later problemen te vermijden. </li> + <li><code><title></title></code> — Dit element stelt de titel van uw pagina in. Dat is de titel die in het browsertabblad verschijnt waarin uw pagina wordt geladen en die wordt gebruikt om de pagina te beschrijven als u hem als bladwijzer/favoriet instelt.</li> +</ul> + +<h2 id="Afbeeldingen">Afbeeldingen</h2> + +<p>Nu willen we onze aandacht op het afbeeldingselement vestigen:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het <code>src-attribuut</code> (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.</p> + +<p>We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :</p> + +<ol> + <li>Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest. </li> + <li>Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt. De tekst van ons voorbeeld hierboven "Mijn testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn: "Het Firefox logo: een brandende vos die de aarde omringt."</p> + +<p><strong>Probeer nu een betere alt-tekst te bedenken voor uw afbeelding.</strong></p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Ontdek meer over toegankelijkheid op <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> +</div> + +<h2 id="Tekst_Opmaken">Tekst Opmaken</h2> + +<p>In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken.</p> + +<h3 id="Hoofdingen">Hoofdingen</h3> + +<p>Met hoofdingen of kopelementen kunt u bepaalde delen van uw inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen {{htmlelement("h1")}}–{{htmlelement("h6")}} hoewel u er meestal slechts drie of vier zult gebruiken.</p> + +<pre class="brush: html"><h1>De titel van mijn artikel</h1> +<h2>De titel van een hoofdstuk in mijn artikel</h2> +<h3>Mijn ondertitel</h3> +<h4>De ondertitel die onder mijn ondertitel staat</h4></pre> + +<p>Probeer nu een geschikte titel aan uw HTML-pagina toe te voegen en plaats hem net boven uw {{htmlelement("img")}}-element.</p> + +<h3 id="Paragrafen">Paragrafen</h3> + +<p>Zoals hierboven is uitgelegd dienen {{htmlelement("p")}}-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:</p> + +<pre class="brush: html"><p>Dit is een enkele paragraaf.</p></pre> + +<p><strong>Voeg uw voorbeeldtekst toe (die zou u al moeten opgesteld hebben in <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Hoe gaat uw website eruitzien?</em></a>) in een paar paragrafen die u direct onder uw <img>-element plaatst.</strong></p> + +<h3 id="Lijsten">Lijsten</h3> + +<p>Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:</p> + +<ol> + <li><strong>Ongeordende lijsten</strong> zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een {{htmlelement("ul")}}-element.</li> + <li><strong>Geordende lijsten</strong> zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een {{htmlelement("ol")}}-element.</li> +</ol> + +<p>Elk artikel of onderwerp in de lijsten wordt ingebed in een {{htmlelement("li")}}-element.</p> + +<p>Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,</p> + +<pre class="brush: html"><p>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p></pre> + +<p>zouden we de opmaak op deze manier kunnen veranderen:</p> + +<pre class="brush: html"><p>Bij Mozilla, zijn we een globale gemeenschap van</p> + +<ul> + <li>technici</li> + <li>denkers</li> + <li>bouwers</li> +</ul> + +<p>die met elkaar samenwerken ... </p></pre> + +<p><strong>Voeg een ongeordende en een geordende lijst toe aan uw voorbeeldpagina.</strong></p> + +<h2 id="Hyperlinks">Hyperlinks</h2> + +<p>Hyperlinks zijn zeer belangrijk — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken — {{htmlelement("a")}} — de <em>a</em> staat voor "anker". Om een stuk tekst van uw paragraaf in een link te veranderen, volgt u deze stappen :</p> + +<ol> + <li>Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".</li> + <li>Sluit de tekst in een <a>-element in, zoals dit: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li>Geef het <a>-element een attribuut en doe dat op deze manier: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:</li> + <li> + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>U zou onverwachte resultaten kunnen krijgen als u <code>https://</code> of <code>http://</code> zou weglaten. Dit deel noemen we het <em>protocol </em>en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.</p> + +<div class="note"> +<p>Op het eerste zicht ziet <code>href</code> er misschien als een nogal obscure naam voor een attribuut uit. Als u moeite hebt om u zich de naam te herinneren, denk er dan aan dat href een afkorting is voor <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>(hypertekst verwijzing in het Nederlands).</p> +</div> + +<p><strong>Voeg een link aan uw pagina toe, als u dat nog niet hebt gedaan.</strong></p> + +<h2 id="Conclusie">Conclusie</h2> + +<p>Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (<a href="http://mdn.github.io/beginner-html-site/">u kunt die ook hier zien</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Als u vast komt te zitten, kunt u uw werk nog altijd met ons <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">voltooide voorbeeld</a> vergelijken op Github.</p> + +<p>Eigenlijk hebben we hier enkel een fractie van de mogelijkheden gezien die HTML biedt. Om meer te ontdekken, gaat u naar <a href="/en-US/Learn/HTML">HTML-Structuring the Web</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/index.html b/files/nl/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..16a3d8e05a --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/index.html @@ -0,0 +1,61 @@ +--- +title: Van start met het web +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Index + - publishing + - theory +translation_of: Learn/Getting_started_with_the_web +--- +<p>{{LearnSidebar}}</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> + +<div class="summary"> +<p><em>Van start met het Web</em> is een beknopte reeks die u laat kennismaken met de praktische aspecten van webontwikkeling. U zult de hulpmiddelen opzetten die u nodig hebt om een eenvoudige webpagina te maken en uw eigen eenvoudige code te publiceren.</p> +</div> + +<h2 id="Het_verhaal_van_uw_eerste_website">Het verhaal van uw eerste website</h2> + +<p>Er steekt veel werk in een professionele website, dus als u nog niet veel over webontwikkeling weet, adviseren we u om klein te beginnen. U zult niet onmiddellijk een nieuwe Facebook maken, maar het is niet moeilijk om uw eigen eenvoudige website online te krijgen, dus zullen we daarmee beginnen.</p> + +<p>Als u de artikelen hieronder volledig doorwerkt, zult u van nul kennis kunnen doorgroeien tot u uw eerste webpagina online hebt gezet. Laten we beginnen!</p> + +<h3 id="Basissoftware_installeren"><a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a></h3> + +<p>Op het vlak van hulpmiddelen is er voor de bouw van een website veel keuze. Als u net start, zou u in de war kunnen raken door de vele code-editors, frameworks en testsoftware die er bestaan. In <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a> tonen we u stap voor stap hoe u enkel die software installeert die u nodig hebt om te starten met webontwikkeling.</p> + +<h3 id="Hoe_gaat_uw_website_eruitzien"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Hoe gaat uw website eruitzien?</a></h3> + +<p>Voor u de code voor uw website begint te schrijven, moet u eerst plannen. Welke informatie gaat u tonen? Welke lettertypes en kleuren gaat u gebruiken? In <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Hoe gaat uw website eruitzien?</a> geven we u een eenvoudige methode die u kunt volgen om de inhoud en het design van uw website te plannen.</p> + +<h3 id="Omgaan_met_bestanden"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a></h3> + +<p>Een website bestaat uit veel bestanden: tekstinhoud, code, stijlbestanden, media-inhoud enzovoort. Wanneer u een website bouwt, moet u deze bestanden samenvoegen in een doordachte structuur en ervoor zorgen dat ze met elkaar kunnen communiceren. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a> legt uit hoe u een doordachte bestandsstructuur maakt voor uw website en van welke problemen u zich bewust moet zijn.</p> + +<h3 id="De_basisbegrippen_van_HTML"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">De basisbegrippen van HTML</a></h3> + +<p>Hypertext Markup Language (HTML) (Nederlands: <em>opmaaktaal voor </em><em>gelinkte tekst</em>) is de code die u gebruikt om uw webinhoud te structureren en er een betekenis en doel aan te geven. Bijvoorbeeld: bestaat de inhoud uit een aantal paragrafen of een lijst met een aantal punten? Staan er afbeeldingen op mijn pagina? Heb ik een datatabel? Zonder u te overdonderen geeft <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">De basisbegrippen van HTML</a> u genoeg informatie om u vertrouwd te maken met HTML.</p> + +<h3 id="De_basisbegrippen_van_CSS"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">De basisbegrippen van CSS</a></h3> + +<p>Cascading Stylesheets (CSS) (Nederlands: <em>waterval-stijlbestanden</em>) is de code waarmee u beslist hoe uw website eruit zal zien. Wil u bijvoorbeeld rode of zwarte tekst? Waar op het scherm moet de inhoud staan? Welke achtergrondafbeeldingen en kleuren moeten worden gebruikt om uw website te verfraaien? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">De basisbegrippen van CSS</a> geeft u de informatie om van start te gaan.</p> + +<h3 id="De_basisbegrippen_van_JavaScript"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">De basisbegrippen van JavaScript</a></h3> + +<p>JavaScript is de programmeertaal die u gebruikt om interactieve functionaliteit aan uw website toe te voegen zoals games, dingen die gebeuren wanneer knoppen worden ingedrukt, data die wordt ingevuld in formulieren, dynamische stijleffecten, animaties en nog veel meer. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">De basisbegrippen van JavaScript</a> geeft u een idee van wat mogelijk is met deze interessante taal en hoe u ermee start.</p> + +<h3 id="Uw_website_publiceren"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Uw website publiceren</a></h3> + +<p>Eens u klaar bent met uw code en de organisatie van de bestanden waaruit uw website bestaat, moet u alles online zetten zodat mensen de website kunnen vinden. <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Uw website publiceren</a> beschrijft hoe u uw voorbeeldcode online krijgt met een minimale inspanning.</p> + +<h3 id="Hoe_werkt_het_web"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Hoe werkt het web?</a></h3> + +<p>Wanneer u uw favoriete website bezoekt, gebeuren er heel wat ingewikkelde dingen in de achtergrond waar u misschien nog niets over weet. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Hoe werkt het web? </a> behandelt in grote lijnen wat er gebeurt als u een webpagina bekijkt op uw computer.</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html b/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..8c3217c0fb --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,398 @@ +--- +title: De basisbegrippen van Javascript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Beginner + - CodingScripting + - JavaScript + - Leren + - Web +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> + +<div class="summary"> +<p>Javascript is een programmeertaal die interactiviteit aan uw website toevoegt (bijvoorbeeld: spelletjes, een actie die in gang wordt gezet als u op een knop drukt, data die via formulieren wordt verwerkt, dynamisch toegepaste stijlen, animaties). Dit artikel helpt u om met deze taal te beginnen en geeft u een idee van wat de mogelijkheden zijn.</p> +</div> + +<h2 id="Wat_is_JavaScript_eigenlijk_echt">Wat is JavaScript eigenlijk echt?</h2> + +<p>{{Glossary("JavaScript")}} ("JS" afgekort) is een volwaardige dynamische programmeertaal die u kunt toepassen op een {{Glossary("HTML")}} document om interactie mogelijk te maken. Het is bedacht door Brendan Eich, mede-oprichter van het Mozilla project, de Mozilla foundation, en de Mozilla corporation.</p> + +<p>U kunt zo'n beetje alles met JavaScript. U zult beginnen met simpele toevoegingen zoals carrousels, plaatjescollecties, veranderende layouts, en reacties als er op een knop wordt gedrukt. Als u wat meer ervaring met de taal hebt opgedaan, zult u in staat zijn spelletjes te maken, geanimeerde 2d- en 3d-afbeeldingen, volledige database gestuurde apps en nog veel meer!</p> + +<p>JavaScript zelf is vrij compact, maar erg flexibel. Ontwikkelaars hebben veel hulpmiddelen geschreven bovenop de bestaande kern, waardoor een enorme hoeveelheid extra functionaliteit mogelijk is met relatief weinig moeite. Om er een paar te noemen:</p> + +<ul> + <li>Application Programming Interfaces ({{Glossary("API","APIs")}}) die in webbrowsers ingebouwd zijn. Ze kunnen webpagina's maken, CSS-stijlen genereren, een videostream van de gebruikers' webcam onderscheppen en manipuleren of audio samples en 3d-afbeeldingen creëren.</li> + <li> APIs van derden die het ontwikkelaars mogelijk maken om de functionaliteit van bijv. Facebook of Twitter toe te voegen.</li> + <li> Frameworks (kader of structuur in het Nederlands) en bibliotheken die u op uw HTML kunt toepassen om snel sites en applicaties op te zetten.</li> +</ul> + +<h2 id="Een_hallo_wereld-voorbeeld">Een "hallo wereld"-voorbeeld</h2> + +<p>De mogelijkheden hierboven klinken echt opwindend en dat is het ook - JavaScript is een van de meest levendige webtechnologieën van het moment. Zodra u er wat beter in wordt, zullen uw sites een nieuwe dimensie van kracht en creativiteit betreden.</p> + +<p>Niettemin is JS wat lastiger onder de knie te krijgen dan HTML en CSS. U moet klein beginnen en er met kleine stapjes aan blijven werken. Om te beginnen laten we zien hoe u wat standaard JS aan uw pagina kunt toevoegen om een "<em>hallo wereld!</em>"-voorbeeld te maken.(<a href="https://nl.wikipedia.org/wiki/Hello_world_(programma)">het standaardvoorbeeld in programmeertalen</a>).</p> + +<div class="warning"> +<p><strong>Belangrijk</strong>: Wanneer u de rest van deze cursus nog niet gevolgd hebt, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">download dan deze voorbeeldcode </a>en gebruik het als uitgangspunt. Bekijk de pagina in uw browser voordat u verder gaat.</p> +</div> + +<ol> + <li>Ga naar de scriptsmap van uw testsite en maak een nieuw bestand dat uw <code>main.js</code>. noemt. Sla het op in uw scriptsmap. </li> + <li>Open nu <code>index.html</code> met een broncode-editor en voeg het volgende element toe op een nieuwe regel net voor het sluitende <code></body></code>-label: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li>Dit scriptelement doet feitelijk hetzelfde als het {{htmlelement("link")}}-element voor CSS — het past het JS toe op de pagina zodat het een effect kan hebben op de HTML (en CSS, en al het andere op de pagina)</li> + <li>Voeg nu de volgende code toe aan uw <code>main.js</code>-bestand: + <pre class="brush: js">var mijnHoofding = document.querySelector('h1'); +mijnHoofding.textContent = 'Hallo wereld!';</pre> + </li> + <li>Tot slot zorgt u ervoor dat uw HTML- en JavaScriptbestanden opgeslagen zijn en laadt u <code>index.html</code> in de browser. U zou iets dergelijks moeten zien:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: We hebben het {{htmlelement("script")}}-element onderaan het HTML-bestand gezet en daar is een goede reden voor. De HTML wordt namelijk in de browser geladen in de volgorde waarin die is geschreven. Als het script eerst wordt geladen en de HTML eronder moet beïnvloeden, zou dat niet kunnen werken, omdat er nog geen HTML is geladen waarop het script zijn invloed kan uitoefenen. Daarom is het vaak de beste strategie om uw script onder de HTML te plaatsen.</p> +</div> + +<h3 id="Wat_is_er_gebeurd">Wat is er gebeurd?</h3> + +<p>Uw koptekst is nu veranderd in "Hallo wereld!" met behulp van JavaScript. Dit deed u door een functie te gebruikten die {{domxref("Document.querySelector", "querySelector()")}} heet. Met deze functie kunt u de verwijzing naar de koptekst (h1) grijpen en opslaan in een variabele (<code>mijnHoofding)</code>. Dit lijkt sterk op wat CSS doet met selectoren. Als u iets met een element op uw pagina wilt doen, zult u het eerst moeten selecteren en opslaan in een variabele.</p> + +<p>Vervolgens verandert u de waarde van de {{domxref("Node.textContent", "textContent")}}-eigenschap van <code>mijnHoofding</code> in "Hallo wereld!" (met textContent kunt u de tekstinhoud van de hoofding (h1) veranderen).</p> + +<div class="note"> +<p><strong>Opmerking</strong>: De twee functies die u hierboven hebt gebruikt vormen beide een onderdeel van het <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, dat het mogelijk maakt om documenten te manipuleren.</p> +</div> + +<h2 id="Stoomcursus_basisbegrippen_JS">Stoomcursus basisbegrippen JS</h2> + +<p>We gaan u een paar basiseigenschappen van de Javascript-taal uitleggen zodat u beter begrijpt hoe alles werkt. Sterker nog, deze begrippen worden standaard in alle programmeertalen gebruikt. Als u deze basis begrijpt, zou u in staat moeten zijn om ongeveer alles te programmeren! </p> + +<div class="warning"> +<p><span style="font-size: 14px;"><strong>Belangrijk</strong></span>: Probeer de voorbeeldcodes in dit artikel uit in uw Javascript-console om te zien wat er gebeurt. Meer details over JavaScript-consoles vindt u in <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p> +</div> + +<h3 id="Variabelen">Variabelen</h3> + +<p>{{Glossary("Variable", "Variabelen")}} zijn containers waarin u waarden kunt bewaren. U begint door uw variabele te declareren met het <code>var</code>-sleutelwoord. Dat wordt dan gevolgd door de naam die u aan uw variabele geeft. U kunt zelf kiezen welke:</p> + +<pre class="brush: js">var mijnVariabele;</pre> + +<div class="note"> +<p><strong>Opmerking</strong>: Alle verklaringen in JavaScript moeten op een puntkomma eindigen, om aan te duiden waar de verklaring eindigt. Als u er geen puntkomma's in plaatst, kunt u onverwachte resultaten krijgen.</p> +</div> + +<div class="note"> +<p><strong>Opmerking</strong>: U kunt een variabele bijna elke naam geven die u kunt bedenken, maar er zijn toch een paar beperkingen (meer daarover in <a href="http://javascript.divendo-webs.com/hoofdstuk_4.php">dit artikel over naamgevingsregels voor variabelen</a>). Als u er niet zeker van bent, kan u <a href="https://mothereff.in/js-variables">de naam van uw variabele hier controleren</a> om te zien of hij geldig is.</p> +</div> + +<div class="note"> +<p><strong>Opmerking</strong>: JavaScript is hoofdlettergevoelig — <code>mijnVariabele</code> is niet dezelfde variabele als <code>mijnvariable</code>. Als u problemen krijgt in uw code, controleer dan uw hoofdletters! </p> +</div> + +<p>Nadat u een variabele hebt gedeclareerd, kunt u hem een waarde geven:</p> + +<pre class="brush: js">mijnVariabele = 'Bob';</pre> + +<p>Als u dat wenst, kunt u deze twee operaties op dezelfde lijn uitvoeren:</p> + +<pre class="brush: js">var mijnVariabele = 'Bob';</pre> + +<p>U kunt de waarde van de variabele ophalen door de naam van de variabele te noteren en op 'Enter' te drukken:</p> + +<pre class="brush: js">mijnVariabele;</pre> + +<p>Nadat u de variabele een waarde hebt gegeven, kunt u er later voor kiezen die te veranderen:</p> + +<pre>var mijnVariabele = 'Bob'; +mijnVariabele = 'Steven';</pre> + +<p>Let op het feit dat variabelen verschillende <a href="/en-US/docs/Web/JavaScript/Data_structures">datatypes</a> hebben:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Variabele</th> + <th scope="col">Verklaring</th> + <th scope="col">Voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Een string is wat als tekst geldt. Om aan te duiden dat de variabele een string is, moet u die tussen aanhalingstekens zetten.</td> + <td><code>var mijnVariabele = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Nummer")}}</th> + <td>Een nummer. Nummers worden niet omringd door aanhalingstekens .</td> + <td><code>var mijnVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>Een waarde die waar (true) of niet waar(false) is. De woorden <code>true</code> en <code>false</code> zijn speciale sleutelwoorden in JS en hebben geen aanhalingstekens nodig.</td> + <td><code>var mijnVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>Een structuur die u toestaat om meerdere waarden in in één enkele referentie op te slaan (een lijst).</td> + <td><code>var mijnVariabele = [1,'Bob','Steven',10];</code><br> + Verwijs naar elk lid van de array op deze manier:<br> + <code>mijnVariabele[0]</code>, <code>mijnVariabele[1]</code>, etc.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>In feite, eender wat. Alles in JavaScript is een object en kan worden opgeslagen in een variabele. Houd er rekening mee terwijl u leert. </td> + <td><code>var mijnVariable = document.querySelector('h1');</code><br> + Alle voorbeelden hierboven ook.</td> + </tr> + </tbody> +</table> + +<p>Dus waarom hebt u variabelen nodig? Variabelen zijn nodig om alles wat interessant is mogelijk te maken in het programmeren. Als waarden niet zouden kunnen veranderen, dan zou u er niets dynamisch mee kunnen doen, zoals een welkomstboodschap personaliseren of een afbeelding in een beeldgallerij veranderen. </p> + +<h3 id="Commentaren">Commentaren</h3> + +<p>U kunt commentaren in uw JavaScript-code plaatsen, net zoals u dat in CSS kunt:</p> + +<pre class="brush: js">/* +Alles ertussen is een commentaar. +*/</pre> + +<p>Als uw commentaar geen regeleindes bevat, is het vaak makkelijker om die achter twee schuine streepjes te zetten:</p> + +<pre class="brush: js" style="font-size: 14px;">// Dit is een commentaar +</pre> + +<h3 id="Operatoren">Operatoren</h3> + +<p>Een {{Glossary("operator")}} is een mathematisch symbool dat een resultaat produceert. Dit resultaat is gebaseerd op twee waarden (of variabelen). In de volgende tabel kunt u een paar van de eenvoudigste operatoren zien, met een paar voorbeelden ernaast die u in uw Javascript-console kunt uitproberen.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operator</th> + <th scope="col">Verklaring</th> + <th scope="col">Symbo(o)l(en)</th> + <th scope="col">Voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">optellen/aaneenschakeling</th> + <td>Gebruiken we om twee nummers op te tellen of om twee strings (tekst dus) aan elkaar te plakken.</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hallo " + "wereld!";</code></td> + </tr> + <tr> + <th scope="row">aftrekken, vermenigvuldigen, delen</th> + <td>Met deze variabelen kunt u rekenen.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // vermenigvuldigen is een asterisk in JS<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">toewijzingsoperator</th> + <td>Dit hebt u al gezien: het wijst een waarde toe aan een variabele.</td> + <td><code>=</code></td> + <td><code>var mijnVariabele = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">vergelijkingsoperator </th> + <td>Doet een test om te zien of twee waarden gelijk zijn aan elkaar. Levert een <code>true</code>/<code>false</code> (Boolean) resultaat op. (<code>true </code>betekent waar en <code>false </code>niet waar. <code>True </code>en <code>false </code>zijn sleutelwoorden en worden dus in het Engels gebruikt.)</td> + <td><code>===</code></td> + <td><code>var mijnVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">Negatie, niet gelijk aan</th> + <td>Levert de logisch tegenovergestelde waarde op van wat erop volgt. Het verandert een <code>true</code> in een <code>false</code> enz. Als het samen met de vergelijkingsoperator wordt gebruikt, test de negatieoperator of twee waarden <em>niet </em>gelijk zijn aan elkaar.</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>De uitdrukking is waar, maar de vergelijking levert false op omdat we hem negatief hebben gemaakt. </p> + + <p><code>var mijnVariabele = 3;<br> + !(mijnVariabele === 3);</code></p> + + <p>Hier testen we of "<code>mijnVariable</code> NIET gelijk is aan 3". Dit levert <code>false</code> op omdat <code>mijnVariabele</code> wel degelijk gelijk is aan 3.</p> + + <p><code><code>var mijnVariable = 3;</code><br> + mijnVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Er zijn nog veel meer operatoren te ondekken maar voorlopig is dit genoeg. U vindt een complete lijst in <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressies en operators</a>.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Als u datatypes met elkaar vermengt, kunt u vreemde resultaten krijgen als u berekeningen doet. Wees dus voorzichtig en verwijs correct naar uw variabelen zodat u de resultaten krijgt die u verwacht. Voer bijvoorbeeld <code>"35" + "25"</code> in uw console in. Waarom ziet u niet het resultaat dat u verwacht? De aanhalingstekens veranderen de nummers in strings. U eindigt dus met aaneengeplakte strings in plaats van opgetelde nummers. Als u <code>35 + 25</code> invoert, zult u wel het correcte resultaat krijgen.</p> +</div> + +<h3 id="Voorwaarden">Voorwaarden</h3> + +<p>Voorwaarden (conditionals in het Engels) zijn codestructuren die ons toestaan te testen of een uitdrukking een true of false resultaat oplevert. We kunnen dan een andere code uitvoeren, afhankelijk van het resultaat. De vaakst voorkomende vorm die een voorwaarde aanneemt noemen we <code style="font-style: normal; font-weight: normal;">if ... else</code>. Dus bijvoorbeeld:</p> + +<pre class="brush: js">var roomIJs = 'chocolade'; +if (roomIJs === 'chocolade') { + alert('Oh, ik houd van chocolade roomijs!'); +} else { + alert('Awwww, maar chocolade is mijn favoriet...'); +}</pre> + +<p>De uitdrukking in de <code>if ( ... )</code> is de test — deze gebruikt de vergelijkingsoperator (zoals hierboven beschreven) om de variabele roomIJs met de string chocolade te vergelijken en vast te stellen of de twee gelijk zijn aan elkaar. Als deze vergelijking <code>true </code>oplevert, voert u het eerste codeblok uit. Zo niet, dan slaat u die code over en voert u het tweede codeblok uit dat na de <code>else</code>-verklaring staat.</p> + +<h3 id="Functies">Functies</h3> + +<p>{{Glossary("Function", "Functies")}} zijn een manier om functionaliteit te verpakken, die u opnieuw wilt gebruiken. Wanneer u de functie wilt gebruiken, kunt u die aanroepen met zijn naam en hoeft u niet constant de hele code te herschrijven. U hebt hierboven al een paar keer zo'n functie gebruikt. Bijvoorbeeld: </p> + +<ol> + <li> + <pre class="brush: js">var mijnVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('hallo!');</pre> + </li> +</ol> + +<p>Deze functies, <code>document.querySelector</code> en <code>alert</code>, zijn in de browser ingebouwd. Ze zijn er voor u om te gebruiken wanneer u wilt. </p> + +<p>Als u iets ziet dat eruitziet als de naam van een variabele, maar met haakjes — <code>()</code> — erachter, dan is het waarschijnlijk een functie. Functies krijgen vaak {{Glossary("Argument", "argumenten")}} — stukjes data die ze nodig hebben om hun werk te doen. Deze staan tussen de haakjes. Als er meerdere zijn, worden ze met komma's van elkaar gescheiden.</p> + +<p>De <code>alert()</code>-functie bijvoorbeeld laat een pop-up-invoerveld in de browser verschijnen, maar we moeten de functie een string als argument geven om <code>alert()</code> te vertellen wat hij in het pop-up-invoerveld moet schrijven.</p> + +<p>Het goede nieuws is dat u uw eigen functies kan definiëren — in het volgende voorbeeld schrijven we een eenvoudige functie die twee nummers als argumenten krijgt en die de twee nummers vermenigvuldigt. Let er wel op dat we het Engelse <em>function </em>moeten schrijven, Javascript kent geen Nederlandse woorden, al kunt u ze wel Nederlandse namen geven.</p> + +<pre class="brush: js">function vermenigvuldigen(num1,num2) { + var resultaat = num1 * num2; + return resultaat; +}</pre> + +<p>Kopiëer de volgende functie in uw console en probeer dan de nieuwe functie een paar keer uit te voeren, bijvoorbeeld:</p> + +<pre class="brush: js">vermenigvuldigen(4,7); +vermenigvuldigen(20,20); +vermenigvuldigen(0.5,3);</pre> + +<div class="note"> +<p><strong>Opmerking</strong>: De <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code>-verklaring vertelt de browser dat hij de resultaatvariabele als opbrengst van de functie terug moet geven, zodat we die waarde ergens anders kunnen gebruiken.</p> + +<p>In het Nederlands betekent 'to return' terugkeren . In zekere zin doet de functie dat ook, want met 'return' verlaat u de functie. Het werkwoord heeft echter nog een tweede betekenis en die is 'opbrengen', 'opleveren' of 'teruggeven'.</p> + +<p>De resultaatwaarde is als het ware de winst van de functie. Dit is noodzakelijk, omdat variabelen die in functies worden gedefiniëerd enkel beschikbaar zijn binnen die functies. Dat noemen we het toepassingsgebied van de variable of 'variable {{Glossary("Scope", "scoping")}}' in het Engels. (Lees <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">meer over variable scoping</a>.)</p> +</div> + +<h3 id="Events">Events</h3> + +<p>Om echte interactiviteit op uw website te creëren hebt u gebeurtenissen nodig ('Events' in het Engels). Events zijn codestructuren die naar dingen luisteren die in de browser gebeuren en u dan toestaan om code uit te voeren als reactie op die dingen. Het meest voor de hand liggende voorbeeld is het <a href="/en-US/docs/Web/Events/click">klik-event</a>, dat wordt afgevuurd door de browser als uw muis ergens op klikt. Om dit te demonstreren kunt u het volgende in uw console invoeren en vervolgens op de webpagina in uw browser klikken:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Au! Houd op met me te porren!'); +}</pre> + +<p>Er zijn vele manieren om een event aan een element vast te maken. Hier selecteren we het HTML-element en dan zetten we zijn eigenschap '<code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> handler' (i.e. afhandelaar of manager) gelijk aan een anonieme (i.e. naamloze) functie die de code bevat die we willen uitvoeren als het klik-event gebeurt. </p> + +<p>Let wel op dat het volgende:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p>het equivalent is van:</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>Het is gewoon wat korter.</p> + +<h2 id="We_gaan_onze_voorbeeldwebsite_wat_extra_vuurkracht_geven">We gaan onze voorbeeldwebsite wat extra vuurkracht geven</h2> + +<p>Nu we een paar basisbegrippen van Javascript hebben behandeld, kunnen we een paar coole basiseigenschappen aan onze voorbeeldsite toevoegen zodat u een idee krijgt van wat er zoal mogelijk is.</p> + +<h3 id="Een_afbeeldingswisselaar_toevoegen">Een afbeeldingswisselaar toevoegen </h3> + +<p>In dit gedeelte gaan we nog een afbeelding en wat eenvoudige Javascript aan onze website toevoegen. Met JS gaan we ervoor zorgen dat de twee afbeeldingen elkaar afwisselen als er op de afbeelding wordt geklikt. </p> + +<ol> + <li>Zoek eerst nog een afbeelding die u graag op uw website zou willen zien. Zorg ervoor dat de afbeelding ongeveer dezelfde grootte heeft als uw eerste afbeelding.</li> + <li>Sla de afbeelding op in uw afbeeldingenmap.</li> + <li>Ga naar uw <code>main.js</code>-bestand en voer de volgende Javascriptcode in (Als uw "hallo wereld!"-code er nog steeds in zit, verwijder die dan). + <pre class="brush: js">var mijnAfbeelding = document.querySelector('img'); + +mijnAfbeelding.onclick = function() { + var mijnSrc = mijnAfbeelding.getAttribute('src'); + if(mijnSrc === 'afbeeldingen/firefox-icon.png') { + mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox2.png'); + } else { + mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox-icon.png'); + } +}</pre> + </li> + <li>Sla al uw bestanden op en laad <code>index.html</code> in de browser. Als u nu op de afbeelding klikt, zou die in de andere moeten veranderen!</li> +</ol> + +<p>Wat doen we in deze code? We slaan een verwijzing naar ons afbeeldingselement in de mijnAfbeelding-variabele op. Daarna, zetten we de onclick-event-handler van de variabele gelijk aan een anonieme functie (eentje zonder naam dus). Telkens als er nu op de afbeelding wordt geklikt, worden de volgende taken uitgevoerd:</p> + +<ol> + <li>We halen de waarde van het src-attribuut van de afbeelding op.</li> + <li>We gebruiken een voorwaarde om te controleren of de <code>src</code>-waarde gelijk is aan het pad naar de originele afbeelding: + <ol> + <li>Als dat zo is, veranderen we de <code>src</code>-waarde in het pad naar de tweede afbeelding en zo wordt de tweede afbeelding in het {{htmlelement("image")}}-element geladen.</li> + <li>Als dat niet zo is, wat wil zeggen dat de afbeelding al is veranderd, veranderen we de <code>src-</code>waarde terug in het originele pad van de eerste afbeelding, zodat de eerste afbeelding opnieuw te zien is. </li> + </ol> + </li> +</ol> + +<h3 id="Een_gepersonaliseerde_welkomstboodschap_toevoegen">Een gepersonaliseerde welkomstboodschap toevoegen</h3> + +<p>Nu gaan we nog een stuk code toevoegen. De code zal de titel van de pagina wijzigen zodat er ook een gepersonaliseerde welkomstboodschap in staat als de gebruiker de site voor de eerste keer opent. Deze welkomstboodschap zal bewaard blijven als de bezoeker de site verlaat om later terug te komen. We zullen er ook een optie in plaatsen die ervoor zorgt dat de bezoeker zijn gebruikersnaam kan veranderen en dus ook de welkomstboodschap als dat nodig is.</p> + +<ol> + <li>In <code>index.html</code> voegt u net voor het {{htmlelement("script")}}-element de volgende regel toe: + + <pre class="brush: html"><button>Verander gebruiker</button></pre> + </li> + <li>In <code>main.js</code> voegt u onderaan het bestand de volgende code toe, exact zoals die is geschreven. De code grijpt een referentie naar de nieuwe knop (de button) die we hebben toegevoegd en nog een referentie naar de hoofding. Deze referenties worden beide opgeslagen in variabelen : + <pre class="brush: js">var mijnKnop = document.querySelector('button'); +var mijnHoofding= document.querySelector('h1');</pre> + </li> + <li>Voeg nu de volgende functie toe om de gepersonaliseerde groet in te stellen — dit zal nog niet echt iets doen, maar we zullen hem later gebruiken: + <pre class="brush: js">function stelNaamIn() { + var mijnNaam = prompt('Voer uw naam in'); + localStorage.setItem('naam', mijnNaam); + mijnHoofding.textContent = 'Mozilla is cool, ' + mijnNaam; +}</pre> + Deze functie bevat een <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> functie, die een dialoogvenster laat verschijnen. Het lijkt op <code>alert()</code> behalve dat <code>prompt()</code> de gebruiker vraagt om data in te voeren en die data in een variabele opslaat nadat de gebruiker op <strong>OK </strong>heeft gedrukt. In dit geval vragen we de bezoeker om zijn naam in te voeren. Daarna maken we gebruik van een API die <code>localStorage</code> (lokale opslag) heet en die ons toestaat data in de browser op de slaan, klaar voor later gebruik. We gebruiken de localStorage's <code>setItem()-</code>functie om een gegevenselement dat 'naam' heet te creëren en op te slaan. Het zal de waarde die de functie teruggeeft, gelijkstellen aan de mijnNaam-variabele die de naam bevat die de bezoeker heeft ingevoerd. Tenslotten stellen we de <code>textContent</code> van de heading gelijk aan een string ('Mozilla is cool, ') plus de naam van de gebruiker. </li> + <li>Vervolgens voegt u dit <code>if ... else</code> blok toe — we zouden dit de initialisatiecode kunnen noemen, want het zet de app op terwijl de website voor de eerste keer wordt geladen : + <pre class="brush: js">if(!localStorage.getItem('naam')) { + stelNaamIn(); +} else { + var opgeslagenNaam = localStorage.getItem('naam'); + mijnHoofding.textContent = 'Mozilla is cool, ' + opgeslagenNaam; +}</pre> + Dit blok gebruikt eerst een negatieoperator die de voorwaarde ontkent (logisch NIET) om te controleren of het een gegevenselement <code>naam</code> bestaat. Als dat niet zo is, wordt de <code>setUserName()</code> functie uitgevoerd om <code>naam</code> te creëren. Als <code>naam</code> wel bestaat, d.w.z. de gebruiker heeft <code>naam</code> tijdens een vorig bezoek ingesteld, halen we de opgeslagen naam op met <code>getItem()</code> en stellen we de <code>textContent</code> van de hoofding gelijk aan een string plus de naam van de gebruiker, net zoals we in <code>stelNaamIn()</code> deden.</li> + <li>Tenslotte stelt u de <code>onclick</code>-event-handler in op de knop, zodat de <code>stelNaamIn()</code>-functie wordt uitgevoerd als er op de knop wordt geklikt. Dit staat de gebruiker toe een nieuwe naam in te voeren door op de knop te klikken : + <pre class="brush: js">mijnKnop.onclick = function() { + stelNaamIn(); +} +</pre> + </li> +</ol> + +<p>Als u nu de site voor de eerste keer bezoekt, zal die u om uw gebruikersnaam vragen en u dan een gepersonaliseerde boodschap geven. U kunt de naam veranderen wanneer u wilt, door op de knop te drukken. Als bonus, omdat de naam in localStorage is opgeslagen, blijft de naam bewaard nadat de site is gesloten, zodat de gepersonaliseerde boodschap er nog altijd zal zijn als u de site opnieuw opent! </p> + +<h2 id="Conclusie">Conclusie</h2> + +<p>Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer zo uit ziet (u kunt ook <a href="https://mdn.github.io/beginner-html-site-scripted/">onze versie hier zien</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>Als u vast komt te zitten, kunt u altijd uw werk met ons <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">voltooide voorbeeld op Github</a> vergelijken.</p> + +<p>We hebben nu slechts de eerste stappen op een lang Javascriptpad gezet. Als u van dit artikel hebt genoten en u uw studie graag zou verdiepen, ga dan naar onze <a href="/en-US/docs/Web/JavaScript/Guide">gids over JavaScript</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html b/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html new file mode 100644 index 0000000000..920c4eccbc --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html @@ -0,0 +1,103 @@ +--- +title: De publicatie van je website +slug: Learn/Getting_started_with_the_web/Publicatie_website +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Als je code eenmaal af is en je hebt de bestanden die je website opmaken, georganiseerd, moet je de site online zetten zodat mensen hem kunnen vinden. Dit artikel legt uit hoe je jouw eenvoudige voorbeeldcode met weinig moeite online kan zetten. </p> +</div> + +<h2 id="Welke_opties_zijn_er">Welke opties zijn er?</h2> + +<p>De publicatie van een website is geen eenvoudig onderwerp. Er zijn zoveel manieren om een website online te zetten. In dit artikel gaan we niet proberen om alle methodes uit te doeken te doen. We gaan ons beperken tot de pro's en contra's van drie algemene stragegieën vanuit het standpunt van een beginner en dan bespreken we met jou stap voor stap één methode die geschikt is voor onze code.</p> + +<h3 id="Hosting_met_een_domeinnaam">Hosting met een domeinnaam</h3> + +<p>Als je totale controle over je gepucliceerde website wil hebben, dan zal je waarschijnlijk geld aan hosting en een domeinnaam moeten uitgeven :</p> + +<ul> + <li>Hosting — je huurt ruimte op de <a href="/en-US/Learn/What_is_a_web_server">webserver</a> van een firma die deze hostingdienst aanbiedt. Je slaat al je bestanden op in deze ruimte en de webserver toont de inhoud aan de webgebruikers die je website willen bekijken.</li> + <li>Een <a href="/en-US/Learn/Understanding_domain_names">domeinnaam</a> — het unieke adres waarop mensen je website kunnen vinden zoals bijvoorbeeld <code>/www.mozilla.org</code>, of <code>http://www.bbc.co.uk</code>. Je huurt je domeinnaam voor een vastgelegd aantal jaren van een <strong>domeinregistratiebedrijf</strong>.</li> +</ul> + +<p>Vele professionele websites gaan op die manier online.</p> + +<p>Je zal bovendien ook een {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-programma (zie <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> voor meer details) nodig hebben om de bestanden van je website naar de server over te hevelen. FTP-programma's verschillen onderling zeer veel van elkaar, maar meestal moet je op de webserver inloggen met details die jou worden aangeboden door je hostingbedrijf (bijvoorbeeld gebruikersnaam, paswoord, hostnaam). Dan toont het programma jouw lokale bestanden en die van de webserver in twee vensters, zodat je ze heen en weer kan slepen en in het juiste venster loslaten:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Tips_voor_het_vinden_van_hostingruimte_en_domeinen">Tips voor het vinden van hostingruimte en domeinen</h4> + +<ul> + <li>We promoten hier geen specifieke commerciële hostingbedrijven. Om hostingbedrijven en domeinnaamregistratiehouders te vinden, zoek je gewoon op "web hosting" en "domeinnamen" naar een bedrijf dat domeinnaamregistraties verkoopt. Dit soort bedrijven zullen één of andere functionaliteit aanbieden waarmee je een domeinnaam naar keuze kunt opzoeken.</li> + <li>Het is mogelijk dat je {{Glossary("ISP", "Internetprovider")}} (bij je thuis of die van je bedrijf) hosting voor een kleine website aanbiedt. De beschikbare set van hulpmiddelen zal beperkt zijn maar het is misschien perfect voor je eerste experimenten — neem contact met hen op en vraag ernaar!</li> + <li>Er zijn bedrijven die gratis diensten aanbieden. Dat zijn bedrijven zoals <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, en <a href="https://wordpress.com/">WordPress</a>. Opnieuw, het zal vrij beperkt zijn, maar ze zijn ideaal voor je eerste experimenten. Gratis diensten vereisen meestal geen FTP-software voor uploads — je kan gewoon alles naar het webinterface slepen om je bestanden te uploaden.</li> + <li>Sommige bedrijven bieden zowel hosting als domeinen in één paket aan.</li> +</ul> + +<h3 id="Gebruik_een_online_dienst_zoals_GitHub_of_Google_App_Engine">Gebruik een online dienst zoals GitHub of Google App Engine</h3> + +<p>Met sommige webinstrumenten kan je je website online publiceren:</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> is een "sociale coderingssite". Je kan er je bestanden naar uploaden en ze er opslaan. Github werkt als een opslagplaats voor je code in het <a href="http://git-scm.com/">Git</a> <strong>versie-beheersysteem. </strong>Je kan dan met anderen samenwerken en code voor je project schrijven. Het systeem is standaard open-source ('open bron' in het Nederlands). Dat wil zeggen dat men overal ter wereld je code op Github kan vinden, gebruiken, ervan leren en die verbeteren. Github biedt een zeer nuttige dienst aan die <a href="https://pages.github.com/">GitHub Pages</a> heet. Daarmee kan je je website live op het web tonen.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is een krachtig platform waarmee je applicaties op Google’s infrastructuur kan bouwen en uitvoeren. Je kan van nul een webapplicatie opbouwen die uit meerdere niveaus zal bestaan maar je kan ook gewoon een statische website maken. Zie <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> voor meer informatie.</li> +</ul> + +<p>In tegenstelling tot hosting, kan je zulke webinstrumenten meestal gratis gebruiken maar hun functionaliteit zal beperkt zijn. </p> + +<h3 id="Gebruik_een_IDE_op_het_internet_zoals_Thimble">Gebruik een IDE op het internet zoals Thimble</h3> + +<p>Er zijn een aantal webapps die een omgeving nabootsen waarin je je website kan ontwikkelen. (IDE staat voor Integrated Development Environment. In het Nederlands is dat Geïntegreerde Ontwikkelingsomgeving). Je kan er je HTML, CSS and JavaScript in schrijven en je kan het resultaat van al die code weergeven als een website — en dat allemaal in één tabblad van je browser. Meestal zijn deze instrumenten vrij gemakkelijk in het gebruik, geweldig om mee te leren, gratis (toch de basisdiensten) en ze tonen je weergegeven pagina op een uniek webadres. De hulpmiddelen die je kan gebruiken, zijn echter nogal beperkt en de apps bieden meestal enkel hostingruimte aan voor tekst (afbeeldingen kan je er bijvoorbeeld niet in steken.</p> + +<p>Speel een beetje met een paar van deze voorbeelden en kijk eens welke jou het meeste aanspreekt:</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://thimble.mozilla.org">Thimble</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Publiceren_via_GitHub">Publiceren via GitHub</h2> + +<p>Nu gaan we stap voor stap je site op een gemakkelijke manier publiceren met GitHub Pages.</p> + +<ol> + <li>Eerst, <a href="https://github.com/">schrijf je je in bij GitHub</a> en verifiëer je je emailadres. </li> + <li>Daarna moet je een <a href="https://github.com/new">een opslagplaats of repository creëren</a> waarin je je bestanden zult steken. (Het woord repository wordt zeer vaak gebruikt. Het doet het dan ook veel beter dan opslagplaats in een zoekmachine.)</li> + <li>Op deze pagina, in het invoerveld dat <em>Repository name</em> heet, voer je <em>username</em>.github.io in, waar <em>username</em> jouw gebruikersnaam is. Dus bijvoorbeeld, onze vriend bobsmith zou je dan invoeren als <em>bobsmith.github.io</em>.<br> + Vink ook <em>Initialize this repository with a README</em> aan en click dan op <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Daarna sleep je de inhoud van je websitemap naar je repository en laat je die erin vallen. Dan klik je op <em>Commit changes</em> (dit betekent ongeveer 'sla de veranderingen op'.)<br> + + <div class="note"> + <p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Zorg ervoor dat je map een <em>index.html</em> bestand heeft.</p> + </div> + </li> + <li> + <p>Nu navigeer je je browser naar <em>username</em>.github.io om je website online te zien. Bijvoorbeeld, voor de gebruikersnaam <em>chrisdavidmills</em>, ga je naar <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> + + <div class="note"> + <p><strong>Opmerking</strong>: Het kan een paar minuten duren vooraleer je website live is. Als het niet onmiddellijk werkt, zal je paar minuten moeten wachten en dan opnieuw proberen.</p> + </div> + </li> +</ol> + +<p>Om meer te leren ga je naar <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> + +<h2 id="Meer_lezen_over">Meer lezen over</h2> + +<ul> + <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Een leuke cursus van Codecademy die een beetje verder gaat en je een paar extra technieken toont.</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> door Scott Murray, heeft een paar nuttige ideeën over beschikbare diensten.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html b/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html new file mode 100644 index 0000000000..1025b94397 --- /dev/null +++ b/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html @@ -0,0 +1,436 @@ +--- +title: Geavanceerde styling van HTML-formulieren +slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren +tags: + - CSS + - Formulieren + - Geavanceerd + - Gids + - HTML + - Web + - voorbeeld +translation_of: Learn/Forms/Advanced_form_styling +--- +<p>In dit artikel wordt ingegaan op het gebruik van <a href="/nl/docs/Web/CSS">CSS </a>in <a href="nl/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML</a>-formulieren om moeilijk te stijlen widgetsaan te passen. Zoals in vorig artikel werd aangegeven vormen tekstvelden en knoppen geen enkel probleem in CSS. Hier wordt dieper ingegaan op de donkere kant van het stijlen van HTML-formulieren.</p> + +<p>Even ter herinnering:</p> + +<dl> + <dt>The bad</dt> + <dd>Elementen die moeilijk aan te passen zijn en die ingewikkelde trucs nodig hebben en soms ook geavanceerde kennis van CSS3.</dd> + <dt>The ugly</dt> + <dd>Elementen die praktisch niet kunnen aangepast worden. In het beste geval kunnen enkele zaken gedaan worden maar die werken dan weer niet in andere browsers. Volledige controle over de stijl van dergelijke elementen is onmogelijk.</dd> +</dl> + +<h2 id="CSS_uiterlijk">CSS uiterlijk</h2> + +<p>Het probleem met formulierwidgets andere dan tekstvelden en knoppen, is dat in veel gevallen CSS niet expressief genoeg is.</p> + +<p>Recent is daar wel verbetering in gekomen:</p> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> was zeer beperkt en omvatte slechts drie pseudoklassen: + + <ul> + <li>{{cssxref(":active")}}</li> + <li>{{cssxref(":focus")}}</li> + <li>{{cssxref(":hover")}}</li> + </ul> + </li> + <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> voegt enkele nieuwe pseudoklassen toe: + <ul> + <li>{{cssxref(":enabled")}}</li> + <li>{{cssxref(":disabled")}}</li> + <li>{{cssxref(":checked")}}</li> + <li>{{cssxref(":indeterminate")}}</li> + </ul> + </li> + <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> voegt ook enkele pseudoklassen toe om de toestand van het element te beschrijven: + <ul> + <li>{{cssxref(":default")}}</li> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":in-range")}}</li> + <li>{{cssxref(":out-of-range")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":read-only")}}</li> + <li>{{cssxref(":read-write")}}</li> + </ul> + </li> + <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> is op het ogenblik in de ontwikkelingsfaze en lijkt niet veel bij te dragen aan de verbetering van formulieren: + <ul> + <li>{{cssxref(":user-error")}} is slechts een verbetering van de {{cssxref(":invalid")}} pseudoklasse.</li> + </ul> + </li> +</ul> + +<p>Dit alles is een goed begin maar er zijn twee problemen: ten eerste een aantal browsers implementeert niet verder dan CSS 2.1. En ten tweede zijn deze nauwelijks voldoende om ingewikkelde formulieren te stylen. Zoals bijvoorbeeld <code>datepicker</code> dat toelaat een datum te kiezen uit een lijst van datums.</p> + +<p>Er zijn bij sommige browsers experimenten gaande betreffende de presentatie van formulieren en soms is het nuttig te weten wat er bestaat.</p> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> ondanks dat die experimenten aantrekkelijk lijken, <strong>zijn zij niet standaard, hetgeen betekent dat zij niet betrouwbaar zijn</strong>. Gebruik ervan is op eigen risico en misschien is het beter van ze niet te gebruiken want <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/" title="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">men zou iets kunnen doen dat slecht is voor het Web</a> door niet-standaard eigenschappen te gebruiken.</p> +</div> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Uitbreidingen</a> + + <ul> + <li>{{cssxref(":-moz-placeholder")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}}</li> + <li>{{cssxref(":-moz-ui-invalid")}}</li> + <li>{{cssxref(":-moz-ui-valid")}}</li> + </ul> + </li> + <li><a href="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Uitbreidingen</a> + <ul> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">En veel meer</a></li> + </ul> + </li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Microsoft CSS Uitbreidingen</a> + <ul> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></li> + </ul> + </li> + <li><a href="http://www.opera.com/docs/specs/" rel="external" title="http://www.opera.com/docs/specs/">Opera heeft geen uitbreidingen met betrekking tot HTML-formulieren</a></li> +</ul> + +<h3 id="De_presentatie_van_formulierelementen_instellen">De presentatie van formulierelementen instellen</h3> + +<p>Browsers gebaseerd op WebKit (Chrome, Safari) en Gecko (Firefox) kunnen het best overweg met aanpassing van HTML-elementen. Zij zijn ook over platformen heen inzetbaar omdat zij een mechanisme hebben om over te schakelen tussen natuurlijk uitzicht en aanvoelen en elementen die door de gebruiker kunen aangepast worden.</p> + +<p>Hiertoe gebruiken zij de eigenschap: {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}. <strong>Deze eigenschappen zijn niet standaard en worden best niet gebruikt</strong>. Zij gedragen zich zelfs verschillend in WebKit en in Gecko. Eén waarde is wel goed te gebruiken: <code>none</code>. Met deze waarde heeft men (praktisch volledige) controle over de stijl van bepaalde widgets.</p> + +<p>Hieronder enkele voorbeelden. Het gebruik is het best aan te tonen bij zoekvelden met WebKit browsers:</p> + +<pre class="brush: html"><form> + <input type="search"> +</form></pre> + +<pre class="brush: css"><style> +input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; +} +</style></pre> + +<div class="note"> +<p><strong>Nota:</strong> het is altijd moeilijk de toekomst te voorspellen betreffende web<span class="ng-binding"><span class="highlighted">technologie</span>ën</span>, maar CSS-uitbreidingen zijn niet eenvoudig en er gebeurt ook onderzoek naar andere specificaties zoals <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> dat enig perspectief biedt. De zoektocht naar het volledig aanpasbaar formulier is nog lang niet over.</p> +</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> + +<p>Het voorkomen van keuzevakjes en -rondjes is nogal rommelig. Zo is het bijvoorbeeld niet de bedoeling om de afmetingen van keuzevakjes en -rondjes te wijzigen en sommige browsers kunnen nogal verschillend reageren wanneer men dit tracht te doen.</p> + +<h4 id="Een_eenvoudige_test">Een eenvoudige test</h4> + +<pre class="brush: html"><span><input type="checkbox"></span></pre> + +<pre class="brush: css">span { + display: inline-block; + background: red; +} + +input[type=checkbox] { + width : 100px; + height: 100px; +}</pre> + +<p>Zo wordt dit in de verschillende browsers weergegeven:</p> + +<table> + <thead> + <tr> + <th scope="col">Browser</th> + <th scope="col">Rendering</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 16 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Firefox" src="/files/4165/checkbox-firefox-macos.png" style="height: 106px; width: 107px;"></td> + </tr> + <tr> + <td>Chrome 22 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Chrome" src="/files/4163/checkbox-chrome-macos.png" style="height: 106px; width: 106px;"></td> + </tr> + <tr> + <td>Opera 12.01 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Opera" src="/files/4167/checkbox-opera-macos.png" style="height: 106px; width: 107px;"></td> + </tr> + <tr> + <td>Internet Explorer 9 (Windows 7)</td> + <td><img alt="Rendering of a sized check box on IE9" src="/files/4169/checkbox-IE9-win7.png" style="height: 107px; width: 106px;"></td> + </tr> + <tr> + <td>Internet Explorer 7 (Windows XP)</td> + <td><img alt="Rendering of a sized check box on IE7" src="/files/4171/checkbox-IE7-winxp.png" style="height: 100px; width: 100px;"></td> + </tr> + </tbody> +</table> + +<h4 id="Een_ingewikkelder_voorbeeld">Een ingewikkelder voorbeeld</h4> + +<p>Omdat Opera en Internet Explorer geen eigenschappen hebben als {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}, is het niet mogelijk deze te gebruiken. CSS is gelukkig wel in staat om dit te omzeilen. Neem het volgend klassiek voorbeeld:</p> + +<pre class="brush: html"><form> + <fieldset> + <p> + <input type="checkbox" id="first" name="fruit-1" value="cherry"> + <label for="first">I like cherry</label> + </p> + <p> + <input type="checkbox" id="second" name="fruit-2" value="banana" disabled> + <label for="second">I can't like banana</label> + </p> + <p> + <input type="checkbox" id="third" name="fruit-3" value="strawberry"> + <label for="third">I like strawberry</label> + </p> + </fieldset> +</form></pre> + +<p>met als basisstijl:</p> + +<pre class="brush: css">body { + font: 1em sans-serif; +} + +form { + display: inline-block; + + padding: 0; + margin : 0; +} + +fieldset { + border : 1px solid #CCC; + border-radius: 5px; + margin : 0; + padding: 1em; +} + +label { + cursor : pointer; +} + +p { + margin : 0; +} + +p+p { + margin : .5em 0 0; +}</pre> + +<p>Aanpassing van het keuzevakje:</p> + +<p>De bedoeling is het basis keuzevakje te vervangen door een eigen keuze. Onze keuze moet dezelfde toestanden kennen als het originele keuzevak. Deze toestanden zijn: aangevinkt, niet-aangevinkt, niet-aktief aangevinkt en niet-actief niet-aangevinkt. Dit ziet er als volgt uit:</p> + +<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> + +<p>Vooreerst moeten de originele keuzevakjes verborgen worden. Daartoe worden ze buiten het gezichtsveld geplaatst. Hierbij moeten twee zaken in acht genomen worden:</p> + +<ul> + <li>Om de keuzevakjes te verbergen mag <code>display:none</code> niet gebruikt worden omdat de gebruiker ze nog moet kunnen bedienen. Hij moet ze immers kunnen aan- of uitvinken. Met <code>display:none</code> is het keuzevak niet meer toegankelijk voor de gebruiker.</li> + <li>De vormgeving gebeurt door CSS3. Om compatibel te blijven met oudere browsers wordt de {{cssxref(":root")}} pseudoklasse gebruikt. Oudere browsers, als Internet Explorer, tonen dan een gewoon keuzevak, terwijl de moderne browsers het aangepaste keuzevak zullen tonen.</li> +</ul> + +<pre class="brush: css">:root input[type=checkbox] { + /* original check box are push outside the viexport */ + position: absolute; + left: -1000em; +}</pre> + +<p>Dan moet het eigen keuzevak toegevoegd worden. Daarvoor wordt gebruik gemaakt van het {{cssxref(":before")}} pseudo-element dat behoort bij het {{HTMLElement("label")}} element van het oorspronkelijk keuzevak. Dan wordt het keuzevak geselecteerd en door middel van de <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling selector </a>wordt het bijbehorende label geselecteerd. Tenslotte wordt het {{cssxref(":before")}} pseudo-element ingevoegd en wordt bepaald hoe het keuzevakje er moet uitzien.</p> + +<pre class="brush: css">:root input[type=checkbox] + label:before { + content: ""; + display: inline-block; + width : 16px; + height : 16px; + margin : 0 .5em 0 0; + background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0; + +/* The following is used to adjust the position of + the check boxes on the text baseline */ + + vertical-align: bottom; + position: relative; + bottom: 2px; +}</pre> + +<p>De toestand van ket keuzevakje wordt vastgelegd met de {{cssxref(":checked")}} en {{cssxref(":disabled")}} pseudoklassen. Omdat er met CSS sprite wordt gewerkt moet alleen de positie van de achtergrond aangepast worden.</p> + +<pre class="brush: css">:root input[type=checkbox]:checked + label:before { + background-position: 0 -16px; +} + +:root input[type=checkbox]:disabled + label:before { + background-position: 0 -32px; +} + +:root input[type=checkbox]:checked:disabled + label:before { + background-position: 0 -48px; +}</pre> + +<p>Er moet nog een (zeer) belangrijk punt afgewerkt worden. Als de gebruiker het toetsenbord gebruikt om tussen de widgets te navigeren, moet er visueel aangegeven worden welke widget de focus heeft. Omdat de originele keuzevakjes verborgen zijn, moet dat op een of andere manier opgevangen worden. Dit wordt op de volgende manier gedaan:</p> + +<pre class="brush: css">:root input[type=checkbox]:focus + label:before { + outline: 1px dotted black; +}</pre> + +<p>Hier een voorbeeld:</p> + +<p>{{EmbedLiveSample("A_more_complex_example", 250, 130)}}</p> + +<h3 id="Het_probleem_met_select">Het probleem met select</h3> + +<p>Het {{HTMLElement("select")}} element is een 'lelijk' element omdat het onmogelijk consistent kan gestyled worden over platformen heen. Er zijn nochtans enkele mogelijkheden. Een voorbeeld:</p> + +<pre class="brush: html"><select> + <option>Cherry</option> + <option>Banana</option> + <option>Strawberry</option> +</select></pre> + +<pre class="brush: css">select { + width : 80px; + padding : 10px; +} + +option { + padding : 5px; + color : red; +}</pre> + +<p>De volgende tabel toont hoe de verschillende browsers er mee omgaan. De twee eerste kolommen zijn het gewone voorbeeld. De twee volgende kolommen geven aan wat er gebeurt met de widgets bij gebruik van aangepaste CSS:</p> + +<pre class="brush: css">select, option { + -webkit-appearance : none; /* To gain control over the appearance on WebKit */ + -moz-appearance : none; /* To gain control over the appearance on Gecko */ + + /* Om de weergave bij Presto (Opera) en Trident (IE) aan te passen. + Noteer dat dit ook werkt bij Gecko en deels bij WebKit */ + background : none; +}</pre> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">Browser</th> + <th colspan="2" scope="col" style="text-align: center;">Normale weergave</th> + <th colspan="2" scope="col" style="text-align: center;">Aangepaste weergave</th> + </tr> + <tr> + <th scope="col" style="text-align: center;">gesloten</th> + <th scope="col" style="text-align: center;">open</th> + <th scope="col" style="text-align: center;">gesloten</th> + <th scope="col" style="text-align: center;">open</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 16 (Mac OSX)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX (No tweak)" src="/files/4201/select-firefox-macos.png" style="height: 52px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX (No tweak)" src="/files/4199/select-firefox-macos-open.png" style="height: 143px; width: 105px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX" src="/files/4197/select-firefox-macos-custom.png" style="height: 52px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX" src="/files/4195/select-firefox-macos-custom-open.png" style="height: 141px; width: 108px;"></td> + </tr> + <tr> + <td>Firefox 16 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7 (No tweak)" src="/files/4209/select-firefox-win7.png" style="height: 50px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7 (No tweak)" src="/files/4207/select-firefox-win7-open.png" style="height: 130px; width: 96px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7" src="/files/4205/select-firefox-win7-custom.png" style="height: 54px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7" src="/files/4203/select-firefox-win7-custom-open.png" style="height: 134px; width: 96px;"></td> + </tr> + <tr> + <td>Chrome 22 (Mac OSX)</td> + <td style="vertical-align: top; text-align: center;"><img alt="Select closed on Chrome on Mac OSX (No tweak)" src="/files/4183/select-chrome-macos.png" style="height: 21px; vertical-align: top; width: 84px;"></td> + <td style="vertical-align: top; text-align: center;"><img alt="Select open on Chrome on Mac OSX (No tweak)" src="/files/4181/select-chrome-macos-open.png" style="height: 81px; vertical-align: top; width: 121px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Mac OSX" src="/files/4179/select-chrome-macos-custom.png" style="height: 37px; vertical-align: top; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Mac OSX" src="/files/4177/select-chrome-macos-custom-open.png" style="height: 86px; vertical-align: top; width: 125px;"></td> + </tr> + <tr> + <td>Chrome 22 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7 (No tweak)" src="/files/4191/select-chrome-win7.png" style="height: 42px; vertical-align: top; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7 (No tweak)" src="/files/4189/select-chrome-win7-open.png" style="height: 93px; width: 84px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7" src="/files/4187/select-chrome-win7-custom.png" style="height: 42px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7" src="/files/4185/select-chrome-win7-custom-open.png" style="height: 93px; width: 95px;"></td> + </tr> + <tr> + <td>Opera 12.01 (Mac OSX)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX (No tweak)" src="/files/4225/select-opera-macos.png" style="height: 42px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX (No tweak)" src="/files/4223/select-opera-macos-open.png" style="height: 94px; width: 135px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX" src="/files/4221/select-opera-macos-custom.png" style="height: 39px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX" src="/files/4219/select-opera-macos-custom-open.png" style="height: 90px; width: 130px;"></td> + </tr> + <tr> + <td>Internet Explorer 9 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE9 on Windows 7" src="/files/4217/select-IE9-win7.png" style="height: 41px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE9 on Windows 7" src="/files/4215/select-IE9-win7-open.png" style="height: 78px; width: 100px;"></td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + </tr> + <tr> + <td>Internet Explorer 7 (Windows XP)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE7 on Windows XP" src="/files/4213/select-IE7-winxp.png" style="height: 23px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE7 on Windows XP" src="/files/4211/select-IE7-winxp-open.png" style="height: 74px; width: 82px;"></td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + </tr> + </tbody> +</table> + +<p>Ondanks het gebruik van de<code> -*-appearance</code> eigenschap zijn er nog enkele problemen:</p> + +<ul> + <li>De {{cssxref("padding")}} eigenschap wordt nog steeds niet gelijk behandeld in alle browsers.</li> + <li>De oude Internet Explorer laat geen soepele styling toe.</li> + <li>Firefox laat niet toe de pijl van het afrolmenu te stylen.</li> + <li>Bij het stylen van de {{HTMLElement("option")}} elementen binnen de afrollijst verschillen het gedrag van Chrome en Opera van systeem tot systeem.</li> +</ul> + +<p>En dit voorbeeld gaat slechts over drie CSS-eigenschappen. Wat als er nog meer eigenschappen zijn? Zoals het voorbeeld aantoont kan met CSS de voorstelling en het aanvoelen van deze widgets niet consequent toegepast worden. Maar een en ander kan wel aangepast worden als men aanvaardt dat er kleine verschillen zullen zijn tussen de ene browser en de andere en tussen het ene besturingssysteem en het andere.</p> + +<p>In het volgend artikel wordt nagegaan welke eigenschappen in aanmerking komen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> + +<h2 id="De_weg_naar_mooiere_formulieren_nuttige_bibliotheken_en_polyfills">De weg naar mooiere formulieren: nuttige bibliotheken en polyfills</h2> + +<p>Terwijl CSS zeer bruikbaar is voor keuzevakjes en keuzerondjes, is dat niet zo voor geavanceerde elementen. Ondanks dat enkele zaken mogelijk zijn met het {{HTMLElement("select")}} element, kan de bestandsdialoog helemaal niet aangepast worden. Hetzelfde geldt voor datumpicker, enz.</p> + +<p>Als volledige controle over formulierelementen gewenst is, zit er niets anders op dan JavaScript te gebruiken. In het artikel <a href="/en-US/docs/">Het maken van aangepaste widgets</a> wordt getoond hoe men zelf widgets kan aanpassen, maar er zijn ook enkele bibliotheken die van nut kunnen zijn:</p> + +<ul> + <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> is een kader dat formulieropmaak standaardiseert met CSS. Er is ook een optie voor extra mogelijkheden samen met jQuery.</li> + <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Formalize</a> is een uitbreiding van JavaScript (zoals jQuery, Dojo, YUI, enz.) die formulieren aanpast en normaliseert.</li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> is een standalone JavaScript methode die volledige websites kan aanpassen.</li> +</ul> + +<p>De volgende bibliotheken zijn niet uitsluitend voor formulieren, maar zijn zeer interessant:</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> biedt zeer interessante geavanceerde en aanpasbare widgets zoals datumpickers (met speciale aandacht voor toegankelijkheid).</li> + <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> is zeer nuttig bij het normaliseren van formulieren.</li> + <li><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> is een uitgebreid gereedschap dat HTML5 ondersteunt. Het gedeelte over webformulieren kan zeer nuttig zijn.</li> +</ul> + +<p>Houd er echter rekening mee dat de combinatie van CSS en JavaScript ook neveneffecten kan hebben. Bij gebruik van deze bibliotheken dient men steeds te beschikken over stylesheets waarop men kan terugvallen als het script niet werkt. Er zijn vele redenen waarom een script niet werkt, vooral in de mobiele wereld. En een website of een app moet er op voorzien zijn om deze gevallen op te vangen.</p> + +<h2 id="Besluit">Besluit</h2> + +<p>Ondanks dat er hiaten zijn bij het gebruik van CSS in HTML-formulieren, is er dikwijls toch wel een manier om deze te omzeilen. Er is geen algemene oplossing, maar de moderne browsers bieden altijd nieuwe mogelijkheden. Voor 't ogenblik is de beste oplossing te leren hoe de verschillende browsers CSS ondersteunen bij het maken van HTML-formulieren.</p> + +<p>In het volgend artikel wordt ingegaan op hoe de diverse HTML-formulierelementen de meest belangrijke CSS eigenschappen ondersteunen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">HTML5: Formulieren</a></li> + <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Nuttige ideeën en leidraden voor goed ontwerpen van webformulieren</a></li> +</ul> diff --git a/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html b/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html new file mode 100644 index 0000000000..ae4ec439c2 --- /dev/null +++ b/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html @@ -0,0 +1,964 @@ +--- +title: How to structure an HTML form +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +tags: + - Attribuut + - Element + - HTML + - voorbeeld +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<p>Formulieren zijn een van de meest complexe structuren in <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en <a href="/en-US/docs/Web/Accessibility">toegankelijk </a>formulier verkregen.</p> + +<p>Om functionaliteit aan HTML formulieren toe te voegen wordt voornamelijk Javascript gebruikt. Meer geavanceerde <span class="ng-binding"><span class="highlighted">technologie</span>ën zoals </span><a href="/en-US/docs/XForms" title="/en-US/docs/XForms">XForms</a>, thans voorbij gestreefd, worden helaas niet door alle browsers geïmplementeerd.</p> + +<p>In dit artikel wordt kennis gemaakt met alle HTML formulier elementen. Ook wordt de opbouw van een degelijk HTML formulier besproken om zo een vlot bruikbaar formulier te maken. In <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe eigen widgets voor formulieren te maken</a> wordt dieper ingegaan op het werken met widgets.</p> + +<h2 id="sect1"></h2> + +<h2 id="Globale_structuur">Globale structuur</h2> + +<h3 id="Het_<form>_element">Het <form> element</h3> + +<p>Het {{HTMLElement("form")}} element <span class="highlighted">definieert formeel een formulier en de attributen die het gedrag van dit formulier bepalen. Elk HTML formulier moet met deze elementen beginnen. Vele ondersteunende </span><span class="ng-binding"><span class="highlighted">technologie</span>ën</span><span class="highlighted"> of browser plug-ins herkennen </span> {{HTMLElement("form" )}} elementen en hebben speciale routines om er gebruik van te maken.</p> + +<div class="note"><strong>Nota:</strong> Het is strikt verboden om formulieren te nesten. Afhankelijk van de browser is hun gedrag dan onvoorspelbaar.</div> + +<p>Het {{HTMLElement("form")}} element ondersteunt de volgende attributen (allemaal optioneel):</p> + +<table> + <caption>Attributen van het {{HTMLElement("form")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td> + <td><code>UNKNOWN</code></td> + <td>Een lijst van karaktertekens die door een server wordt aanvaard. De defaultwaarde is de speciale string <code>UNKNOWN</code>. In dit geval worden de karakters gecodeerd zoals in het document dat het form element bevat.</td> + </tr> + <tr> + <td>{{htmlattrxref("action","form")}}</td> + <td></td> + <td>De URI van een webpagina die de informatie van het formulier verwerkt.</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete","form")}}</td> + <td><code>on</code></td> + <td>Geeft aan of de widgets in dit formulier automatisch aangevuld kunnen worden aan de defaultwaarden van de browser. Dit attribuut kan twee waarden aannemen: <code>on</code> of <code>off</code>.</td> + </tr> + <tr> + <td>{{htmlattrxref("enctype","form")}}</td> + <td><code>application/x-www-form-urlencoded</code></td> + <td>Als de waarde van het <code>method</code> attribuut <code>post</code> is, dan is dit attribuut het <a class="external" href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME type</a> van de inhoud van het formulier. Mogelijke waarden zijn: + <ul> + <li><code>application/x-www-form-</code></li> + <li><code>multipart/form-data</code>: Gebruik deze waarde bij gebruik van een {{HTMLElement("input")}} element waarvan het t<code>ype</code> attribuut <em>file</em> is.</li> + <li><code>text/plain</code></li> + </ul> + </td> + </tr> + <tr> + <td>{{htmlattrxref("method","form")}}</td> + <td><code>get</code></td> + <td> + <p>T</p> + + <p>De <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> methode die de browser gebruikt om het formulier te versturen. Dit attribuut kan één van twee waarden aannemen: <code>get</code> or <code>post</code>.</p> + </td> + </tr> + <tr> + <td>{{htmlattrxref("name","form")}}</td> + <td></td> + <td>De naam van het formulier. Hij moet uniek zijn tussen alle formulieren van een document en mag niet de lege string zijn. In de praktijk wordt hiervoor echter het <code>id</code> attribuut gebruikt.</td> + </tr> + <tr> + <td>{{htmlattrxref("novalidate","form")}}</td> + <td>(<em>false</em>)</td> + <td>Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.</td> + </tr> + <tr> + <td>{{htmlattrxref("target","form")}}</td> + <td><code>_self</code></td> + <td>Een naam of een sleutelwoord die aangeven waar het antwoord van de server moet getoond worden na verzending van het formulier. Dit kan bijvoorbeeld een {{HTMLElement("iframe")}}, een tab of een venster zijn. Volgende sleutelwoorden zijn mogelijke waarden voor dit attribuut: + <ul> + <li><code>_self</code>: Laad het antwoord in de huidige browser configuratie ({{HTMLElement("iframe")}}, tab, venster, enz.) .</li> + <li><code>_blank</code>: Laad het antwoord in een nieuwe browserconfiguratie.</li> + <li><code>_parent</code>: Laad het antwoord in de ouder van de huidige browser configuratie. Als er geen ouder is gedraagt deze optie zich als <code>_self</code>.</li> + <li><code>_top</code>: Laad het antwoord in de hoogste ouder van de huidig browser configuratie (dit is de browser configuratie die geen ouder heeft). Als er geen ouder is gedraagt deze optie zich als <code>_self</code>.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Het is altijd mogelijk een formulier widget te gebruiken buiten een {{HTMLElement("form")}} element maar dan is deze widget aan geen enkel formulier gebonden. Het is dan de gebruker die er voor verantwoordelijk is dat deze widget de gewenste uitwerking heeft, omdat die niets uit zichzelf zal doen. De widget moet dan aangepast worden met JavaScript.</p> + +<p>Technisch gezien is het HTML5 die het <code>form</code> attribuut invoert voor HTML formulieren. Het bindt dus expliciet een element met een formulier. Helaas ondersteunen niet alle browsers dit element goed genoeg om betrouwbaar te zijn.</p> + +<h3 id="De_<fieldset>_en_<legend>_elementen">De <fieldset> en <legend> elementen</h3> + +<p>Het {{HTMLElement("fieldset")}} element dient om widgets die dezelfde functie hebben te bundelen. Een {{HTMLElement("fieldset")}} element kan een {{HTMLElement("legend")}} element hebben. Het {{HTMLElement("legend")}} element beschrijft formeel het doel van het {{HTMLElement("fieldset")}} element. Veel ondersteunende technologieën herkennen het {{HTMLElement("legend")}} element als deel van het label van elke widget binnen het {{HTMLElement("fieldset")}} element. Zo lezen sommige schermlezers, zoals <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> of <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a>, eerst de legend voordat ze het label van een widget lezen.</p> + +<p>Hier volgt een klein voorbeeld:</p> + +<pre class="brush:html;"><form> + <fieldset> + <legend>Fruitsap grootte</legend> + <p> + <input type="radio" name="size" id="size_1" value="small" /> + <label for="size_1">Klein</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium" /> + <label for="size_2">Medium</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large" /> + <label for="size_3">Groot</label> + </p> + </fieldset> +</form></pre> + +<p>In dit voorbeeld zal een schermlezer voor de eerste widget "Fruitsap klein" lezen, voor de tweede "Fruitsap medium" en voor de derde "Fruitsap groot".</p> + +<p>Het gebruik van het {{HTMLElement("fieldset")}} element is zeer belangrijk. Keuzerondjes bijvoorbeeld moeten steeds binnen een {{HTMLElement("fieldset")}} element ondergebracht worden. In het algemeen kan het {{HTMLElement("fieldset")}} element ook een formulier in secties verdelen. Omwille van zijn invloed op ondersteunende technologieën is het {{HTMLElement("fieldset")}} element een sleutelelement om toegankelijke formulieren te maken. Het is echter aan de gebruiker om het doelmatig aan te wenden. Ga bij elk gebruik na hoe een schermlezer het element interpreteert en pas uw opzet daaraan aan.</p> + +<p>Het {{HTMLElement("fieldset")}} element ondersteunt volgende specifieke attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("fieldset")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("disabled","fieldset")}}</td> + <td>(<em>false</em>)</td> + <td>Als dit attribuut <code>true</code> is zijn de widgets van de formulieren die afhankelijk zijn van het huidige formulier (behalve deze van het eerste {{HTMLElement("legend") }} element) niet geactiveerd en dus niet bruikbaar. Deze zijn in de meeste browsers grijs gekleurd.</td> + </tr> + </tbody> +</table> + +<h3 id="Het_<label>_element">Het <label> element</h3> + +<p>Het {{HTMLElement("label")}} element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.</p> + +<p>Het {{HTMLElement("label")}} element heeft de volgende attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("label")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("for","label")}}</td> + <td></td> + <td>De ID van een widget met een label in hetzelfde document als het {{HTMLElement("label")}} element. Het label wordt toegepast op het eerste element waarvan de ID overeenkomt met de waarde van het <code>for</code> attribuut in het document.</td> + </tr> + </tbody> +</table> + +<p>Een {{HTMLElement("label")}} element is gebonden aan zijn widget door het <code>for</code> attribuut. Het <code>for</code> attribuut refereert naar het <code>id</code> attribuut van de overeenkomstige widget. Een widget kan genest zijn in zijn {{HTMLElement("label")}} element maar zelfs in dat geval is het aangeraden om het <code>for</code> attribuut te gebruiken omdat sommige ondersteunende technologieën niet overweg kunnen met expliciete relaties tussen labels en widgets.</p> + +<p>Maar zelfs met ondersteunende technologieën ter zijde, laat een formele aanduiding van een label voor een bepaalde widget in alle browsers de gebruiker toe de widget te activeren door op het label te klikken. Dit is vooral nuttig bij keuzerondjes en selectievakjes.</p> + +<pre class="brush:html;"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> + <label for="taste_1">I like cherry</label> + </p> + <p> + <label for="taste_2"> + <input type="checkbox" id="taste_2" name="taste_banana" value="1"> + I like banana + </label> + </p> +</form></pre> + +<p>Sommige ondersteunende technologieën kunnen het moeilijk hebben met meerdere labels voor één widget. In dit geval moet de widget genest worden in zijn eigen element om een toegankelijk formulier te maken.</p> + +<p>Bekijk volgend voorbeeld:</p> + +<pre class="brush:html;"><form> + <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> + + <!-- when the thing you are labeling is a descendant of the label, it is not necessary to use the 'for' attribute on the label. --> + <!-- So this: --> + <label> + <span>Name: </span> + <input type="text" name="username" required /> + <strong><abbr title="required">*</abbr></strong> + </label> + + <!-- is the same as this: --> + <div> + <label for="username">Name: </label> + <input id="username" type="text" name="username" required /> + <strong><abbr title="required">*</abbr></strong> + </div> + + <p> + <label for="birth"> <!-- so here, the 'for' attribute is redundant. --> + <span>Date of birth: </span> + <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em> + </label> + </p> +</form></pre> + +<p>In dit voorbeeld definieert de eerste paragraaf de vereiste elementen. Dit moet vooraan staan opdat de ondersteunende technologieën, zoals schermlezers, deze informatie hebben voordat ze het element zelf tegenkomen.</p> + +<p>Het eerste veld is vereist. Dus zijn label geeft zijn naam aan plus het feit dat het vereist is. Voor de tweede label is er is geen garantie dat de gebruiker te weten komt dat dit element vereist is.</p> + +<p>Het tweede form element werkt op dezelfde manier. Zo weet de gebruiker hoe hij de datum moet ingeven.</p> + +<h3 id="Het_<output>_element">Het <output> element</h3> + +<p>Dit element dient om het resultaat van een berekening in op te slaan. Het bepaalt formeel een relatie tussen de velden die informatie om te bewerken ontvangen en een element dat het resultaat zal tonen. Het wordt ook gebruikt door sommige ondersteunende technologieën om wijzigingen te detecteren en overeenkomstig te reageren.</p> + +<p>Het {{HTMLElement("output")}} element ondersteunt de volgende attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("output")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("for","output")}}</td> + <td></td> + <td>Een lijst van IDs, gescheiden door spaties, van andere elementen om aan te geven dat deze elementen deel uit maken van de invoerwaarden van de berekening (of die de berekening op enige andere wijze beïnvloeden.</td> + </tr> + </tbody> +</table> + +<h3 id="Gewone_HTML_structuren_gebruikt_bij_formulieren">Gewone HTML structuren gebruikt bij formulieren</h3> + +<p>Ondanks al het voorgaande blijven formulieren gewone HTML structuren. Dus alles over HTML is ook van toepassing op formulieren.</p> + +<p>Zoals in de voorbeelden te zien is worden widgets tussen {{HTMLElement("p")}} of {{HTMLElement("div")}} elementen geplaatst.</p> + +<p>Samen met het {{HTMLElement("fieldset")}} element worden ook HTML titels gebruikt en worden formulieren in secties verdeeld om ingewikkelde formulieren te maken.</p> + +<p>Ook worden vaak HTML lijsten gebruikt bij keuzevakjes en keuzerondjes.</p> + +<p>Ziehier een eenvoudig betalingsformulier:</p> + +<pre class="brush:html;"><form> + <h1>Payment form</h1> + <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> + + <section> + <h2>Contact information</h2> + + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="M." /> + Mister + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Ms." /> + Miss + </label> + </li> + </ul> + </fieldset> + + <p> + <label for="name"> + <span>Name: </span> + <input type="text" id="name" name="username" required /> + <strong><abbr title="required">*</abbr></strong> + </label> + </p> + + <p> + <label for="mail"> + <span>E-mail: </span> + <input type="email" id="mail" name="usermail" required /> + <strong><abbr title="required">*</abbr></strong> + </label> + </p> + </section> + + <section> + <h2>Payment information</h2> + + <p> + <label for="card"> + <span>Card type:</span> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </label> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <input type="text" id="number" name="cardnumber" required /> + <strong><abbr title="required">*</abbr></strong> + </label> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <input type="text" id="date" name="expiration" required /> + <strong><abbr title="required">*</abbr></strong> + <em>formated as mm/yy</em> + </label> + </p> + </section> + + <section> + <p> + <button>Validate the payment</button> + </p> + </section> +</form></pre> + +<p>Met behulp van CSS ziet het formulier er zo uit:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("A_payment_form",460,600, "", "HTML/Forms/How_to_structure_an_HTML_form/Example")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example">Probeer de broncode</a></td> + </tr> + </tbody> +</table> + +<h2 id="HTML_widgets">HTML widgets</h2> + +<p>Bij het construeren van een formulier zijn er widgets om informatie van de gebruiker te verkrijgen. In dit artikel wordt uitgelegd hoe deze widgets getoond worden. Het artikel: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">Basis widgets voor formulieren </a>gaat dieper in op het werken met widgets.</p> + +<h3 id="Het_<input>_element">Het <input> element</h3> + +<p>Dit is een speciaal element omdat het eigenlijk van alles kan zijn. Door eenvoudig zijn <code>type</code> attribuut te wijzigen kan het totaal iets anders worden. Om de zaken te vereenvoudigen kan het <code>type</code> attribuut ingedeeld worden in vier categorieën: eenregelige tekstvelden, elementen zonder tekstinvoer, elementen voor invoer van datum en tijd en knoppen. Hierdoor heeft het {{HTMLElement("input")}} element veel attributen maar het is niet altijd eenvoudig uit te maken welke relevant zijn en welke vereist zijn want dit is afhankelijk van het <code>type</code> attribuut.</p> + +<p>Dit wordt overzichtelijk gemaakt in volgende tabel. (Zie voor een volledige lijst van alle attributen de pagina betreffende het {{HTMLElement("input")}} element):</p> + +<table> + <thead> + <tr> + <th scope="col">Waarde van het type attribuut</th> + <th scope="col">Beschrijving</th> + <th scope="col">Vereiste attributen</th> + <th scope="col">Relevante attributen</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" style="text-align: center;">Eenregelige tekstvelden</th> + </tr> + <tr> + <td><code>text</code></td> + <td>Dit is het meest eenvoudige tekstveld. De waarde <em>text</em> voor het <code>type</code> attribuut is de defaultwaarde van dit attribuut. De waarde wordt gelezen zoals zij wordt ingegeven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td> + </tr> + <tr> + <td><code>email</code></td> + <td>Een veld dat alleen e-mailadressen toelaat.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <td><code>password</code></td> + <td>De waarde van dit tekstveld wordt verborgen.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <td><code>search</code></td> + <td>Een veld om zoekwoorden in te geven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td> + </tr> + <tr> + <td><code>tel</code></td> + <td>Een veld om een telefoonnummer in te geven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <td><code>url</code></td> + <td>Een veld om een absolute URL in te geven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Widgets zonder tekstingave</th> + </tr> + <tr> + <td><code>checkbox</code></td> + <td>Een keuzevakje.</td> + <td></td> + <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>color</code></td> + <td>Een widget om een kleur te kiezen.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>file</code></td> + <td>Een widget om een bestand te kiezen.</td> + <td></td> + <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>Een widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.</td> + <td></td> + <td></td> + </tr> + <tr> + <td><code>number</code></td> + <td>Een widget voor ingave van een getal met drijvende komma.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> + </tr> + <tr> + <td><code>radio</code></td> + <td>Een keuzerondje. Slechts één van een gegeven groep kan gekozen worden.</td> + <td></td> + <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>range</code></td> + <td>Een widget om een getal in te geven waarvan de waarde niet belangrijk is.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Widgetsvoor datum en tijd + <div class="note">Niet ondersteund.</div> + </th> + </tr> + <tr> + <td><code>date</code></td> + <td>Een veld om de datum in te geven (jaar, maand en dag, geen tijd). + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>Een veld om een datum en tijd in te geven (uur, minuut, seconde en fractie van een seconde) gebaseerd op de UTC tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>datetime-local</code></td> + <td>Een veld om een datum en tijd in te geven zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>month</code></td> + <td>Een veld voor ingave van maand en jaar, zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=446510">bug 446510</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>time</code></td> + <td>Een veld om een tijd in te geven zonder tijdzone. + <div class="note">Niet geïnstalleerd zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>week</code></td> + <td>Een veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Knoppen</th> + </tr> + <tr> + <td><code>button</code></td> + <td>Een knop zonder default gedrag.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>image</code></td> + <td>Knop om grafisch element te verzenden.</td> + <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td> + <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>reset</code></td> + <td>Een knop die de inhoud van het formulier terugzet naar de defaultwaarden.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>submit</code></td> + <td>Knop die het formulier verzendt.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + </tbody> +</table> + +<p>Als om een of andere reden de waarde van het <code>type</code> attribuut niet ondersteund wordt door de browser wordt het {{HTMLElement("input")}} element weergegeven alsof het <em>text</em> is. Dit verzekert dat het formulier blijft werken, zij het niet zo netjes.</p> + +<p>Ondanks dat het {{HTMLElement("input")}} element krachtig is, kan het niet alles doen. Daarvoor zijn er een aantal andere elementen.</p> + +<h3 id="Het_<textarea>_element">Het <textarea> element</h3> + +<p>Dit is een tekstveld met meerdere regels. Dit element werkt op dezelfde wijze als het tekstveld met één regel behalve dat het invoegen van regeleinden toelaat. Er zijn ook enkele extra attributen die toelaten tekst te verdelen over meerdere regels:</p> + +<table> + <caption>Attributen voor het {{HTMLElement("textarea")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("cols","textarea")}}</td> + <td><code>20</code></td> + <td>De zichtbare tekstbreedte in gemiddelde karakterbreedten.</td> + </tr> + <tr> + <td>{{htmlattrxref("rows","textarea")}}</td> + <td></td> + <td>Het aantal zichtbare regels in het tekstveld.</td> + </tr> + <tr> + <td>{{htmlattrxref("wrap","textarea")}}</td> + <td><code>soft</code></td> + <td>Geeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: <code>hard</code> of <code>soft</code></td> + </tr> + </tbody> +</table> + +<p>Het {{HTMLElement("textarea")}} element werkt enigszins anders dan het {{HTMLElement("input")}} element. Het {{HTMLElement("input")}} element is een zelfsluitend element. Dit betekent dat het geen afstammelingen kan hebben. Het {{ HTMLElement("textarea")}} element daarentegen is een gewoon element dat afstammelingen kan hebben met tekstinhoud.</p> + +<p>Dit heeft twee consequenties:</p> + +<ul> + <li>Om een defaultwaarde voor een {{HTMLElement("input")}} element te <span class="highlighted">definiëren moet het </span><code>value</code> attribuut gebruikt worden maar bij een {{HTMLElement("textarea")}} element moet de defaulttekst tussen de begin- en eindtag van het {{HTMLElement("textarea")}} element geplaatst worden.</li> + <li>Het {{HTMLElement("textarea")}} element accepteert alleen tekst. Dit betekent dat elke HTML inhoud in een {{HTMLElement("textarea")}} element als platte tekst wordt beschouwd..</li> +</ul> + +<p>In het volgende voorbeeld worden beide {{HTMLElement("textarea")}} elementen op dezelfde manier getoond:</p> + +<pre class="brush:html;"><form> + <p> + <label for="text_1">With regular HTML</label><br> + <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea> + </p> + <p> + <label for="text_2">With escaped HTML</label><br> + <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea> + </p> + <p> + <button>Send me</button> + </p> +</form></pre> + +<h3 id="De_<select>_<option>_en_<optgroup>_elementen">De <select>, <option>, en <optgroup> elementen</h3> + +<p>Het {{HTMLElement("select")}} element laat de gebruiker toe een waarde in te geven dan wel een waarde te kiezen uit een lijst (zogenaamde combo box). Een keuzevak laat toe een voorgedefinieerde waarde te kiezen. Een combo box kan lechts één keuze hebben ofwel meerdere keuzes. Dit wordt uitgelegd in het artikel: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis widges voor formulieren</a>.</p> + +<p>Elke waarde in het keuzevak wordt gedefinieerd met een {{HTMLElement("option")}} element en deze elementen kunnen gegroepeerd worden binnen {{HTMLElement("optgroup")}} elementen.</p> + +<p>Bijvoorbeeld:</p> + +<pre class="brush:html;"><form> + <p> + <label for="myFruit">Pick a fruit</label> + <select id="myFruit" name="fruit"> + <!-- There is a trick here you think you'll pick + a banana but you'll eat an orange >:-) --> + <option value="orange">Banana</option> + <option>Cherry</option> + <optgroup label="berries"> + <option>Blueberry</option> + <option>Raspberry</option> + <option>Strawberry</option> + </optgroup> + </select> + </p> +</form></pre> + +<p>Als een {{HTMLElement("option")}} element een <code>value</code> attribuut heeft wordt de waarde van dit attribuut meegestuurd als het formulier wordt verzonden. Als er geen attribuut is opgegeven is het de inhoud van het {{HTMLElement("option")}} element die gebruikt wordt als de waarde van het keuzevak.</p> + +<p>Bij het {{HTMLElement("optgroup")}} element wordt het <code>label</code> attribuut getoond voor de waarden. Dit ziet er uit als een keuzemogelijkheid maar dit label kan niet geselecteerd worden.</p> + +<table> + <caption>Attributen van het {{HTMLElement("option")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("label","option")}}</td> + <td></td> + <td>Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het <code>label</code> attribuut niet gedefinieerd is.</td> + </tr> + <tr> + <td>{{htmlattrxref("selected","option")}}</td> + <td>(<em>false</em>)</td> + <td>Geeft aan dat de optie geselecteerd is.</td> + </tr> + </tbody> +</table> + +<table> + <caption>Attributen van het {{HTMLElement("optgroup")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("label","optgroup")}}</td> + <td></td> + <td>De naam van de groep van opties. <strong>Dit attribuut is verplicht.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="Het_<datalist>_element">Het <datalist> element</h3> + +<p>Dit is een uitbreiding van de widgets door middel van vooringestelde waarden voor bepaalde widgets. Het meest bekende voorbeeld is de auto aanvulling voor tekstvelden. De beschikbare waarden worden door {{HTMLElement("option")}} elementen binnen een {{HTMLElement("datalist")}} element geplaatst.</p> + +<p>Om een widget aan een {{HTMLElement("datalist")}} element te binden wordt het <code>list</code> attribuut van de widget gebruikt. Deze vermeldt het <code>id</code> attribuut van het {{HTMLElement("datalist")}} element dat gebruikt moet worden.</p> + +<p>Het {{HTMLElement("datalist")}} element is nog maar vrij recent aan HTML formulieren toegevoegd. Er zijn dus nog browsers die het niet ondersteunen. Om toch een werkbaar formulier te hebben op deze browsers bestaat er een kleine truk:</p> + +<pre class="brush:html;"><form> + <p> + <label for="myFruit">What is your favorite fruit?</label> + <input type="text" id="myFruit" name="fruit" list="fruitList" /> + + <datalist id="fruitList"> + <label for="suggestion">or pick a fruit</label> + <select id="suggestion" name="altFruit"> + <option value="banana">Banana</option> + <option value="cherry">Cherry</option> + <option value="strawberry">Strawberry</option> + </select> + </datalist> + </p> +</form></pre> + +<p>Enerzijds negeren de browsers die het {{HTMLElement("datalist")}} element begrijpen de elementen die geen {{HTMLElement("option")}} elementen zijn en werken zoals verwacht. Anderzijds tonen de browsers die het {{HTMLElement("datalist")}} element niet begrijpen het label en het selectievakje. Natuurlijk zijn er andere methoden om het niet begrijpen van het {{HTMLElement("datalist")}} element op te lossen maar die vereisen het gebruik van van JavaScript, wat niet altijd de juiste oplossing is.</p> + +<table> + <tbody> + <tr> + <th scope="row">Safari 6</th> + <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> + </tr> + <tr> + <th scope="row">Firefox 18</th> + <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> + </tr> + </tbody> +</table> + +<h3 id="De_<meter>_en_<progress>_elementen">De <meter> en <progress> elementen</h3> + +<p>Deze twee elementen geven een grafische voorstelling van een numerische waarde. Het verschil tussen beide is louter semantisch:</p> + +<ul> + <li>Het {{HTMLElement("meter")}} element geeft een statische waarde weer tussen een minimum en een maximumwaarde.</li> + <li>Het {{HTMLElement("progress")}} element geeft een waarde weer die verandert met de tijd tussen een minimum en een maximum waarde. De verandering van de waarde (en daardoor ook de wijziging van de voortuitgangsindicator) moet door middel van JavaScript gebeuren omdat het element geen enkel mechanisme heeft om dat zelf te doen.</li> +</ul> + +<p>Hierdoor hebben deze elementen een specifieke set attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("meter")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("min","meter")}}</td> + <td>0</td> + <td>De ondergrens van de numerieke waarde van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("max","meter")}}</td> + <td>1</td> + <td>De bovengrens van de numerieke waarde van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("low","meter")}}</td> + <td>the <code>min</code> value</td> + <td>De hoogste numerieke waarde van de ondergrens van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("high","meter")}}</td> + <td>the <code>max</code> value</td> + <td>De laagste numerieke waarde van de bovengrens van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("optimum","meter")}}</td> + <td></td> + <td>De optimale numerieke waarde.</td> + </tr> + </tbody> +</table> + +<table> + <caption>Attributen van het {{HTMLElement("progress")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("max","progress")}}</td> + <td></td> + <td>Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het {{HTMLElement("progress")}} element.</td> + </tr> + </tbody> +</table> + +<h3 id="Het_<button>_element">Het <button> element</h3> + +<p>Een {{HTMLElement("button")}} element toont een knop. Een knop kan drie functies hebben afhankelijk van het <code>type</code> attribuut:</p> + +<ul> + <li>Een verzendknop stuurt de formuliergegevens naar de webpagina die gedefinieerd wordt door het <code>action</code> attribuut van het {{HTMLElement("form")}} element.</li> + <li>Een herstelknop stelt alle formulierwidgets onmiddellijk in op hun defaultwaarden. Dit wordt tegenwoordig als een minder goede werkwijze beschouwd omdat de gebruiker gemakkelijk zijn werk kan verliezen.</li> + <li>Een blanko knop doet niets uit zichzelf en de gebruiker moet door middel van JavaScript er een fuctie aan geven.</li> +</ul> + +<table> + <caption>Attributen van het {{HTMLElement("button")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("type","button")}}</td> + <td><code>submit</code></td> + <td>Het type knop. Mogelijke waarden zijn: <code>button</code>, <code>reset</code>, or <code>submit.</code></td> + </tr> + <tr> + <td>{{htmlattrxref("formaction","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>action</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formenctype","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>enctype</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formmethod","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>method</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formnovalidate","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>novalidate</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formtarget","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>target</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + </tbody> +</table> + +<p>Op technisch vlak is er haast geen onderscheid tussen een knop gedefinieerd door het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element. Het enig merkbaar verschil is het label van de knop zelf. Bij het {{HTMLElement("input")}} element kan het label slechts uit alfanumerische tekens bestaan terwijl bij een {{HTMLElement("button")}} element het label HTML kan zijn. Zijn stijl kan dan ook overeenkomstig aangepast zijn.</p> + +<div class="note"><strong>Nota:</strong> Omwille van historische redenen werd het {{HTMLElement("button")}} element niet vaak gebruikt en ontwikkelaars gaven de voorkeur aan knoppen gemaakt met het {{HTMLElement("input")}} element. Dit kwam door een fout in oudere versies van Internet Explorer (IE). Bij gebruik van een <code>name</code> en een <code>value</code> attribuut in een {{HTMLElement("button")}} element in IE6 en IE7 werd niet de inhoud van het <code>value</code> attribuut verzonden maar wel de inhoud van de knop zelf. Dit is hersteld sinds IE8 zodat het niet langer nodig is om het {{HTMLElement("button")}} element te vermijden.</div> + +<h3 id="Basis_attributen">Basis attributen</h3> + +<p>Veel elementen om formulieren te maken hebben specifieke attributen. Maar er zijn attributen die gemeenschappelijk zijn voor alle elementen. Hier volgt een lijst van deze attributen:</p> + +<table> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>autofocus</code></td> + <td>(<em>false</em>)</td> + <td>Bepaalt of het element automatisch de focus krijgt waneer de pagina geladen wordt. Slechts één element in een document kan de focus krijgen. De gebruiker kan natuurlijk altijd nog werken in een ander element.</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>(<em>false</em>)</td> + <td>Dit attribuut belet de gebruiker om het element te gebruiken. Als dit attribuut niet gespecifieerd is, erft het element de instellingen van het element waarin het vervat is. Bijvoorbeeld in het {{HTMLElement("fieldset")}} element: als er geen omvattend element is met het <code>disabled</code> attribuut ingesteld dan is het element actief.</td> + </tr> + <tr> + <td><code>form</code></td> + <td></td> + <td>Het formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het <code>id</code> attribuut zijn van een {{HTMLElement("form")}} element in hetzelfde document. Theoretisch kan een widget buiten een formulier gebruikt worden maar er is geen enkele browser die dit ondersteunt.</td> + </tr> + <tr> + <td><code>name</code></td> + <td></td> + <td>De naam van het element. Deze wordt mee verzonden met de gegevens.</td> + </tr> + <tr> + <td><code>value</code></td> + <td></td> + <td>De <span class="ng-binding">initiële</span> waarde van het element.</td> + </tr> + </tbody> +</table> + +<h2 id="Het_gebruik_van_ARIA_om_HTML_formulieren_te_maken">Het gebruik van <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> om HTML formulieren te maken</h2> + +<p><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C Candidate Recommendation</a> en voegt meer mogelijkheden toe aan HTML om betere internettoepassingen te maken, inclusief formulieren. In "<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste formulierwidgets maken</a>" wordt dieper in gegaan op het maken van formulieren maar hier zijn alvast enkele basisinstructies.</p> + +<p>De support van ARIA en ondersteunende technologieën door browsers is ver van perfect maar het wordt steeds beter. Als een browser een ARIA attribuut tegenkomt moet hij informatie naar de toegangslaag van het besturingssysteem sturen. Dit loopt niet altijd goed voor alle browsers over verschillende platformen. De ondersteunende technologieën van hun kant moeten verbinding maken met de toegangslaag van de besturingssysteem om de informatie van de browsers te verkrijgen. Niet alle applicaties doen dat correct. Dus het gebruik van ARIA betekent niet dat een webtoepassing correct zal werken maar men doet alleszins zijn best. Hoe dan ook, ARIA is op het ogenblik de beste technologie en iets is beter dan niets.</p> + +<p>De documentatie over ARIA is hier te vinden: <a href="/en-US/docs/Accessibility/ARIA/forms" title="/en-US/docs/Accessibility/ARIA/forms">lees hier de documentaie over ARIA</a>.</p> + +<h3 id="Het_aria-labelledby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> attribuut</h3> + +<p>Dit attribuut laat toe een label aan te maken zonder het {{HTMLElement("label")}} element. Het <code>aria-labelledby</code> attribuut wordt geplaatst bij de widget en refereert naar het <code>id</code> attribuut van het element dat als label moet gebruikt worden.</p> + +<pre class="brush:html;"><form> + <p id="fruitLabel">What's your favorite fruit</p> + <p> + <input type="text" name="fruit" aria-labelledby="fruitLabel"> + </p> +</form></pre> + +<p>Eigenlijk is het het tegenovergetelde van het <code>for</code> attribuut van het {{HTMLElement("label")}} element. Bij het <code>for</code> attribuut wordt naar de <code>id</code> van de widget gerefereerd maar bij het <code>aria-labelledby</code> attribuut wordt gerefereerd naar de <code>id</code> van het label.</p> + +<h3 id="Het_aria-describedby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a> attribuut</h3> + +<p>Is eigenlijk gelijk aan het <code>aria-labelledby</code> attribuut. Het verschil is eerder semantisch. Een label definieert de essentie van een object terwijl een beschrijving meer informatie verschaft dan de gebruiker op dat ogenblijk nodig heeft. Dus het <code>aria-describedby</code> attribuut wordt niet aangeraden voor formulieren. Hier wordt beter het <code>aria-labelledby</code> attribuut gebruikt tenzij men bredere informatie over het formulier wil geven. Echter wordt het juist aanbevolen om <code>aria-describedby</code> wel te gebruiken om invoervelden te omschrijven (naast het <code>label</code> element). Zoals hoelang een wachtwoord moet zijn (zie voorbeeld).</p> + +<pre class="brush: html"><form> + <label for="pw"> + Password + </label> + <input type="password" id="pw" aria-describedby="pw_desc"> + <p id="pw_desc"> + Please enter at least 12 characters. + </p> +</form></pre> + +<h3 id="Het_aria-label_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"><code>aria-label</code></a> attribuut</h3> + +<p>Dit attribuut wordt gebruikt als er in de DOM geen expliciet label voor een bepaalde widget bestaat. Het attribuut wordt gebruikt door ondersteunende technologieën wanneer er in de DOM geen verwijzing is naar de widget. </p> + +<pre class="brush:html;"><form> + <p> + <input type="search" name="q" aria-label="Search" /> + <input type="submit" value="Go" /> + </p> +</form></pre> + +<h3 id="Het_role_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribuut</h3> + +<p>Dit is het voornaamste ARIA attribuut. Het geeft specifieke semantische informatie aan ondersteunende technologieën voor een bepaald HTML element. Er zijn veel <code>role</code> attributen beschikbaar, sommige speciaal voor formulieren.</p> + +<p>ARIA probeert niet alleen semantische informatie te geven voor widgets die niet voor handen zijn in HTML maar ook voor elementen die wel bestaan in HTML.</p> + +<p>De <code>role </code>attributen voor formulieren zijn:</p> + +<ul> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li>Radio</li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> +</ul> + +<p>Er zijn ook samengestelde <code>role</code> attributen:</p> + +<ul> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a></li> + <li>Radiogroup</li> +</ul> + +<p>En <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques">er zijn er nog meer</a>. ARIA is een zeer grote verzameling. Er kennis van nemen laat toe mooie formulieren te maken, veel beter dan met HTML.</p> + +<h2 id="Conclusie">Conclusie</h2> + +<p>Met deze kennis kunnen volledige HTML formulieren gemaakt worden. Volgend artikel gaat in detail over het maken van formulieren: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis formulier elementen</a>.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">Ter zijde: Zinvolle formulieren: Een controlelijst voor het maken van formulieren</a></li> +</ul> diff --git a/files/nl/learn/html/forms/index.html b/files/nl/learn/html/forms/index.html new file mode 100644 index 0000000000..13853c2ccf --- /dev/null +++ b/files/nl/learn/html/forms/index.html @@ -0,0 +1,358 @@ +--- +title: HTML forms guide +slug: Learn/HTML/Forms +tags: + - Featured + - Forms + - Guide + - HTML + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +<p><span class="seoSummary">This guide is a series of articles that will help you master HTML forms.</span> HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p> + +<h2 id="Articles">Articles</h2> + +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first HTML form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>How to structure an HTML form</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>The native form widgets</span></a></li> + <li>CSS with HTML forms + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending <s>and retrieving</s> form data</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using the FormData object</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> +</ol> + +<h2 id="HTML_Documentation">HTML Documentation</h2> + +<h3 id="HTML_Elements">HTML Elements</h3> + +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: courier new;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other form elements.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: courier new;">fieldset</span> is used to group several form elements within a form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enables a user to submit information to a web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> + +<h3 id="HTML_Attributes">HTML Attributes</h3> + +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form data when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belong to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited or not.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("img") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped or not.</td> + </tr> + </tbody> +</table> + +<h3 id="Normative_reference">Normative reference</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Specification (Forms)</a></li> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> diff --git a/files/nl/learn/html/forms/styling_html_forms/index.html b/files/nl/learn/html/forms/styling_html_forms/index.html new file mode 100644 index 0000000000..f6c3cda07c --- /dev/null +++ b/files/nl/learn/html/forms/styling_html_forms/index.html @@ -0,0 +1,344 @@ +--- +title: Styling HTML forms +slug: Learn/HTML/Forms/Styling_HTML_forms +tags: + - CSS + - Formulieren + - HTML +translation_of: Learn/Forms/Styling_web_forms +--- +<p>In dit artikel leert de gebruiker het om <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>-formulieren vorm te geven met gebruik van <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>. Dit is echter niet zo eenvoudig. Om historische en technische redenen gaan formulierelementen (widgets) en CSS niet zo goed samen. Daarom maaken veel ontwikkelaars hun eigen HTML widgets om de vormgeving van formulieren in eigen hand te houden. Dankzij de moderne browsers hebben webontwikkelaars meer en meer controle over het ontwerp van formulierelementen.</p> + +<h2 id="Waarom_is_vormgeving_van_formulieren_met_CSS_zo_ingewikkeld">Waarom is vormgeving van formulieren met CSS zo ingewikkeld?</h2> + +<p>In de begindagen van het Web, rond 1995, werden widgets toegevoegd aan de HTML in <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">de HTML 2 specificatie</a>. Door de complexheid van widgets vertrouwden de ontwikkelaars op het onderliggende besturingssysteem.</p> + +<p>Een aantal jaren later werd CSS ontwikkeld om vormgeving en inhoud van elkaar te scheiden. In de begintijd van CSS had de vormgeving van formulieren geen prioriteit. </p> + +<p>Omdat gebruikers gewend waren geraakt aan de gebruikelijke vormgeving van formulieren, zijn browser fabrikanten terughoudend in het aanpasbaar maken van formulierelementen. Tot op de dag van vandaag is het bijzonder moeilijk om een eigen vormgeving te maken voor alle widgets.</p> + +<p>Tot op heden is er nog geen enkele browser die CSS 2.1 volledig geïmplementeerd heeft. In de loop van de tijd hebben de browser fabrikanten hun ondersteuning voor CSS echter verbeterd en ondanks vele problemen kan CSS nu gebruikt worden om <a href="/en-US/docs/">HTML formulieren</a> vorm te geven.</p> + +<h3 id="Niet_alle_widgets_worden_door_CSS_gelijk_behandeld">Niet alle widgets worden door CSS gelijk behandeld</h3> + +<p>Er zijn nog steeds problemen met CSS-formulieren. Deze kunnen ingedeeld worden in drie categorieën</p> + +<h4 id="The_good">"The good"</h4> + +<p>Enkele elementen leveren geen problemen op. Het zijn de volgende structurele elementen:</p> + +<ol> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("output")}}</li> +</ol> + +<p>Ook de tekstvelden (zowel enkellijnige als meerlijnige) vallen hieronder en de knoppen.</p> + +<h4 id="The_bad">"The bad"</h4> + +<p>Sommige elementen vereisen ingewikkelde trucs waarbij soms gespecialiseerde kennis van CSS3 nodig is.</p> + +<p>Zoals bijvoorbeeld het {{HTMLElement("legend")}} element. Het is moeilijk dit te positioneren over verschillende platformen. Keuzerondjes en keuzevakjes kunnen ook moeilijk rechtstreeks aangepast worden. Dank zij CSS3 is daar nochtans wel een oplossing voor. Het {{htmlattrxref("placeholder", "input")}} element kan niet rechtstreeks aangepast worden maar de browsers die het ondersteunen hebben hun eigen CSS pseudo-elementen of pseudoklassen die toelaten het aan te passen. Deze worden behandeld in het artikel <a href="/en-US/docs/">Geavanceerde stijlen voor HTML-formulieren.</a></p> + +<h4 id="The_ugly">"The ugly"</h4> + +<p>Sommige elementen kunnen gewoon niet aangepast worden met CSS. Het gaat hier om geavanceerde elementen zoals bereik, kleur en datumvensters. Ook keuzelijsten met hun elementen {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} en {{HTMLElement("datalist")}} vallen in deze categorie.</p> + +<p>Het probleem met deze elementen is dat zij een complexe structuur hebben en CSS is niet krachtig genoeg om alle subtiele onderdelen aan te sturen. Om deze elementen aan te passen moet JavaScript gebruikt worden om een DOM op te stellen dat kan worden aangepast. Dit wordt duidelijk gemaakt in het artikel <a href="/en-US/docs/">Hoe eigen formulier-elementen aanmaken.</a></p> + +<h2 id="Basisprincipe">Basisprincipe</h2> + +<p><a href="/en-US/docs/">Elementen die gemakkelijk aan te passen zijn </a>met CSS leveren geen enkel probleem op omdat ze zich meestal gedragen als elk ander HTML-element. Sommige browsers hebben echter hun eigen stijl en kunnen een beetje afwijken zodat er enkele trucs nodig zijn.</p> + +<h3 id="Zoekvelden">Zoekvelden</h3> + +<p>Zoekvensters zijn de enige tekstvelden die soms wat moeilijker aan te sturen zijn. Bij browsers die gebaseerd zijn op Webkit (Chrome, Safari, e.d.) moeten de tekstvelden aangepast worden met de <code>-webkit-appearance</code> eigenschap. Deze eigenschap wordt besproken in het artikel: <a href="/en-US/docs/">Geavanceerde styling voor HTML-formulieren.</a></p> + +<h4 id="Voorbeeld">Voorbeeld</h4> + +<pre class="brush: html"><form> + <input type="search"> +</form> +</pre> + +<pre class="brush: css">input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; +}</pre> + +<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> + +<p>Zoals te zien is op de schermafdruk van Chrome hebben beide velden een rand. Maar de bovenste is gemaakt zonder de <code>-webkit-appearance</code> eigenschap en de onderste met de <code>-webkit-appearance: none</code>. Het verschil is duidelijk.</p> + +<h3 id="Lettertypen_en_tekst">Lettertypen en tekst</h3> + +<p>CSS lettertypen en teksteigenschappen kunnen gemakkelijk gebruikt worden bij alle widgets (en ja, ook {{cssxref("@font-face")}} kan gebruikt worden bij formulierelementen). Maar de browsers zijn niet altijd consequent. Sommige elementen erven niet altijd per definitie {{cssxref("font-family")}} and {{cssxref("font-size")}} van hun ouderelementen maar gebruiken de instelling van het systeem. Om de stijl van een formulier doen overeen te komen met de rest van de inhoud kunnen volgende regels worden toegevoegd aan het stijlblad:</p> + +<pre class="brush: css">button, input, select, textarea { + font-family : inherit; + font-size : 100%; +}</pre> + +<p>De schermafdruk hieronder toont het verschil. Links staat de systeemeigen weergave in Firefox en Mac OS X. Rechts de weregave met bovenstaande aanpassingen.</p> + +<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> + +<p>Er wordt veel gediscussieerd over wat het beste uitzicht is. Het is aan u als ontwerper van uw website om te kiezen.</p> + +<h3 id="Kadermodel">Kadermodel</h3> + +<p>Alle tekstvelden ondersteunen volledig elke eigenschap met betrekking tot het CSS kadermodel: {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} en {{cssxref("border")}}. Maar zoals hierboven steunen de browsers in eerste instantie op standaard instellingen van hun systeem om deze elementen te tonen. Het is weer aan de ontwikkelaar hoe ze opgenomen worden in de inhoud. Als vast gehouden wordt aan het standaard uitzicht van de widgets zijn er wel enkele ingrepen nodig om ze even groot te maken.</p> + +<p><strong>Dit komt doordat elk element zijn eigen regels heeft wat betreft rand, uitvulling en marge. </strong>Dus om elk element dezelfde grootte te geven moet de {{cssxref("box-sizing")}} eigenschap gebruikt worden:</p> + +<pre class="brush: css">input, textarea, select, button { + width : 150px; + margin: 0; + + -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */ + -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */ + box-sizing: border-box; +}</pre> + +<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> + +<p>In de schermafdruk hierboven wordt links de weergave getoond zonder {{cssxref("box-sizing")}}, terwijl rechts deze eigenschap is toegepast met de waarde <code>border-box</code>. Zie hoe ze allemaal dezelfde ruimte innemen ondanks de systeemeigen instellingen.</p> + +<h3 id="Positionering">Positionering</h3> + +<p>Positionering van HTML formulierelementen is over het algemeen geen probleem. Twee elementen echter vragen echter speciale aandacht:</p> + +<h4 id="legend">legend</h4> + +<p>Het {{HTMLElement("legend")}} element is ok wat betreft vormgeving maar niet wat betreft plaatsing. In elke browser wordt het {{HTMLElement("legend")}} element geplaatst op de bovenrand van het {{HTMLElement("fieldset")}} element. Het is onmogelijk het ergens midden in de HTML-code te plaatsen. Het kan echter absoluut of relatief geplaatst worden met de {{cssxref("position")}} eigenschap.</p> + +<p>Om reden van toegankelijkheid is het {{HTMLElement("legend")}} element zeer belangrijk. Het wordt besproken bij ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën als onderdeel van het label van elk formulierelement binnen de fieldset. Meestal wordt er ook een titel in verwerkt en dan verborgen op een toegankelijke manier zoals hierna:</span></p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><fieldset> + <legend>Hi!</legend> + <h1>Hello</h1> +</fieldset></pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css">legend { + width: 1px; + height: 1px; + overflow: hidden; +}</pre> + +<h4 id="textarea">textarea</h4> + +<p>Alle browsers beschouwen standaard het {{HTMLElement("textarea")}} element als een in-lijn blok uitgelijnd op de onderkant van de tekst. Dit is slechts zelden wat gewenst is. Om over te schakelen van in-lijn blok naar blok kan de {{cssxref("display")}} eigenschap gebruikt worden en door de vertkale uitlijning aan te passen:</p> + +<pre class="brush: css">textarea { + vertical-align: top; +}</pre> + +<h2 id="Voorbeeld_2">Voorbeeld</h2> + +<p>Hier volgt een voorbeeld van hoe de stijl van een HTML-formulier wordt aangepast. Hierdoor wordt al het voorgaande duidelijker. We bouwen een "postkaart" contactformulier:</p> + +<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p> + +<h3 id="HTML_2">HTML</h3> + +<p>De HTML-code verschilt weinig van het voorbeeld uit <a href="/en-US/docs/">het eerste artikelvan deze gids</a>. Er zijn slechts een aantal ID's en een titel toegevoegd.</p> + +<pre class="brush: html"><form> + <h1>to: Mozilla</h1> + + <div id="from"> + <label for="name">from:</label> + <input type="text" id="name" name="user_name"> + </div> + + <div id="reply"> + <label for="mail">reply:</label> + <input type="email" id="mail" name="user_email"> + </div> + + <div id="message"> + <label for="msg">Your message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<h3 id="CSS_2">CSS</h3> + +<p>Nu begint het leuke. Voor het coderen moeten drie elementen worden toegevoegd:</p> + +<ol> + <li>De <a href="/en-US/docs/">achtergrond </a>van de postkaart</li> + <li>Een schrijfmachine lettertype: <a href="/en-US/docs/">De "Secret Typewriter" van fontsquirrel.com</a></li> + <li>Een handschrift lettertype: <a href="/en-US/docs/">Het "Jounal" van frontsquirrel.com</a></li> +</ol> + +<p>Nu de code. Eerst bereiden we een achtergrond voor met de {{cssxref("@font-face")}} regels en alle basiselementen {{HTMLElement("body")}} en {{HTMLElement("form")}}.</p> + +<pre class="brush: css">@font-face{ + font-family : "handwriting"; + + src : url('journal.eot'); + src : url('journal.eot?') format('eot'), + url('journal.woff') format('woff'), + url('journal.ttf') format('truetype'); +} + +@font-face{ + font-family : "typewriter"; + + src : url('veteran_typewriter.eot'); + src : url('veteran_typewriter.eot?') format('eot'), + url('veteran_typewriter.woff') format('woff'), + url('veteran_typewriter.ttf') format('truetype'); +} + +body { + font : 21px sans-serif; + + padding : 2em; + margin : 0; + + background : #222; +} + +form { + position: relative; + + width : 740px; + height : 498px; + margin : 0 auto; + + background: #FFF url(background.jpg); +}</pre> + +<p>Dan worden de elementen en de titel geplaatst.</p> + +<pre class="brush: css">h1 { + position : absolute; + left : 415px; + top : 185px; + + font : 1em "typewriter", sans-serif; +} + +#from { + position: absolute; + left : 398px; + top : 235px; +} + +#reply { + position: absolute; + left : 390px; + top : 285px; +} + +#message { + position: absolute; + left : 20px; + top : 70px; +}</pre> + +<p>Nu de elementen zelf. Eerst het lettertype van het {{HTMLElement("label")}} element:</p> + +<pre class="brush: css">label { + font : .8em "typewriter", sans-serif; +}</pre> + +<p>De tekstvelden moeten enkele gezamenlijke regels krijgen. Hiertoe worden de eigenschappen {{cssxref("border","borders")}} en {{cssxref("background","backgrounds")}} verwijderd en {{cssxref("padding")}} en {{cssxref("margin")}} worden aangepast:</p> + +<pre class="brush: css">input, textarea { + font : .9em/1.5em "handwriting", sans-serif; + + border : none; + padding : 0 10px; + margin : 0; + width : 240px; + + background: none; +}</pre> + +<p>Als één van de velden de focus krijgen maken we ze grijs met een doorzichtige achtergrond. Om de standaard focus van sommige browsers op te heffen wordt de {{cssxref("outline")}} eigenschap wordt gebruikt.</p> + +<pre class="brush: css">input:focus, textarea:focus { + background : rgba(0,0,0,.1); + border-radius: 5px; + outline : none; +}</pre> + +<p>De éénregelige en meerregelige tekstvelden moeten nog in overeenstemming gebracht worden, want standaard zien ze er verschillend uit.</p> + +<p>Voor Internet Explorer moet het éénregelig tekstveld worden aangepast omdat Internet Explorer de hoogte van de velden niet aanpast aan de natuurlijke hoogte van het lettertype (hetgeen de andere browsers wel doen). Daarom kennen we expliciet een hoogte toe aan het veld:</p> + +<pre class="brush: css">input { + height: 2.5em; /* for IE */ + vertical-align: middle; /* This is optional but it makes legacy IEs look better */ +}</pre> + +<p>Standaard worden {{HTMLElement("textarea")}} elementen weergegeven als blok. Twee belangrijke eigenschappen hier zijn {{cssxref("resize")}} en {{cssxref("overflow")}}. Omdat we willen dat de gebruiker de afmetingen niet kan wijzigen passen we de <code>resize</code> eigenschap toe. De {{cssxref("overflow")}} eigenschap wordt gebruikt om het veld consistent te maken over alle browsers. Sommige browsers gebruiken standaard <code>auto</code>, terwijl andere <code>scroll</code> gebruiken. In dit geval is het beter <code>auto</code> te gebruiken.</p> + +<pre class="brush: css">textarea { + display : block; + + padding : 10px; + margin : 10px 0 0 -10px; + width : 340px; + height : 360px; + + resize : none; + overflow: auto; +}</pre> + +<p>Het {{HTMLElement("button")}} element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief <a href="/en-US/docs/">pseudo-elementen!</a></p> + +<pre class="brush: css">button { + position : absolute; + left : 440px; + top : 360px; + + padding : 5px; + + font : bold .6em sans-serif; + border : 2px solid #333; + border-radius: 5px; + background : none; + + cursor : pointer; + +-webkit-transform: rotate(-1.5deg); + -moz-transform: rotate(-1.5deg); + -ms-transform: rotate(-1.5deg); + -o-transform: rotate(-1.5deg); + transform: rotate(-1.5deg); +} + +button:after { + content: " >>>"; +} + +button:hover, +button:focus { + outline : none; + background: #000; + color : #FFF; +}</pre> + +<p>Dat is alles. Klaar om uit te proberen!</p> + +<h2 id="Besluit">Besluit</h2> + +<p>Uit bovenstaande blijkt dat bij het opstellen van formulieren met tekstvelden en knoppen, het vrij gemakkelijk is CSS te gebruiken. Zie het artikel <a href="/en-US/docs/">normalizeer.css project </a>voor meer CSS-trucs in verband met het werken met formulierwidgets.</p> + +<p><a href="/en-US/docs/">In het volgend artikel </a>wordt ingegaan op formulierelementen die vallen in de categorieën "bad" en "ugly".</p> diff --git a/files/nl/learn/html/forms/the_native_form_widgets/index.html b/files/nl/learn/html/forms/the_native_form_widgets/index.html new file mode 100644 index 0000000000..844466956e --- /dev/null +++ b/files/nl/learn/html/forms/the_native_form_widgets/index.html @@ -0,0 +1,1448 @@ +--- +title: The native form widgets +slug: Learn/HTML/Forms/The_native_form_widgets +tags: + - Formulier + - HTML + - HTML5 + - voorbeeld +translation_of: Learn/Forms/Basic_native_form_controls +--- +<p><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML formulieren</a> bestaan uit widgets. Widgets zijn besturingselementen die door elke browser ondersteunt worden. In dit artikel wordt besproken hoe elke widget werkt en hoe goed hij ondersteund wordt door de verschillende browsers.</p> + +<p>Bijzondere aandacht gaat naar de ingebouwde widgets voor formulieren. Omdat HTML formulieren eerder beperkt zijn en de kwaliteit over de browsers heen nogal verschillend kan zijn, bouwen webontwikkelaars hun eigen widgets. Dit wordt uitgelegd in het artikel: <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste widgets maken</a>.</p> + +<h2 id="Velden_voor_tekstinvoer">Velden voor tekstinvoer</h2> + +<p>Velden voor tekstinvoer zijn de meest basale formulierwidgets. Zij vormen een gemakkelijke manier om willekeurige gegevens in te voeren. Sommige tekstvelden echter kunnen gespecialiseerd worden om aan bepaalde behoeften te voldoen.</p> + +<p>Tekstvelden van HTML formulieren zijn eenvoudige tekstvelden die alleen platte tekst aanvaarden. Dit betekent dat <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (vet, cursief, enz.) niet mogelijk is. Alle rich text editors hebben aangepaste widgets.</p> + +<p>Alle tekstvelden hebben enkele gemeenschappelijke eigenschappen:</p> + +<ul> + <li>Zij kunnen gemarkeerd worden als {{htmlattrxref("readonly","input")}} (de gebruiker kan de inhoud niet wijzigen) of zelfs als {{htmlattrxref("disabled","input")}} (de ingegeven waarde wordt niet mee verzonden met de rest van de formuliergegevens).</li> + <li>Zij kunnen een plaatshouder hebben: {{htmlattrxref("placeholder","input")}}. Dit is tekst die in het invoerveld staat om het doel van het veld aan te geven.</li> + <li>Hun afmetingen kunnen opgegeven worden: {{htmlattrxref("size","input")}} geeft de fysieke grootte van het veld aan en <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> geeft het aantal karakters aan dat ingegeven kan worden in het veld.</li> + <li>Zij kunnen voorzien zijn van <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spellingscontrole</a> als de browser dit toelaat.</li> +</ul> + +<table class="standard-table"> + <caption>Compatibiliteits tabel</caption> + <tbody> + <tr> + <th>Functie op bureaublad</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.10</td> + <td>4.0</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("3.6")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Functie op mobiel apparaat</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.50</td> + <td>4</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Eenregelige_tekstvelden">Eenregelige tekstvelden</h3> + +<p>Een tekstveld van één regel wordt bekomen met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>text</code> is. Text is de defaultwaarde. Dus ook zonder het {{htmlattrxref("type","input")}} attribuut of een voor de browser onbekend <code>type</code> attribuut is het platte tekst die aanvaardt wordt door het tekstveld.</p> + +<pre class="brush: html"><input type="text"></pre> + +<p>Eenregelige tekstvelden hebben één beperking: regelafbrekingen worden door de browser verwijderd voordat de gegevens verstuurd worden.</p> + +<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> + +<p>Er kunnen nog meerdere beperkingen opgegeven worden door middel van het {{htmlattrxref("pattern","input")}} attribuut. Dit laat toe de gegevens te controleren aan de hand van een <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="/en-US/docs/JavaScript/Guide/Regular_Expressions">reguliere expressie</a> .</p> + +<pre class="brush: html"><input type="text" pattern="^cherry|banana$"></pre> + +<p>Maar HTML5 laat toe het enkelregelige tekstveld op te smukken met speciale waarden voor het {{htmlattrxref("type","input")}} attribuut. Deze waarden creëren nog altijd een eenregelig tekstveld maar leggen bijkomende voorwaarden op en geven het veld bepaalde eigenschappen.</p> + +<h4 id="Veld_voor_e-mail_addres">Veld voor e-mail addres</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>email</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="email" multiple></pre> + +<p>Dit voert een speciale beperking in voor het veld: de gebruiker moet een geldig e-mailaddres ingeven. Ieder andere inhoud veroorzaakt een fout. Het is ook mogelijk de gebruiker meerdere e-mailadressen te laten ingeven door middel van het {{htmlattrxref("multiple","input")}} attribuut.</p> + +<h4 id="Veld_voor_paswoord">Veld voor paswoord</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>password</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="password"></pre> + +<p>Hier kan elk teken ingegeven worden en de tekens zijn niet leesbaar.</p> + +<div class="note"><strong>Note:</strong> Let er op dat het hier louter om een gebruikersomgeving gaat. De tekst moet door JavaScript geïnterpreteerd worden anders wordt hij als platte tekst verzonden.</div> + +<h4 id="Zoekveld">Zoekveld</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>search</code> voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="search"></pre> + +<p>Het verschil tussen een tekstveld en een zoekveld is het uiterlijk. In sommige browsers worden zoekvelden afgebeeld met ronde hoeken of omkadering in een andere kleur. Zoekvelden hebben nog een bijkomende eigenschap: de inhoud kan automatisch opgeslagen worden voor auto-aanvullen over verschillende pagina's van dezelfde site.</p> + +<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> + +<h4 id="Veld_voor_telefoonnummer">Veld voor telefoonnummer</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>tel</code> te gebruiken voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="tel"></pre> + +<p>Door de grote wereldwijde verscheidenheid van telefoonnummers legt dit veld geen ristrictie op aan hetgeen ingegeven wordt. Het is dus louter een semantisch verschil alhoewel sommige toestellen (vooral mobielen) een virtueel toetsenbord gebruiken.</p> + +<h4 id="URL_veld">URL veld</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>url voor het</code> {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="url"></pre> + +<p>Dit veld waakt er over dat alleen geldige URLs worden ingegeven. Er wordt een fout gegenereerd als de URL niet juist is.</p> + +<div class="note"><strong>Nota:</strong> Dat de URL de juiste vorm heeft betekent niet dat dat het adres bestaat.</div> + +<p>Indien één veld een fout vertoont wordt het formulier niet verzonden. De stijl van een formulier kan zo ingesteld worden dat aangegeven wordt welke fout er opgetreden is. Dit wordt in detail uitgelegd in : <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Gegevensvalidatie</a>.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> + <td>2.3</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>3.1</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>3.1</td> + </tr> + </tbody> +</table> + +<h3 id="Tekstvelden_met_meerdere_regels">Tekstvelden met meerdere regels</h3> + +<p>Het {{HTMLElement("textarea")}} element creëert een tekstveld dat meerdere regels bevat.</p> + +<pre class="brush: html"><textarea cols="20" rows="10"></textarea></pre> + +<p>Het grote verschil met een gewoon tekstveld met één regel ligt in het feit dat een tekstarea een harde regelafbreking ondersteunt. Met andere woorden dat de karakters "regelterugloop" [CR] en "nieuwe regel" [LF]) geacepteerd worden.</p> + +<p>Dank zij de CSS eigenschap {{cssxref("resize")}} kan de gebruiker rechtstreeks de grootte van het veld aanpassen.</p> + +<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Afrolmenu">Afrolmenu</h2> + +<p>Een afrolmenu laat de gebruiker toe een keuze te maken uit verschillende mogelijkheden. Er zijn twee mogelijkheden. Ofwel wordt een lijst met keuze opties getoond, ofwel wordt een veld voor autoaanvulling getoond. De lijst loopt gewoon over de tekst van het formulier. Na de selectie verdwijnt de lijst zonder de tekst te verstoren.</p> + +<h3 id="Keuzelijst">Keuzelijst</h3> + +<p>Een keuzelijst wordt gemaakt met het {{HTMLElement("select")}} element met één of meerdere {{HTMLElement("option")}} elementen die de keuzemogelijkheden aangeven.</p> + +<pre class="brush: html"><select> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></pre> + +<p>Eventueel kan een defaultwaarde opgegeven worden met het {{htmlattrxref("selected","option")}} attribuut bij de gewenste optie. De {HTMLElement("option")}} elementen kunnen ook genest worden in {{HTMLElement("optgroup")}} elementen om de opties in groepen in te delen:</p> + +<pre class="brush: html"><select> + <optgroup label="fruits"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> + </optgroup> + <optgroup label="vegetables"> + <option>Carrot</option> + <option>Eggplant</option> + <option>Potatoe</option> + </optgroup> +</select></pre> + +<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Meerkeuzelijst">Meerkeuzelijst</h3> + +<p>De eenvoudige keuzelijst laat slechts één keuze toe. Door het {{htmlattrxref("multiple","select")}} attribuut toe te voegen aan het {{HTMLElement("select")}} element wordt de volledige lijst met opties getoond en kan de gebruiker meerdere keuzes maken door de ctrl-toets in te houden tijdens het selecteren. </p> + +<pre class="brush: html"><select multiple> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></pre> + +<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> + +<div class="note"><strong>Note:</strong> Niet alle browsers die het {{HTMLElement("select")}} element ondersteunen, ondersteunen het {{htmlattrxref("multiple","select")}} attribuut.</div> + +<h3 id="Autoaanvullen">Autoaanvullen</h3> + +<p>Met het {{HTMLElement("datalist")}} element samen met de {{HTMLElement("option")}} elementen wordt een veld voor autoaanvullen getoond. Dit datalist element roept het {{htmlattrxref("list","input")}} attribuut op.</p> + +<p>Zodra de gebruiker iets ingeeft wordt een keuzelijst getoond met alle overeenkomsten in het datalist object.</p> + +<pre class="brush: html"><label for="myFruit">What's your favorite fruit?</label> +<input type="text" id="myFruit" list="mySuggestion" /> +<datalist id="mySuggestion"> + <option>Apple</option> + <option>Banana</option> + <option>Blackberry</option> + <option>Blueberry</option> + <option>Lemon</option> + <option>Lychee</option> + <option>Peach</option> + <option>Pear</option> +</datalist></pre> + +<div class="note"><strong>Note:</strong> Volgens <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a> kunnen het {{htmlattrxref("list","input")}} attribuut en het {{HTMLElement("datalist")}} element gebruikt worden bij elke widget die ingave van de gebruiker vraagt. Het is nochthans onduidelijk hoe dat moet gebeuren met widgets die iets anders dan tekst verwachten (kleur en datums bijvoorbeeld). Verschillende browsers zullen zich anders gedragen. Voorzichtigheid is dus geboden wanneer men andere dan tekstvelden gebruikt.</div> + +<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> + +<table class="standard-table"> + <caption>Compatibiliteits tabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("datalist")}}</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobile fuctie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("datalist")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Klikbare_items">Klikbare items</h2> + +<p>Klikbare items zijn widgets waarvan de toestand wijzigt bij het aanklikken. Er zijn twee klikbare items: het keuzevakje en het keuzerondje. Beide gebruiken ze het {{htmlattrxref("checked","input")}} attribuut om aan te geven of de widget al of niet bij default is aangeklikt.</p> + +<p>Er dient opgemerkt te worden dat deze widgets zich niet gedragen als elk ander formulier widget. Wanneer een formulier wordt verzonden, worden alle widgets die een {{htmlattrxref("name","input")}} attribuut hebben, verzonden, ook als zij geen waarde hebben. Klikbare elementen daarentegen worden slechts verzonden indien ze aangeklikt zijn. Als zij niet aangeklikt zijn worden zij niet verzonden, zelfs niet hun naam.</p> + +<h3 id="Het_keuzevakje">Het keuzevakje</h3> + +<p>Een keuzevakje wordt gemaakt met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>checkbox</code> is.</p> + +<pre class="brush: html"><input type="checkbox" checked> +</pre> + +<p>Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.</p> + +<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="checkbox"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="</code><code>checkbox</code><code>"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Het_keuzerondje">Het keuzerondje</h3> + +<p>Een keuzerondje wordt gemaakt door het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>radio</code> is.</p> + +<pre class="brush: html"><input type="radio" checked></pre> + +<p>Keuzerondjes kunnen gebundeld worden. Wanneer de naam in hun {{htmlattrxref("name","input")}} attribuut dezelfde is vormen zij één groep. Slechts één keuzerondje in een groep kan geselecteerd zijn. Dit betekent dat als één keuzerondje in een groep aangevinkt is, alle andere gedeselecteerd zijn. Wanneer het formulier verzonden wordt, wordt alleen het aangevinkte keuzerondje verzonden. Wanneer geen enkel is aangevinkt wordt er ook geen enkel verzonden.</p> + +<pre class="brush: html"><fieldset> + <legend>What gender are you?</legend> + <p><label for="g1"><input type="radio" name="g" id="g1" value="M"> Male</label></p> + <p><label for="g2"><input type="radio" name="g" id="g2" value="F"> Female</label></p> + <p><label for="g3"><input type="radio" name="g" id="g3" value="B"> Both</label></p> + <p><label for="g4"><input type="radio" name="g" id="g4" value="N"> None</label></p> + <p><label for="g5"><input type="radio" name="g" id="g5" value="!"> This is not your concern!</label></p> + <p><label for="g6"><input type="radio" name="g" id="g6" value="?"> Who cares?</label></p> + <p><label for="g7"><input type="radio" name="g" id="g7" value="\o/"> Obi-Wan Kenobi</label></p> +</fieldset></pre> + +<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Knoppen">Knoppen</h2> + +<p>In HTML formulieren zijn er drie knoppen:</p> + +<dl> + <dt>Verzenden</dt> + <dd>Zendt de formuliergegevens naar de server.</dd> + <dt>Herstel</dt> + <dd>Herstelt alle widgets van het formulier naar hun defaultwaarde.</dd> + <dt>Anoniem</dt> + <dd>Knoppen waarvan de uitwerking aangepast kan worden door middel an JavaScript.</dd> +</dl> + +<p>Een knop wordt gecreëerd door het {{HTMLElement("button")}} element of een {{HTMLElement("input")}} element. Het soort knop wordt bepaald door het {{htmlattrxref("type","input")}} attribuut:</p> + +<h3 id="verzenden">verzenden</h3> + +<pre class="brush: html"><button type="submit"> + This a <br><strong>submit button</strong> +</button> + +<input type="submit" value="This is a submit button"></pre> + +<h3 id="herstel">herstel</h3> + +<pre class="brush: html"><button type="reset"> + This a <br><strong>reset button</strong> +</button> + +<input type="reset" value="This is a reset button"></pre> + +<h3 id="anoniem">anoniem</h3> + +<pre class="brush: html"><button type="button"> + This an <br><strong>anonymous button</strong> +</button> + +<input type="button" value="This is an anonymous button"></pre> + +<p>In principe gedraagt het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element zich identiek. Er zijn echter kleine verschillen:</p> + +<ul> + <li>Zoals de voorgaande voorbeelden laten zien laten de {{HTMLElement("button")}} elementen HTML inhoud toe als tekst, terwijl de {{HTMLElement("input")}} elementen alleen platte tekst toelaten.</li> + <li>De {{HTMLElement("button")}} elementen kunnen een andere waarde hebben dan hun label (dit is echter niet betrouwbaar in Internet Explorer voor IE 8).</li> +</ul> + +<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="submit"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}<br> + (Buggy before IE8)</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Speciale_formulier_widgets">Speciale formulier widgets</h2> + +<p>Deze widgets laten invoer toe van complexe of gestructeerde gegevens zoals exacte of benaderende getallen, datum en tijd en kleuren.</p> + +<h3 id="Getallen">Getallen</h3> + +<p>Widgets voor getallen worden gemaakt met het {{HTMLElement("input")}} element en <code>number</code> als {{htmlattrxref("type","input")}} attribuut. Dit element ziet er uit als een tekstveld maar accepteert slechts getallen met drijvende komma. Gewoonlijk is het voorzien van knoppen om de waarde te verhogen of verlagen.</p> + +<p>De ingegeven waarde kan ook beperkt worden met de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen. De waarde van het increment van de knoppen kan opgegeven worden met het {{htmlattrxref("step","input")}} attribuut.</p> + +<h4 id="Voorbeeld">Voorbeeld</h4> + +<pre class="brush: html"><input type="number" min="1" max="10" step="2"></pre> + +<p>Dit creëert een widget wiens waarde begrensd is tussen 1 en 10 en die in stappen van 2 kan verhoogd of verlaagd worden.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>11.0</td> + <td>{{CompatNo()}} {{bug('344616')}}</td> + <td>10<br> + (<em>herkend maar geen UI</em>)</td> + <td>{{CompatVersionUnknown()}}</td> + <td>5.2</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>2.3</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> + +<h3 id="Schuifregelaar">Schuifregelaar</h3> + +<p>Een andere manier om een waarde in te geven is het gebruik van een schuifregelaar. Deze zijn minder nauwkeurig dan een tekstveld en worden dan ook gebruikt waar geen nauwkeurige waarde nodig is.</p> + +<p>Een schuifregelaar wordt gemaakt met het {{HTMLElement("input")}} element met {{htmlattrxref("type","input")}} attribuut <code>range</code>. Hij moet wel correct ingesteld zijn met zijn {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} en {{htmlattrxref("step","input")}} attributen.</p> + +<h4 id="Voorbeeld_2">Voorbeeld</h4> + +<pre class="brush: html"><input type="range" min="1" max="5" step="1"></pre> + +<p>Dit voorbeeld creëert een schuifregelaar waarvan waarde varieert tussen 1 en 5 in stappen van +1 en -1.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> + <td>5.0</td> + <td>23.0</td> + <td>10</td> + <td>10.62</td> + <td>4.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> + <td>{{CompatNo()}}</td> + <td>23.0</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + </tbody> +</table> + +<h3 id="Ingave_van_datum_en_tijd">Ingave van datum en tijd</h3> + +<p>Traditioneel is ingave van datum en tijd een probleem voor web ontwikkelaars. HTML5 brengt enige verlichting met een speciale widget om deze speciale gegevens te behandelen.</p> + +<p>Er wordt ook gebruik gemaakt van het {{HTMLElement("input")}} element met de juiste instelling van het {{htmlattrxref("type","input")}} attribuut. Datum en tijd kunen appart of samen ingegeven worden, afhankelijk van het attribuut:</p> + +<h4 id="date"><code>date</code></h4> + +<p>Dit creëert een widget die een datum toont of kan opnemen, zonder tijd.</p> + +<pre class="brush: html"><input type="date"></pre> + +<h4 id="datetime"><code>datetime</code></h4> + +<p>Dit crëeert een widget die een datum met tijd kan tonen of opnemen in de UTC tijdzone.</p> + +<pre class="brush: html"><input type="datetime"></pre> + +<h4 id="datetime-local"><code>datetime-local</code></h4> + +<p>Dit creëert een widget die een datum met tijd weergeeft of opneemt in elke tijdzone.</p> + +<pre class="brush: html"><input type="datetime-local"></pre> + +<h4 id="month"><code>month</code></h4> + +<p>Dit creëert een widget die een maand en een jaartal weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="month"></pre> + +<h4 id="time"><code>time</code></h4> + +<p>Creëert een widget die een tijd weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="time"></pre> + +<h4 id="week"><code>week</code></h4> + +<p>Creëert een widget die een week en een jaartal weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="week"></pre> + +<p>Alle datum en tijd widgets kunnen beperkt zijn door de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen.</p> + +<pre class="brush: html"><label for="myDate">When are you available this summer?</label> +<input type="date" min="2013-06-01" max="2013-08-31" id="myDate"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> + <td>20.0</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<div class="warning"><strong>Waarschuwing:</strong> De datum en tijd widgets zijn zeer nieuw en zelfs browsers die beweren ze te ondersteunen hebben er dikwijls problemen mee. Test uw werk met diverse browsers alvorens uit te rollen!</div> + +<h3 id="Kleuren_kiezen">Kleuren kiezen</h3> + +<p>Het kiezen van kleuren is altijd wat moeilijk geweest. Er zijn vele manieren: RGB waarden (decimaal or hexadecimaal), HSL waarden, sleutelwoorden, enz. De kleuren widget laat de gebruiker toe zowel tekstueel als visueel een kleur te kiezen.</p> + +<p>Een kleuren widget wordt gemaakt door het {{HTMLElement("input")}} element met <code>color</code> als {{htmlattrxref("type","input")}} attribuut.</p> + +<pre class="brush: html"><input type="color"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> + <td>21.0</td> + <td>{{CompatNo()}} {{bug('547004')}}</td> + <td>{{CompatNo()}}</td> + <td>11.01</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Andere_widgets">Andere widgets</h2> + +<p>Er zijn nog enkele andere widgets die niet dadelijk ergens bij horen maar niettemin belangrijk zijn.</p> + +<h3 id="Kiezen_van_bestanden">Kiezen van bestanden</h3> + +<p>HTML formulieren kunnen bestanden naar een server versturen. Dit wordt verduidelijkt in het artikel: <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Verzenden en ontvangen van gegevens</a>. De widget "Bestanden kiezen" laat de gebruiker toe één of meerdere bestanden te kiezen om te verzenden.</p> + +<p>Kies het {{HTMLElement("input")}} element met <code>file</code> als {{htmlattrxref("type","input")}} attribuut. Het type bestand kan ingesteld worden met het {{htmlattrxref("accept","input")}} attribuut. Indien de gebruiker meerdere bestanden kan kiezen wordt het {{htmlattrxref("multiple","input")}} attribuut gebruikt.</p> + +<h4 id="Voorbeeld_3">Voorbeeld</h4> + +<p>In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.</p> + +<pre class="brush: html"><input type="file" accept="image/*" multiple></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Verborgen_inhoud">Verborgen inhoud</h3> + +<p>Het is soms nuttig, om technische redenen, om gegevens met het formulier mee te sturen maar die niet zichtbaar zijn voor de gebruiker. Dit wordt gedaan met het {{HTMLElement("input")}} element met <code>hidden</code> als {{htmlattrxref("type","input")}} attribuut.</p> + +<p>Dit element vereist ook de <code>name</code> en <code>value</code> attributen:</p> + +<pre class="brush: html"><input type="hidden" name="timestamp" value="1286705410"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Feature Desktop</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Afbeelding">Afbeelding</h3> + +<p>De <strong>afbeeldings widget</strong> wordt op dezelfde manier getoond als het {{HTMLElement("img")}} element, met die uitzondering dat, wanneer de gebruiker er op klikt, het zich gedraagt als een verzendknop (zie hierboven).</p> + +<p>Een afbeeldings widget wordt gecrëerd met een {{HTMLElement("input")}} element en <code>image</code> als {{htmlattrxref("type","input")}} attribuut. Dit element ondersteunt dezelfde attributen als het {{HTMLElement("img")}} element plus de attributen van alle formulier knoppen.</p> + +<pre class="brush: html"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> + +<p>Als de knop afbeelding gebruikt wordt als verzendknop wordt niet zijn waarde verstuurd maar de X- en Y-coördinaten van de plaats waar er geklikt wordt in de afbeelding. De coördinaten zijn relatief tegenover de afbeelding (de linker bovenhoek is 0, 0). De coördinaten worden verzonden als twee sleutel/waarde paren. De sleutel van de X-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door "<em>.x</em>" en de sleutel van de Y-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door "<em>.y</em>".</p> + +<p>Laten we een voorbeeld bekijken:</p> + +<pre class="brush: html"><form action="http://foo.com" method="get"> + <input type="image" value="pos" alt="" src="map.png" /> +</form> +</pre> + +<p>Bij het klikken op de afbeelding in dit formulier wordt naar de volgende URL verzonden:</p> + +<pre>http://foo.com?pos.x=123&pos.y=456</pre> + +<p>De waarde van de <code>pos.x</code> en <code>pos.y</code> parameters is afhankelijk van de plaats in de afbeelding waar geklikt wordt. Hoe deze waarden verzonden en ontvangen worden wordt beschreven in <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Zenden en ontvangen van gegevens</span></a>.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> + <td>1.0</td> + <td>1.0</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> + +<p>Meters en en voortgangsbalken zijn visuele voortellingen van numerieke waarden.</p> + +<p>Een voortgangsbalk stelt een waarde voor die verandert in de tijd tot een maximumwaarde vastgelegd door het {{htmlattrxref("max","progress")}} attribuut. De balk wordt gecreëerd door het {{ HTMLElement("progress")}} element. Niet alle browsers en ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> + +<pre class="brush: html"><progress max="100" value="75">75/100</progress></pre> + +<p>Een meter stelt een vaste waarde voor in een gebied begrensd door de waarde van {{htmlattrxref("min","meter")}} en {{htmlattrxref("max","meter")}}. Deze waarde wordt visueel voorgesteld door een balk. Hoe deze balk er uit ziet wordt bepaald door bepaalde parameters:</p> + +<ul> + <li>de waarden van {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} delen het interval in drie delen: + <ul> + <li>Het onderste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("min","meter")}} en {{htmlattrxref("low","meter")}} (deze waarden inbegrepen)</li> + <li>Het middenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} (deze waarden uitgesloten)</li> + <li>Het bovenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("high","meter")}} en {{htmlattrxref("max","meter")}} (deze waarden inbegrepen)</li> + </ul> + </li> + <li>De {{htmlattrxref("optimum","meter")}} waarde bepaalt de optimale waarde voor het {{HTMLElement("meter")}} element. Samen met de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} wordt bepaald welk deel van het interval de voorkeur krijgt: + <ul> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het onderste gedeelte van het interval ligt, is het het onderste gedeelte dat de voorkeur krijgt, het middenste gedeelte wordt als het gemiddelde beschouwd en het bovenste gedeelte wordt als het slechtste gedeelte beschouwd.</li> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het middenste gedeelte van het interval ligt, wordt het onderste en het bovenste gedeelte als het gemiddelde beschouwd. Het middenste gedeelte krijgt de voorkeur.</li> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het bovenste gedeelte van het interval ligt, wordt het onderste gedeelte als slecht beschouwd, het middelste gedeelte als het gemiddelde en het bovenste gedeelte als het gedeelte dat de voorkeur heeft.</li> + </ul> + </li> +</ul> + +<p>Alle browsers die het {{HTMLElement("meter")}} element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:</p> + +<ul> + <li>Als de huidige waarde in het voorkeurgebied valt is de balk groen.</li> + <li>Als de huidige waarde in het gemiddelde gebied ligt is de balk geel.</li> + <li>Als de huidige waarde in het slechte gedeelte ligt is de kleur van de balk rood.</li> +</ul> + +<p>Niet alle browsers en ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> + +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> + +<table class="standard-table"> + <caption>Compatibility table</caption> + <tbody> + <tr> + <th>Desktopfuncties</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>5.2</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functies</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Om dieper in te gaan op de verschillende widgets voor formulieren zijn er nuttige externe bronnendie kunnen geraadpleegd worden:</p> + +<ul> + <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> door Wufoo</li> + <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> over Quirksmode (ook <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">beschikbaar voor mobiele</a> browsers)</li> +</ul> diff --git a/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html b/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html new file mode 100644 index 0000000000..feea7f5f78 --- /dev/null +++ b/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html @@ -0,0 +1,339 @@ +--- +title: Formuliergegevens verzenden +slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens +tags: + - Beginner + - Bestanden + - Formulieren + - HTML + - HTTP + - Headers + - Veiligheid + - Web +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div> + +<p class="summary">In dit artikel wordt ingegaan op wat er gebeurt wanneer de gebruiker een formulier verstuurd - waar gaan de gegevens naar toe en wat te doen als de gegevens er aan komen? Er wordt ook ingegaan op enkele veiligheidsaspecten in verband met het verzenden van formuliergegevens.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voorafgaande kennis:</th> + <td>Basis computergebruik, <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">inleiding tot HTML</a> en basiskennis <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> en <a href="/en-US/docs/Learn/Server-side/First_steps">programmering aan de kant van de server</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Begrijpen wat er gebeurt wanneer formuliergegevens verzonden worden met inbegrip van hoe de gegevens verwerkt worden door de server.</td> + </tr> + </tbody> +</table> + +<h2 id="Waar_gaan_de_gegevens_naar_toe">Waar gaan de gegevens naar toe?</h2> + +<p>Hier wordt besproken wat er gebeurt met de gegevens wanneer een formulier wordt verzonden.</p> + +<h3 id="Clientserver_architectuur">Client/server architectuur</h3> + +<p>Het web is gebaseerd op een client/server architectuur die als volgt kan samengevat worden: een client (meestal een webbrowser) stuurt een verzoek naar een server (meestal een webserver zoals <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, enz.) gebruik makend van het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. De server beantwoordt het verzoek met hetzelfde protocol.</p> + +<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> + +<p>Aan de zijde van de client is een HTML formulier niet meer dan een gebruiksvriendelijke manier om een HTTP verzoek te verzenden naar een server. Dit laat de gebruiker toe gegevens in te geven in het HTTP-verzoek.</p> + +<div class="note"> +<p><strong>Nota</strong>: Zie <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a> om een beter idee te krijgen van hoe de client-server architectuur werkt.</p> +</div> + +<h3 id="Aan_de_zijde_van_de_client_bepalen_hoe_de_gegevens_te_verzenden">Aan de zijde van de client: bepalen hoe de gegevens te verzenden</h3> + +<p>Het {{HTMLElement("form")}} element bepaalt hoe de gegevens zullen verzonden worden. Alle attributen zijn aanwezig om het verzoek samen te stellen en te verzenden wanneer de gebruiker op "Verzenden" klikt. De twee belangrijkste attributen zijn {{htmlattrxref("action","form")}} en {{htmlattrxref("method","form")}}.</p> + +<h4 id="Het_htmlattrxrefactionform_attribuut">Het {{htmlattrxref("action","form")}} attribuut</h4> + +<p>Dit attribuut bepaalt waar de gegevens naar toe zullen gezonden worden. De waarde moet een geldige URL zijn. Als dit attribuut niet opgegeven wordt, worden de gegevens verzonden naar de URL van de pagina waarop het formulier staat.</p> + +<p>In volgend voorbeeld worden de gegevens verzonden naar een absolute URL — <code>http://foo.com</code>:</p> + +<pre class="brush: html"><form action="http://foo.com"></pre> + +<p class="brush: html">Hier wordt gebruik gemaakt van een relatieve URL — de gegevens worden verzonden naar een andere URL op de server:</p> + +<pre class="brush: html"><form action="/somewhere_else"></pre> + +<p class="brush: html">Als er geen attributen gespecifieerd worden, worden de {{HTMLElement("form")}}gegevens verstuurd naar de pagina waarop het formulier staat:</p> + +<pre class="brush: html"><form></pre> + +<p class="brush: html">Oudere pagina's gebruiken de volgende notatie om aan te geven dat de gegevens moeten verstuurd worden naar dezelfde pagina als waar het formulier op staat. Dit was nodig omdat tot HTML5 het {{htmlattrxref("action", "form")}} attribuut vereist was. Dit is niet langer meer nodig.</p> + +<pre class="brush: html"><form action="#"></pre> + +<div class="note"> +<p><strong>Nota:</strong> het is mogelijk om een URL te <span class="highlighted">specifiëren die gebruik maakt van het HTTPS </span> (secure HTTP) protocol. Dan worden de gegevens samen met de rest van het verzoek versleuteld zelfs wanneer het formulier op een niet versleutelde pagina staat die met HTTP benaderd werd. Als het formulier daarentegen op een versleutelde pagina staat en er wordt een onversleutelde HTTP URL gevraagd met het {{htmlattrxref("action","form")}} attributut, zullen alle browsers een veiligheidswaarschuwing tonen zodra de gebruiker gegevens tracht te verzenden omdat zij niet versleuteld zullen worden.</p> +</div> + +<h4 id="Het_htmlattrxrefmethodform_attribuut">Het {{htmlattrxref("method","form")}} attribuut</h4> + +<p>Dit attribuut bepaalt hoe de gegevens worden verzonden. Het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> voorziet diverse methoden om een verzoek op te stellen. De twee meest gebruikte methoden zijn de GET en de POST methoden.</p> + +<p>Om het verschil te kennen moet gekeken worden naar hoe HTTP werkt. Elke keer de gebruiker iets zoekt op het internet zendt de browser een verzoek naar een URL. Een HTTP verzoek bestaat uit twee delen: een header die metadata bevat over de browser en het eigenlijk bericht.</p> + +<h5 id="De_GET_methode">De GET methode</h5> + +<p>Met de GET methode vraagt de browser aan de server een bepaalde gegevensbron: "Hallo server ik wens die gegevensbron". In dit geval wordt het gevraagde gehecht aan de URL. De rest van het bericht is leeg.</p> + +<p>Bekijken we het volgende formulier::</p> + +<pre class="brush: html"><form action="http://foo.com" method="get"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p>Als gevolg van de GET methode ziet men bij het verzenden de URL <code>www.foo.com/?say=Hi&to=Mom</code> verschijnen in de adresbalk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">De gegevens worden aan de URL gekoppeld als een reeks naam/waarde paren. Na het URL webadres komt een vraagteken (?) gevolgd door de naam/waarde paren, elk paar gescheiden door een ampersand (&). In dit geval versturen we twee eenheden gegevens naar de server:</p> + +<ul> + <li><code>say</code>, dat de waarde <code>Hi</code> heeft</li> + <li><code>to</code>, dat de waarde <code>Mom </code>heeft</li> +</ul> + +<p>Het HTTP-verzoek ziet er zo uit:</p> + +<pre>GET /?say=Hi&to=Mom HTTP/1.1 +Host: foo.com</pre> + +<div class="note"> +<p><strong>Nota</strong>: Dit voorbeeld is ook te vinden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">see it live also</a>).</p> +</div> + +<h5 id="De_POST_methode">De POST methode</h5> + +<p>De <code>POST</code> methode is een beetje anders. Het is de methode die de browser gebruikt om te communiceren met de server wanneer hij een reactie vraagt op de inhoud van zijn HTTP-bericht: "Hallo server, kijk naar mijn bericht en zend mij informatie hierover". Als een formulier op deze manier wordt verzonden worden de gegevens in het bericht geplaatst en niet in de URL van het HTTP-bericht.</p> + +<p>Nemen we een voorbeeld — dit is hetzelfde formulier als in de GET sectie hierboven, maar met het {{htmlattrxref("method","form")}} attribuut ingesteld op <code>post</code>.</p> + +<pre class="brush: html"><form action="http://foo.com" method="post"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p>Als het formulier wordt verzonden met de <code>POST</code> methode worden er geen gegevens gekoppeld aan de URL en het HTTP verzoek ziet er als volgt uit, met de gegevens in het bericht:</p> + +<pre>POST / HTTP/1.1 +Host: foo.com +Content-Type: application/x-www-form-urlencoded +Content-Length: 13 + +say=Hi&to=Mom</pre> + +<p><code>Content-Length</code> geeft de omvang van de inhoud aan en <code>Content-Type</code> geeft het type aan van de gegevensbron die naar de server wordt verzonden. Hier wordt later verder op ingegaan.</p> + +<div class="note"> +<p><strong>Nota</strong>: Dit voorbeeld kan ook gevonden worden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">see it live also</a>).</p> +</div> + +<h4 id="HTTP-verzoeken_bekijken">HTTP-verzoeken bekijken</h4> + +<p>HTTP-verzoeken worden nooit getoond aan de gebruiker (om ze te zien moeten instrumenten gebruikt worden als <a href="/en-US/docs/Tools/Network_Monitor">Firefox Network Monitor</a> of <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). Bijvoorbeeld in de Chrome network tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Het enige wat getoond wordt is de aangeroepen URL. Bij een GET-verzoek staan de gegevens in de adresbalk maar bij een POST-verzoek is er niets te zien. Dit is belangrijk om twee redenen:</p> + +<ol> + <li>Gebruik nooit de GET methode als een paswoord of andere gevoelige gegevens moeten verzonden worden om te voorkomen dat ze in de URL-balk getoond worden, wat erg onveilig is.</li> + <li>Gebruik de POST methode als grote hoeveelheden gegevens moeten verzonden worden omdat sommige browsers de lengte van de URL begrenzen. Daarenboven begrenzen veel servers ook de lengte van de URL's die ze aanvaarden.</li> +</ol> + +<h3 id="Aan_de_kant_van_de_server_ontvangst_van_de_gegevens">Aan de kant van de server: ontvangst van de gegevens</h3> + +<p>Onafhankelijk van de gebruikte methode van verzenden zal de server een reeks karakters ontvangen die hij zal ontleden in sleutel/waarde paren. De verdere afwikkeling is afhankelijk van het gebruikte ontwikkelingsplatform. Bijvoorbeeld de afhandeling van dubbele sleutels: meestal wordt de laatst ontvangen sleutel gebruikt.</p> + +<h4 id="Voorbeeld_Raw_PHP">Voorbeeld: Raw PHP</h4> + +<p><a href="http://php.net/">PHP</a> biedt enkele globale objecten om de gegevens te benaderen. Het volgend voorbeeld gebruikt de POST methode en toont de inhoud gewoon aan de gebruiker. Die beslist wat er verder mee moet gebeuren: gewoon tonen, opslaan in een gegevensbank of op een andere manier verwerken.</p> + +<pre class="brush: php"><?php + // The global $_POST variable allows you to access the data sent with the POST method by name + // To access the data sent with the GET method, you can use $_GET + $say = htmlspecialchars($_POST['say']); + $to = htmlspecialchars($_POST['to']); + + echo $say, ' ', $to; +?></pre> + +<p>Dit voorbeeld toont een pagina met de gegevens die we verzonden hebben. Dit wordt getoond in ons <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> voorbeeldbestand. Dit bevat hetzelfde voorbeeld als hierboven met een <code>post</code> methode en als <code>action</code> : <code>php-example.php</code>. Bij verzending worden de formuliergegevens verzonden naar <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, waar de PHP code staat uit bovenstaand voorbeeld. Bij uitvoering toont de browser: <code>Hi Mom</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Dit voorbeeld zal niet werken wanneer het in een lokale browser geladen wordt omdat browsers geen PHP-code kunnen interpreteren. Dus bij het verzenden biedt de browser alleen aan om het PHP-bestand te downloaden. Het zal dus slechts lopen door middel van een of andere PHP-server. Goede opties voor het lokaal testen van PHP zijn <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac en Windows) en <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> +</div> + +<h4 id="Voorbeeld_Python">Voorbeeld: Python</h4> + +<p>Volgend voorbeeld toont het gebruik van Python om hetzelfde te doen: tonen van verzonden gegevens op een webpagina. Dit maakt gebruik van het <a href="http://flask.pocoo.org/">Flask framework</a> om sjablonen te tonen, versturen van formuliergegevens, enz. (zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> + +<pre>from flask import Flask, render_template, request +app = Flask(__name__) + +@app.route('/', methods=['GET', 'POST']) +def form(): + return render_template('form.html') + +@app.route('/hello', methods=['GET', 'POST']) +def hello(): + return render_template('greeting.html', say=request.form['say'], to=request.form['to']) + +if __name__ == "__main__": + app.run()</pre> + +<p>De twee sjablonen waarnaar gerefereerd wordt in de code zijn de volgende:</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: hetzelfde formulier als hierboven in de {{anch("The POST method")}} sectie maar met als <code>action</code> : <code>\{{ url_for('hello') }}</code>. (Dit is een <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> sjabloon dat in HTML is maar dat de Pythoncode kan aanroepen die loopt op de webserver die aangegeven wordt in de accolades. <code>url_for('hello')</code> wil in principe zeggen "stuur door naar <code>/hello</code> wanneer het formulier verzonden wordt".)</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: deze sjabloon bevat een regel die twee datavelden weergeeft die doorgegeven werden toen het bericht binnenkwam. Dit wordt gedaan via de <code>hello()</code> functie hierboven die loopt wanneer naar de <code>/hello</code> URL genavigeerd wordt.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Deze code zal ook nu weer niet lopen als die gewoon in een browser ingelezen wordt. Python werkt enigszins anders dan PHP. Om deze code lokaal te laten lopen moet <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP</a> <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">geïnstalleerd </a>worden, dan Flask d.m.v. <code>pip3 install flask</code>. Daarna moet het mogelijk zijn het voorbeeld te laten lopen door middel van <code>python3 python-example.py</code> en dan naar <code>localhost:5000</code> te gaan in de browser.</p> +</div> + +<h4 id="Andere_talen_en_omgevingen">Andere talen en omgevingen</h4> + +<p>Er zijn vele andere technologieën aan de serverkant voor behandeling van formulieren met inbegrip van <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, enzovoorts. Kies wat u het beste ligt. In dit verband moet gezegd worden dat het niet de gewoonte is om rechtstreeks in deze omgevingen te werken omdat dit niet altijd eenvoudig is. Het is veel gemakkelijker te werken met een van de volgende fraaie toepassingen die werken met formulieren veel aangenamer maken, zoals:</p> + +<ul> + <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> voor PHP</li> + <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external" title="https://www.djangoproject.com/">Django</a> voor Python (iets zwaarder dan <a href="http://flask.pocoo.org/">Flask</a>, maar met meer gereedschap en opties)</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> voor Node.js</li> + <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> voor Ruby</li> + <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> voor Java</li> + <li>enzoverder.</li> +</ul> + +<p>Zelfs met deze omgevingen is het niet altijd eenvoudig om met formulieren te werken. Maar het is nog altijd eenvoudiger dan alle functionaliteit zelf vanaf nul te moeten schrijven. Het zal in elk geval sneller gaan.</p> + +<div class="note"> +<p><strong>Nota</strong>: Het is buiten het bestek van dit artikel om elke taal of omgeving aan de serverkant te bespreken. Bovenstaande links zijn een leidraad en misschien is het nuttig er zelf wat dieper op in te gaan.</p> +</div> + +<h2 id="Speciaal_verzenden_van_bestanden">Speciaal: verzenden van bestanden</h2> + +<p>Verzenden van bestanden met HTML-formulieren is speciaal. Bestanden zijn binaire gegevens, terwijl andere gegevens uit gewone tekst bestaan. Omdat HTTP een tekstprotocol is, zijn er speciale vereisten om binaire gegevens te behandelen.</p> + +<h3 id="Het_htmlattrxrefenctypeform_attribuut">Het {{htmlattrxref("enctype","form")}} attribuut</h3> + +<p>Dit attribuut laat toe de waarde van <code>Content-Type</code> in te stellen van de HTTP-hoofding die meegestuurd wordt wanneer het formulier verzonden wordt. Deze hoofding is zeer belangrijk omdat die de server vertelt welke soort gegevens zullen doorgezonden worden. Standaard is de waarde <code>application/x-www-form-urlencoded</code>. In mensentaal betekent dit: "Dit zijn formuliergegevens die gecodeerd zijn in URL parameters."</p> + +<p>Om bestanden te versturen moeten er drie stappen ondernomen worden:</p> + +<ul> + <li>Zet het {{htmlattrxref("method","form")}} attribuut op <code>POST</code> omdat bestandsinhoud niet in URL parameters kan geplaatst worden</li> + <li>Zet de waarde van {{htmlattrxref("enctype","form")}} op <code>multipart/form-data</code> omdat de gegevens in meerder delen zal gesplitst worden, één voor elk bestand, plus nog een deel voor de tekstgegevens die vervat zijn in het formulier (als er tekst in het formulier aanwezig is).</li> + <li>Sluit één of meerdere bestandselecties (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">File picker</a>) in om de gebruiker toe te laten de bestanden te kiezen die hij wil uploaden.</li> +</ul> + +<p>Bijvoorbeeld:</p> + +<pre class="brush: html"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose a file</label> + <input type="file" id="file" name="myFile"> + </div> + <div> + <button>Send the file</button> + </div> +</form></pre> + +<div class="note"> +<p><strong>Nota:</strong> Sommige browsers ondersteunen het {{htmlattrxref("multiple","input")}} attribuut van het {{HTMLElement("input")}} element, dat toelaat meerdere bestanden te kiezen om te uploaden in slechts één <code><input></code> element. Hoe de server deze bestanden behandelt is afhankelijk van de technologie die gebruikt wordt op de server. Zoals hiervoor vermeld zal het gebruik van een omgeving het leven aangenamer maken.</p> +</div> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> Veel servers beperken de bestandsgrootte voor HTTP-verzoeken om misbruik te voorkomen. Het is belangrijk deze limiet te controleren bij de administrator van de server voordat een bestand verzonden wordt.</p> +</div> + +<h2 id="Veiligheidsoverwegingen">Veiligheidsoverwegingen</h2> + +<p>Elke keer er gegevens verstuurd worden naar een server moet aan veiligheid gedacht worden. HTML formulieren zijn de meest kwetsbare plaatsen voor aanvallen. De problemen komen nooit van de HTML formulieren zelf maar wel van de manier waarop de server met gegevens omgaat.</p> + +<p>Al naar gelang de toepassing zijn er wel bekende veiligheids problemen die men kan tegenkomen:</p> + +<h3 id="XSS_en_CSRF">XSS en CSRF</h3> + +<p>Cross-Site Scripting (XSS) en Cross-Site Request Forgery (CSRF) zijn wel bekende vormen van aanvallen wanneer gegevens getoond worden die een gebruiker terugstuurt naar een gebruiker of naar een andere gebruiker.</p> + +<p>XSS laat aanvallers toe een script toe te voegen aan de zijde van de client aan webpagina's die bekeken werden door andere gebruikers. Een kwetsbaar cross-site script kan gebruikt worden door aanvallers om toegangscontrole te omzeilen zoals de <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">politiek van dezelfde bron</a>. Het effect van deze aanvallen kan gaan van vervelend tot een ernstig veiligheidsrisico.</p> + +<p>CSRF aanvallen zijn gelijk aan XSS aanvallen in zo verre dat zij op dezelfde manier starten, door aan de kant van de client een script te injecteren in webpagina's, maar hun doel is anders. CSRF aanvallers trachten machtigingen aan te passen naar hogere niveaus (zoals een webadministrator) om een actie te ondernemen die anders niet zou lukken (bijvoorbeeld gegevens verzenden naar een niet-vertrouwde gebruiker).</p> + +<p>XSS aanvallen profiteren van het vertrouwen dat een gebruiker heeft in een website terwijl CSRF aanvallen profiteren van het vertrouwen dat een website heeft in haar gebruikers.</p> + +<p>Om zulke aanvallen te voorkomen moet een server altijd de gegevens controleren die een gebruiker er naar toe stuurt. Indien de gegevens moeten getoond worden moet er op gelet worden dat de HTML inhoud die van de gebruiker komt niet getoond wordt Daarom moeten de gegevens van de gebruiker verwerkt worden zodat ze niet letterlijk gepresenteerd worden. Praktisch alle omgevingen die vandaag op de markt zijn hebben minimaal een filter die de HTML <span style="line-height: 1.5;">{{HTMLElement("script")}}, {{HTMLElement("iframe")}} en {{HTMLElement("object")}} elementen filtert uit de gegevens die de gebruikers versturen. Dit verkleint het risico maar schakelt het niet helemaal uit.</span></p> + +<h3 id="SQL_injectie">SQL injectie</h3> + +<p>SQL injectie is een type aanval die probeert ingrepen uit te voeren op de database van de website. Dit vereist een SQL-aanvraag in de hoop dat de server ze uitvoert (meestal doordat de server de gegevens van de gebruiker tracht op te slaan). </p> + +<p>De gevolgen kunnen zeer erg zijn, gaande van verlies van gegevens tot de controle over een hele website infrastructuur door toe-eigenen van machtigingen. Dit is een zeer ernstige bedreiging en gegevens van een gebruiker mogen nooit zo maar direct opgeslagen worden zonder validering (bijvoorbeeld door gebruik van <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> op een PHP/MySQL systeem).</p> + +<h3 id="HTTP_header_injectie_en_email_injectie">HTTP header injectie en email injectie</h3> + +<p>Deze aanvallen kunen gebeuren wanneer de applicatie HTTP headers of e-mails opstelt uit de gegevens van een gebruikersformulier. Deze zullen geen onmidellijke schade aanrichten of invloed hebben op de gebruikers maar zij vormen een open deur voor dieper liggende problemen zoals het kapen van sessies of phishing aanvallen.</p> + +<p>Deze aanvallen gebeuren meestal in stilte en wijzigen servers in een <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> + +<h3 id="Wees_wantrouwig_vertrouw_uw_gebruikers_nooit">Wees wantrouwig: vertrouw uw gebruikers nooit</h3> + +<p>Wat te doen tegen deze bedreigingen? Dit gaat te ver voor dit artikel maar er zijn enkele regels die men in acht moet nemen. De belangrijkste regel is: vertrouw nooit uw gebruikers, uzelf inbegrepen. Zelfs een betrouwbare gebruiker kan gehackt zijn.</p> + +<p>Alle gegevens die de server bereiken moeten gecontroleerd worden. Altijd. Geen enkele uitzondering:</p> + +<ul> + <li>Potentieel gevaarlijke karakters moeten geweerd worden. Welke karakters dat zijn is afhankelijk van de context waarin de aangewend worden en het platform dat gebruikt wordt. Alle talen gebruikt aan de serverkant hebben deze funktie in zich.</li> + <li>Begrens de hoeveelheid inkomende gegevens tot het meest noodzakelijke.</li> + <li>Sla geüploade bestanden op in de zanbak (sla ze op op een andere server en maak ze alleen toegankelijk door een ander subdomein, of beter nog, door een volledig andere domeinnaam).</li> +</ul> + +<p>Veel/de meeste problemen worden voorkomen door deze drie regels op te volgen, maar het is altijd een goed idee de veiligheid te laten onderzoeken door een competente derde. Ga er niet van uit dat je alle mogelijke problemen overzien hebt.</p> + +<div class="note"> +<p><strong>Nota</strong>: Het artikel over <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website beveiliging</a> van de <a href="/en-US/docs/Learn/Server-side">serverkant</a> gaat dieper in op bovenstaande bedreigingen en <span class="ng-binding"><span class="highlighted">potentiële</span></span> oplossingen.</p> +</div> + +<h2 id="Besluit">Besluit</h2> + +<p>Formuliergegevens verzenden is simpel maar een applicatie beveiligen is niet zo eenvoudig. Maar denk er aan dat het niet de front-end ontwikkelaar is die verantwoordelijk is voor het veiligheidsmodel. Verderop in deze cursus wordt geleerd dat <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">validatie aan de zijde van de client</a> mogelijk is maar de server kan deze validatie niet vertrouwen omdat hij niet weet wat er zich afspeelt aan de zijde van de client.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Volgende bronnen gaan dieper in op de beveiliging van websites:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a></li> + <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li> + <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> diff --git a/files/nl/learn/html/forms/your_first_html_form/index.html b/files/nl/learn/html/forms/your_first_html_form/index.html new file mode 100644 index 0000000000..43c489e5a9 --- /dev/null +++ b/files/nl/learn/html/forms/your_first_html_form/index.html @@ -0,0 +1,273 @@ +--- +title: My first HTML form +slug: Learn/HTML/Forms/Your_first_HTML_form +tags: + - CSS + - Formulier + - HTML + - voorbeeld +translation_of: Learn/Forms/Your_first_form +--- +<p>Dit is een inleidend artikel tot HTML formulieren. Door middel van een eenvoudig contactformulier maken we kennis met de basiselementen van HTML formulieren. Dit artikel veronderstelt dat de lezer niets afweet van HTML formulieren, maar dat hij een basiskennis heeft van <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML">the basics of HTML</a> en <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS</a>.</p> + +<h2 id="Voordat_we_beginnen">Voordat we beginnen</h2> + +<h3 id="Wat_is_een_HTML_formulier">Wat is een HTML formulier?</h3> + +<p>HTML formulieren zijn de belangrijkste schakel tussen een gebruiker en een website of een applicatie. Zij laten gebruikers toe gegevens naar websites te sturen. Meestal zal dat naar de server zijn maar een webpagina kan de gegevens ook zelf interpreteren.</p> + +<p>Een HTML formulier bestaat uit een aantal elementen. Bijvoorbeeld tekstvelden (bestaande uit één of meerdere regels), keuzelijsten, knoppen of radioknoppen. Meestal zullen deze elementen voorzien zijn van een label dat de funktie van het element aangeeft.</p> + +<h3 id="Wat_is_er_nodig_om_met_formulieren_te_werken">Wat is er nodig om met formulieren te werken?</h3> + +<p>Een editor (<a href="/en-US/docs/">Sublime</a> of <a href="/en-US/docs/">Atom</a> zijn goede voorbeelden) en een webbrowser. Natuurlijk zijn er volwaardige IDE's zoals <a href="/en-US/docs/Mozilla/Tech/XUL/Using_Visual_Studio_as_your_XUL_IDE">Visual Studio</a>, <a href="/en-US/docs/Mozilla/Developer_guide/Eclipse">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a> en andere.</p> + +<p>Het verschil tussen een HTML formulier en een gewoon HTML document is dat de gegevens die door het formulier verzameld worden naar een webserver moeten gestuurd worden. Dus er moet een server voorzien worden om de gegevens te ontvangen en te verwerken. Hoe een server moet opgezet worden is buiten het bestek van dit artikel maar kan gevonden worden in het artike <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> + +<h2 id="Ontwerp_van_het_formulier">Ontwerp van het formulier</h2> + +<p>Alvorens te beginnen met schrijven moet eerst het formulier ontworpen worden. Dit laat toe vast te leggen welke gegevens er van de gebruiker gevraagd worden. Een te druk formulier kan al vlug aversie opwekken bij de gebruiker. Dus hou het simpel: vraag alleen wat absoluut nodig is. Het formulierontwerp is een zeer belangrijke stap in de opbouw van een site of een applicatie. Het is buiten het bestek van dit artikel om in te gaan op gebruiksvriendelijk formulierontwerp maar volgende publicaties kunnen daarbij nuttig zijn:</p> + +<ul> + <li>Smashing Magazine : <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/">an extensive guide web to form usability.</a></li> + <li>UXmatters betreffende<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> voor complexe formulieren, zoals <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php"> </a> <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> +</ul> + +<p>In dit artikel bouwen we een eenvoudig contactformulier. We beginnen met een ruwe schets.</p> + +<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> + +<p>Het formulier bevat drie tekstvelden en een knop. De gebruiker wordt gevraagd naar de naam, het e-mailadres en het bericht dat hij wil verzenden. Bij een druk op de knop wordt het bericht verzonden naar de server.</p> + +<h2 id="Maak_uw_handen_vuil_aan_HTML">Maak uw handen vuil aan HTML</h2> + +<p>Nu zijn we klaar om aan het formulier te beginnen. Om het contactformulier op te maken hebben we de volgende HTML elementen nodig: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, en {{HTMLelement("button")}}.</p> + +<h3 id="Het_HTMLelement(form)_element">Het {{HTMLelement("form")}} element</h3> + +<p>Alle HTML formulieren beginnen met een {{HTMLelement("form")}} element als volgt:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>Dit element definiëert een formulier. Het is een container element als {{HTMLelement("div")}} of {{HTMLelement("p")}} maar het bevat ook een aantal attributen die aangeven hoe het formulier zich gedraagt. Alle attributen zijn optioneel maar in de praktijk wordt het aangeraden van steeds minstens het <code>action</code> attribuut en het <code>methode</code> attribuut te gebruiken.</p> + +<ul> + <li>Het <code>action</code> attribuut bepaalt de locatie (URL) waar de gegevens van het formulier naar toe gezonden worden.</li> + <li>Het <code>methode</code> attribuut bepaalt met welke HTTP methode de gegevens worden verzonden (dit kan zijn "get" of "post").</li> +</ul> + +<p>Zie het artikel <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a> voor getaileerde informatie over hoe attributen werken.</p> + +<h3 id="Widgets_toevoegen_met_de_HTMLelement(label)_HTMLelement(input)_en_HTMLelement(textarea)_elementen">Widgets toevoegen met de {{HTMLelement("label")}}, {{HTMLelement("input")}} en {{HTMLelement("textarea")}} elementen</h3> + +<p>Het contactformulier is vrij eenvoudig en bevat drie tekstvelden, elk met een label. Het veld voor de naam is een eenvoudig tekstveld met één regel. Het veld voor het e-mailadres is ook een tekstveld met één regel maar dat alleen een e-mailadres aanvaardt. Het tekstveld voor het bericht is een eenvoudig tekstveld met meerdere regels.</p> + +<p>In HTML taal ziet de code er aldus uit:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + <div> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </div> + <div> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_mail" /> + </div> + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> +</form></pre> + +<p>De {{HTMLelement("div")}} elementen dienen om de code eenvoudig te structureren en om de stijl gemakkelijk aan te passen (zie verder). Let op het gebruik van het <em>for </em>attribuut<em> </em>in alle {{HTMLelement("label")}} elementen. Dit is een formele manier om een label aan een formulier te linken. Dit attribuut verwijst naar de<em> id </em>van de overeenkomstige widget. Dit wordt onder andere gedaan opdat de gebruiker op het label kan klikken om de widget te activeren. Andere redenen zijn beschreven in het artikel: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>.</p> + +<p>Voor het {{HTMLelement("input")}} element is het belangrijkste attribuut het <code>type</code> attribuut. Dit attribuut bepaalt hoe het {{HTMLelement("input")}} element zich gedraagt. Dit verdient de nodig aandacht omdat de gevolgen ingrijpend kunnen zijn. Het artikel <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a> geeft meer details hierover. In het voorbeeld wordt de waarde <code>text </code>gebruikt omdat dit de defaultwaarde is voor dit attribuut. Zo accepteert het tekstveld elke tekst zonder verdere controle of validatie. Met de waarde <code>email</code> wordt een tekstveld gedefiniëerd dat alleen een juist gevormd e-mailadres aanvaardt. Dus met dit laatste wordt het tekstveld omgevormd tot een soort intelligent veld dat enkele controles uitvoert op de gegevens die de gebruiker ingeeft. Meer details over validatie van formulieren is te vinden in het artikel <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Form data validation</a>.</p> + +<p>Tenslotte iets over de syntax <code><input /></code> vs. <code><textarea></textarea></code>. Dit is een van de eigenaardigheden van HTML. Het element <code><input></code> is een element dat zichzelf afsluit. Dit wil zeggen dat, indien de gebruiker het element formeel wil sluiten, hijzelf "<em>/</em>" moet toevoegen op het einde van het element. {{HTMLElement("textarea")}} daarentegen is geen element dat zichzelf afsluit zodat de gebruiker zelf moet zorgen voor de juiste afsluiting. Dit heeft invloed op een specifieke eigenschap van HTML formulieren: de manier waarop de defaultwaarde wordt bepaald. Om de defaultwaarde van een {{HTMLElement("input")}} element te bepalen moet het <code>value</code> attribuut als volgt gebruikt worden:</p> + +<pre class="brush:html;"><input type="text" value="by default this element is filled with this text" /></pre> + +<p>Om daarentegen de defaultwaarde van een {{HTMLElement("textarea")}} element op te geven moet deze waarde tussen begin- en eindtag van het {{HTMLElement("textarea")}} element opgegeven worden:</p> + +<pre class="brush:html;"><textarea>by default this element is filled with this text</textarea></pre> + +<h3 id="En_tenslotte_om_te_eindigen_een_HTMLelement(button)">En tenslotte om te eindigen een {{HTMLelement("button")}}</h3> + +<p>Er moet alleen nog een knop toevoegd worden om de gebruiker toe te laten zijn bericht te verzenden zodra het formulier ingevuld is. Dit gebeurt met het {{HTMLelement("button")}} element:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + <div> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </div> + <div> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_mail" /> + </div> + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<p>Er zijn drie types van knoppen: <code>submit</code>, <code>reset</code>, en <code>button</code>.</p> + +<ul> + <li><code>submit</code> zendt de gegevens naar de webpagina die bepaalt wordt door het <code>action</code> attribuut van het {{HTMLelement("form")}} element.</li> + <li>De <code>reset</code> knop resets alle widges naar hun defaultwaarden. Vanuit het het UX standpuntwordt dit niet aangeraden.</li> + <li>Klikken op een <code>button</code> knop doet in eerste instantie niets maar dat is verbazend nuttig omdat met JavaScript de gebruiker deze toets elke funktie kan geven.</li> +</ul> + +<p>Met het {{HTMLElement("input")}} element en met het corresponderende type kan ook een knop gegenereerd worden. Het grote verschil met het {{HTMLelement("button")}} element is dat het {{HTMLelement("input")}} element slechts gewone tekst als label toestaat terwijl het {{HTMLelement("button")}} element volledige HTML inhoud accepteert als label.</p> + +<h2 id="De_zaken_mooier_maken_met_CSS">De zaken mooier maken met CSS</h2> + +<p>Nu het HTML formuler klaar is kan het bekeken worden in een browser. Maar het ziet er niet erg netjes uit.</p> + +<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> + +<p>Met een CSS stylesheet kan het wat netter gemaakt worden.</p> + +<p>Om te beginnen het formulier zelf. Het kan gecentreerd worden en er kan een boord rond getrokken worden:</p> + +<pre class="brush:css;">form { + /* Just to center the form on the page */ + margin: 0 auto; + width: 400px; + /* To see the outline of the form */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +}</pre> + +<p>Dan kan er wat ruimte ingevoegd worden tussen de widgets:</p> + +<pre class="brush:css;">form div + div { + margin-top: 1em; +}</pre> + +<p>Om een formulier leesbaar te maken is het aangeraden om alle labels dezelfde grootte te geven en ze uit te lijnen aan dezelfde zijde. Hier zullen we ze rechts uitlijnen. Maar soms is links uitlijnen ook goed.</p> + +<pre class="brush:css;">label { + /* To make sure that all labels have the same size and are properly aligned */ + display: inline-block; + width: 90px; + text-align: right; +}</pre> + +<p>Het moeilijkste met HTML formulieren is de styling van de HTML widgets zelf. Tekstvelden zijn nog gemakkelijk te stylen maar bij andere widgets is dat niet zo. Meer over stylen van HTML widgets is te vinden in <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p> + +<p>Hier worden enkele klassieke zaken gestyled: fonts, grootte en randen:</p> + +<pre class="brush:css;">input, textarea { + /* To make sure that all text fields have the same font settings + By default, textareas have a monospace font */ + font: 1em sans-serif; + + /* To give the same size to all text field */ + width: 300px; + -moz-box-sizing: border-box; + box-sizing: border-box; + + /* To harmonize the look & feel of text field border */ + border: 1px solid #999; +}</pre> + +<p>HTML formulieren ondersteunen een aantal pseudoklassen om de toestand van elk element te beschrijven. Bijvoorbeeld het <span class="ng-binding text">highlighten van een aktieve widget geeft aan waar de gebruiker zich bevindt in het formulier.</span></p> + +<pre class="brush:css;">input:focus, textarea:focus { + /* To give a little highlight on active elements */ + border-color: #000; +}</pre> + +<p>Tekstvelden met meerdere regels hebben hun eigen stijlen. Het {{HTMLElement("textarea")}} element is standaard een inline blok waarvan de onderkant uitgelijnd is met basislijn van de tekst. Dit is meestal niet wat men wil. Om het label en het veld uit te lijnen moet de <code>vertical-align</code> eigenschap van het {{HTMLElement("textarea")}} gewijzigd worden naar <code>top</code>.</p> + +<p>Let ook op de <code>resize</code> eigenschap die toelaat de grootte van het {{HTMLelement("textarea")}} element aan te passen.</p> + +<pre class="brush:css;">textarea { + /* To properly align multiline text fields with their labels */ + vertical-align: top; + + /* To give enough room to type some text */ + height: 5em; + + /* To allow users to resize any textarea vertically + It does not work on all browsers */ + resize: vertical; +}</pre> + +<p>In vele gevallen vereisen de knoppen ook een of andere stijl. Daarvoor worden zij in een {{HTMLelement("div")}} geplaatst met een buttonklasse. Hier wordt de knop uitgelijnd met de andere widgets. Om dat te doen wordt een vitueel {{HTMLelement("label")}} geplaatst. Dit wordt gedaan door marges en uitvulling te gebruiken.</p> + +<pre class="brush:css;">.button { + /* To position the buttons to the same position of the text fields */ + padding-left: 90px; /* same size as the label elements */ +} +button { + /* This extra margin represent roughly the same space as the space + between the labels and their text fields */ + margin-left: .5em; +}</pre> + +<p>Nu ziet hetformulier er veel mooier uit.</p> + +<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> + +<h2 id="Verzenden_van_de_gegevens_naar_de_server">Verzenden van de gegevens naar de server</h2> + +<p>De laatste stap is misschien de moeilijkste. Dit is de verwerking van de formuliergegevens aan de kant van de server. Zoals gezegd is een HTML formulier meestal een eenvoudige manier om de gebruiker te vragen naar gegevens en deze naar de webserver te sturen.</p> + +<p>Het {{HTMLelement("form")}} element bepaalt waar en hoe de gegevens moeten verstuurd worden door de <code>action</code> en de <code>method</code> attributen.</p> + +<p>Maar dat is niet voldoende. De gegevens moeten ook een naam krijgen. Deze naam is belangrijk aan beide zijden. Aan de kant van de browser wordt aan ieder stukje data een naam gegeven en aan de kant van de server wordt ieder stukje aan de hand van zijn naam behandeld.</p> + +<p>Dus om de gegevens een naam te geven wordt een <code>name</code> attribuut gebruikt bij elke widget die een specifiek stuk data produceert:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + <div> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </div> + <div> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email" /> + </div> + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<p>In ons formulier worden 3 stuks data verzonden genaamd "<code>user_name</code>", "<code>user_email</code>" en "<code>user_message</code>". Deze gegevens worden verstuurd naar de URL "<code>/my-handling-form-page</code>" met de HTTP POST methode.</p> + +<p>Op de server zal de script op de URL "<code>/my-handling-form-page</code>" de gegevens ontvangen als 3 waarden die ingesloten zijn in het HTTP verzoek. De gebruiker is verantwoordelijk hoe het script de gegevens behandelt. Elke scripttaal aan de kant van de server (PHP, Python, Ruby, Java, C#, enz.) heeft haar eigen mechanisme. Het is buiten het bestek van deze gids om dieper op dit onderwerp in te gaan maar er zijn enkele voorbeelden te vinden in het artikel <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a>.</p> + +<h2 id="Tenslotte">Tenslotte</h2> + +<p>Proficiat. Ons eerste HTML formulier is klaar. Hier is een live voorbeeld.</p> + +<table style="height: 267px; width: 772px;"> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<p>Het is nu tijd om dieper op deze materie in te gaan. HTML formulieren kunnen veel meer dan wat we hier beschreven hebben. Dit wordt beschreven in <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">the other articles of this guide.</a></p> diff --git a/files/nl/learn/html/index.html b/files/nl/learn/html/index.html new file mode 100644 index 0000000000..773c3732ba --- /dev/null +++ b/files/nl/learn/html/index.html @@ -0,0 +1,56 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Coderen + - Gids + - HTML + - Introductie + - Leren +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Om websites te bouwen moet u kennis hebben van {{Glossary('HTML')}} — de fundamentele technologie die wordt gebruikt om de structuur van een webpagina te definiëren. HTML wordt gebruikt om te specificeren of de inhoud van uw webpagina moet worden herkend als een paragraaf, titel, hoofding, link, afbeelding, multimediaspeler, formulier, of één van de vele andere beschikbare elementen, of zelfs een nieuw element dat u zelf definieert.</p> + +<h2 id="Leertraject">Leertraject</h2> + +<p>Idealiter begint u met uw leertraject door HTML te leren. U kunt beginnen door <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a> te lezen. Daarna kunt u verder leren over ingewikkeldere onderwerpen zoals:</p> + +<ul> + <li><a href="/nl/docs/Learn/CSS">CSS</a>, en hoe u het kunt gebruiken om vorm te geven aan HTML-elementen. Voorbeelden hiervan zijn het wijzigen van de lettergrootte en het lettertype van een tekst, het toevoegen van randen en slagschaduwen, het maken van een layout met meerdere kolommen, en het toevoegen van animaties en andere visuele effecten.</li> + <li><a href="/nl/docs/Learn/JavaScript">JavaScript</a>, en hoe u het kunt gebruiken om dynamische functionaliteit toe te voegen aan webpagina's. Voorbeelden hiervan zijn het vinden van uw locatie en het weergeven van deze locatie op een kaart, het laten verschijnen en verdwijnen van UI-elementen wanneer u gebruik maakt van een wisselknop, het lokaal opslaan van informatie van gebruikers op hun computer, en heel veel meer.</li> +</ul> + +<p>Voordat u begint met dit onderwerp, zult u op zijn minst bekend moeten zijn met het gebruik van computers en het passief gebruiken van het web (oftewel het gewoon bekijken, de inhoud consumeren). U hebt een basisopstelling nodig waarmee u kunt werken, zoals gespecificeerd in <a href="/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a>, en u zult moeten begrijpen hoe u bestanden kunt aanmaken en beheren, zoals gespecificeerd in <a href="/nl/docs/Learn/Getting_started_with_the_web/Bestanden_beheren">Omgaan met bestanden</a> — beide zijn onderdeel van onze volledige beginnersmodule genaamd <a href="/nl/docs/Learn/Getting_started_with_the_web">Van start met het web</a>.</p> + +<p>Het wordt aangeraden dat u begint met <a href="/nl/docs/Learn/Getting_started_with_the_web">Van start met het web</a> voordat u verder gaat met dit onderwerp, hoewel het niet noodzakelijk is. Veel van wat wordt besproken in <a href="/nl/docs/Learn/Getting_started_with_the_web/HTML_basisbegrippen">De basisbegrippen van HTML</a> wordt ook besproken in de module <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a>, hoewel de laatstgenoemde module veel gedetailleerder is.</p> + +<h2 id="Modules">Modules</h2> + +<p>Dit onderwerp bevat de volgende modules, die in een voorgestelde volgorde staan om er doorheen te werken. U kunt het beste beginnen met de eerste module.</p> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introductie tot 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 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/Learn/HTML/Tables">Tabellen in HTML</a></dt> + <dd>Het weergeven van informatie in tabelweergave op een {{glossary("Toegankelijkheid", "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/Formulieren">Formulieren in HTML</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> +</dl> + +<h2 id="Veelvoorkomende_problemen_met_HTML_oplossen">Veelvoorkomende problemen met HTML oplossen</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">HTML gebruiken voor het oplossen van veelvoorkomende problemen</a> 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.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/nl/docs/Web/HTML">HTML (HyperText Markup Language)</a> op MDN</dt> + <dd>Het vertrekpunt voor documentatie over HTML op MDN, met daarin gedetailleerde referenties naar elementen en attributen. Als u bijvoorbeeld wilt weten welke attributen een element heeft of welke waarden een attribuut heeft, is dit een goede plek om te beginnen.</dd> +</dl> +</div> diff --git a/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..b4c704e92c --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,266 @@ +--- +title: De structuur van je document en je website +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Behalve de definitie van individuele delen van je pagina (zoals "een paragraaf" of "een afbeelding"), biedt {{glossary("HTML")}} ook een aantal elementen op blokniveau aan waarmee je gebieden van je website kan definiëren (zoals "de hoofding", "het navigatiemenu" en "de kolom met de belangrijkste inhoud"). Met dit artikel kan je leren hoe je de structuur van een eenvoudige website kunt plannen en hoe je de HTML kan schrijven om deze structuur op te zetten.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis HTML, aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML tekstopmaak aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basispricipes</a>. Hoe hyperlinks werken zoals besproken in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Je leert hoe je je document met semantische tags kan structureren en hoe je de structuur van een eenvoudige website kan maken.</td> + </tr> + </tbody> +</table> + +<h2 id="Standaardsecties_van_een_document">Standaardsecties van een document</h2> + +<p>Webpagina's kunnen en zullen heel wat van elkaar verschillen, maar de meeste zullen een aantal gelijkaardige standaardcomponenten weergeven, behalve als de pagina een video of spel weergeeft die het volledige scherm beslaat, als de pagina onderdeel is van één of ander artistiek project of als die gewoon slecht is gestructureerd.</p> + +<dl> + <dt>hoofding (header)</dt> + <dd>Meestal is dit een grote brede band aan de bovenkant van de pagina met een grote koptekst en/of een logo. Dit is waar je de belangrijkste en bekendste informatie vindt, en meestal wordt die constant over alle webpagina's van je website weergegeven.</dd> + <dt>navigatiebalk (navigation bar)</dt> + <dd>De navigatiebalk bevat links naar de belangrijkste secties van de site. Meestal worden die weergegeven door menuknoppen, links of tabpagina's. Zoals de hoofding blijft de inhoud meestal constant op alle webpagina's. Als de navigatie op je website niet consistent is, zal dit enkel tot verwarde en gefrustreerde gebruikers leiden. Vele webontwikkelaars beschouwen de navigatiebalk als onderdeel van de hoofding in plaats van als een individueel onderdeel, maar dat is geen vereiste. In feite zijn er ook die vinden dat het beter is om de twee gescheiden te houden omdat ze zo veel <a href="/en-US/docs/Learn/Accessibility">toegankelijker</a> zijn voor schermlezers, die de twee onderdelen beter kunnen lezen als ze apart in de website bestaan.</dd> + <dt>belangrijkste inhoud (main content)</dt> + <dd>Dit is een groot gebied in het midden van de pagina die de meeste unieke inhoud van de webpagina bevat. Dit kan bijvoorbeeld een video zijn die je wil bekijken of het belangrijkste verhaal dat je wil lezen, de kaart die je wil bekijken, de nieuwskoppen enz. Dit deel van de website zal zeker variëren van pagina tot pagina!</dd> + <dt>zijbalk (sidebar)</dt> + <dd>In de zijbalk staan links, perifere info, citaten, advertenties enz. Meestal bevinden de belangrijkste en de perifere inhoud zich binnen dezelfde context (Op de pagina van een nieuwsartikel bijvoorbeeld kan de zijbalk een biografie van de auteur bevatten of links naar gerelateerde artikelen). Er zijn ook pagina's waarin de zijbalk wordt gebruikt voor terugkerende elementen zoals een secundair navigatiesysteem.</dd> + <dt>voettekst (footer)</dt> + <dd>Een band die langs de onderkant van de pagina loopt en die in het algemeen de kleine lettertjes bevat, auteursrechtvermeldingen of contactinformatie. Het is een plek waar je algemene informatie kan plaatsen (zoals in de hoofding) maar die dan meestal niet van al te groot belang is of gewoon ondergeschikt aan de info die je in de belangrijkste inhoud terugvindt. De voettekst wordt soms ook voor {{Glossary("SEO")}}-doeleinden gebruikt door links te verschaffen die zorgen voor een snelle toegang tot populaire inhoud.</dd> + <dd>Een "typische website" zou ongeveer zo kunnen worden opgezet:</dd> +</dl> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_voor_het_structureren_van_de_inhoud">HTML voor het structureren van de inhoud</h2> + +<p>Het eenvoudige voorbeeld dat we hierboven tonen is niet mooi, maar als de illustratie van de lay-out van een typische website is het echt wel oké. Sommige websites hebben meer kolommen, sommige zijn veel complexer maar je begrijpt wat ik bedoel. Met de juiste CSS, kan je ongeveer elk element rond de verschillende secties plaatsen en je webpagina er toch laten uitzien zoals je zelf wil. Maar, zoals we al eerder hebben gezegd, het is belangrijk dat je de semantiek respecteert en dat je<strong> het juiste element voor de juiste job gebruikt.</strong></p> + +<p>Visuele elementen vertellen namelijk niet het volledig verhaal. We gebruiken kleuren en tekstgrootte om de aandacht van de gebruikers op de nuttigste onderdelen van de inhoud te vestigen, zoals het navigatiemenu en gerelateerde links, maar wat bijvoorbeeld met mensen die een visuele beperking hebben en die concepten zoals "roze" en een "groot letterype" niet erg nuttig vinden?</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Kleurenblinde mensen vertegenwoordigen ongeveer <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% van de wereldbevolking</a>. Blinde en visueel beperkte mensen maken ruwweg 4-5% van de wereldbevolking uit. (In 2012 waren er <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 millioen zulke mensen in de wereld</a>, terwijl de volledige bevolking toen <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">rond 7 miljard</a> besloeg.)</p> +</div> + +<p>In je HTML-code kan je de opmaak van secties baseren op hun <em>functionaliteit.</em> Je kan ondubbelzinnige elementen gebruiken die deze secties vertegenwoordigen. Ondersteunende technologieën zoals schermlezers kunnen die elementen herkennen en de gebruiker helpen met allerlei taken. Dat zou "vind de belangrijkste navigatiebalk" kunnen zijn of "vind de belangrijkste inoud". Zoals we al eerder in de cursus hebben vermeld hangen er een aantal <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">gevolgen aan vast als je niet de juiste elementstructuur en semantiek voor de juise job</a> gebruikt.</p> + +<p>Om zulk een semantische opmaak toe te passen, verschaft HTML ons een aantal tags die speciaal voor dat doel zijn ontworpen en die je kan gebruiken. Bijvoorbeeld:</p> + +<ul> + <li><strong>hoofding: </strong>{{htmlelement("header")}}.</li> + <li><strong>navigatiebalk: </strong>{{htmlelement("nav")}}.</li> + <li><strong>belangrijkste inhoud: </strong>{{htmlelement("main")}}, met verschillende subsecties die worden vertegenwoordigd door {{HTMLElement("article")}}, {{htmlelement("section")}}, en {{htmlelement("div")}} elementen.</li> + <li><strong>zijbalk: </strong>{{htmlelement("aside")}}; wordt vaak binnen het {{htmlelement("main")}}-element geplaatst.</li> + <li><strong>voettekst: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Actief_leren_we_onderzoeken_de_code_voor_ons_voorbeeld">Actief leren: we onderzoeken de code voor ons voorbeeld</h3> + +<p>Het voorbeeld dat je hierboven hebt gezien wordt gegenereerd door de code hieronder. (Je kan <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">het voorbeeld ook in onze Github repo vinden</a>). Bekijk het voorbeeld hierboven en dan de code hieronder en ontdek welke code-onderdelen overeenstemmen met welke secties in het visuele voorbeeld.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>Mijn paginatitel</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- De drie regels hieronder zijn een noodoplossing om ervoor te zorgen dat semantische elementen van HTML5 ook werken in de oude versies van Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Hier is onze belangrijkste hoofding die op alle pagina's van onze website wordt gebruikt. --> + + <header> + <h1>Hoofding</h1> + </header> + + <nav> + <ul> + <li><a href="#">Startpagina</a></li> + <li><a href="#">Ons team</a></li> + <li><a href="#">Projecten</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- Een zoekformulier is een andere niet-lineaire manier om in een website te navigeren. --> + + <form> + <input type="search" name="q" placeholder="Zoekopdracht"> + <input type="submit" value="Start!"> + </form> + </nav> + + <!-- Hier vindt je de belangrijkste inhoud van onze pagina. --> + <main> + + <!-- Het bevat een artikel --> + <article> + <h2>Hoofding van het artikel</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Subsectie</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Nog een subsectie</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- De inhoud van de zijbalk kan ook in de belangrijkste inhoud worden genest. --> + <aside> + <h2>Gerelateerd</h2> + + <ul> + <li><a href="#">Oh wat ben ik toch graag aan de kust.</a></li> + <li><a href="#">Oh wat ben ik toch graag dicht bij de zee.</a></li> + <li><a href="#">Maar in het Noorden van Engeland</a></li> + <li><a href="#">Houdt het nooit op met regenen</a></li> + <li><a href="#">Ach ja...</a></li> + </ul> + </aside> + + </main> + + <!-- En hier is onze belangrijkste voettekst die op alle pagina's van onze website wordt gebruikt. --> + + <footer> + <p>©Copyright 2050 door helemaal niemand. Alle rechten omgedraaid.</p> + </footer> + + </body> +</html></pre> + +<p>Neem je tijd om de code te bekijken en te begrijpen — de commentaren in de code zouden je moeten helpen. We vragen je niet om iets anders te doen in dit artikel. Als je de lay-out van een document goed wil begrijpen, moet je een gezonde HTML-structuur schrijven en die dan weergeven met CSS. We wachten ermee tot je CSS-layout gaat studeren (dat vind je in het hoofdstuk over CSS).</p> + +<h2 id="HTML_layout-elementen_in_groter_detail">HTML layout-elementen in groter detail</h2> + +<p>Het is goed om de algemene betekenis van alle HTML-sectie-elementen in detail te begrijpen. — Dit zal beetje bij beetje komen terwijl je ervaring opdoet met webontwikkeling. Je kan veel details vinden in onze <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. Nu is het belangrijk dat je probeert deze belangrijkste definities te begrijpen:</p> + +<ul> + <li>{{HTMLElement('main')}} is voor inhoud die <em>uniek is op deze pagina.</em> Gebruik <code><main></code> slechts <em>een keer </em>per pagina en plaats die onmiddellijk in {{HTMLElement('body')}}. Je kan dit element best niet nesten in andere elementen.</li> + <li>{{HTMLElement('article')}} omhult een blok van gerelateerde inhoud die op zichzelf zinvol blijft zonder de aanwezigheid van de rest van de pagina.</li> + <li>{{HTMLElement('section')}} lijkt op <code><article></code> maar het wordt gebruikt om één deel van de pagina te groeperen. Dit deel heeft één enkel functioneel doel (bijvoorbeeld een mini-map of een reeks nieuwskoppen en hun samenvatting) Het wordt als een aanbevolen praktijk beschouwd om elke secie met een <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">koptekst</a> (of heading) te beginnen. Merk ook op dat je <code><article></code>-elementen kan opdelen in andere <code><section></code>-elementen, of <code><section></code>-elementen in andere <code><article></code>-elementen, het hangt wat af van de context.</li> + <li>{{HTMLElement('aside')}} bevat inhoud die geen onmiddellijk verband houdt met de belangrijkste inhoud maar wel extra informatie kan verschaffen die er op een indirecte manier mee is verbonden (lemma's in een woordenlijst, biografie van de auteur, gerelateerde links enz.)</li> + <li>{{HTMLElement('header')}} vertegenwoordigt een groep inleidende inhoud. Als het een kind is van {{HTMLElement('body')}} definiëert het de globale hoofding van een webpagina, maar als het een kind is van een {{HTMLElement('article')}} of {{HTMLElement('section')}} definiëert het een specifieke hoofding voor die sectie (probeer dit niet te verwarring met <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a> (i.e. titels en kopteksten))</li> + <li>{{HTMLElement('nav')}} bevat de belangrijkste navigerende functionaliteit voor die pagina. Secundaire links enz zouden niet in de navigatie mogen worden gestopt.</li> + <li>{{HTMLElement('footer')}} vertegenwoordig een groep met inhoud die op het einde van de webpagina past.</li> +</ul> + +<h3 id="Elementen_zonder_semantische_betekenis">Elementen zonder semantische betekenis</h3> + +<p>Soms zal je in een situatie terechtkomen waarin je geen ideaal semantisch element kan vinden om een aantal onderdelen te groeperen of om één of andere inhoud te mee te omhullen. Soms zal je misschien een reeks elementen willen groeperen zodat ze er met wat {{glossary("CSS")}} of {{glossary("JavaScript")}} als één enkele entiteit gaan uitzien. Voor dat soort gevallen beschikt HTML over het {{HTMLElement("div")}}- en het {{HTMLElement("span")}}-element. Deze kan je best met een geschikt {{htmlattrxref('class')}}-attribuut gebruiken. Je kan ook één of ander label voor hen bedenken zodat ze gemakkelijk als doel van een selectie kunnen worden gebruikt.</p> + +<p>{{HTMLElement("span")}} is een inline niet-semantisch element dat je enkel zou mogen gebruiken als je echt geen beter semantisch tekstelement kunt bedenken om je inhoud mee in te pakken of als je geen extra betekenis wil toevoegen. Bijvoorbeeld:</p> + +<pre class="brush: html"><p>Om 01:00 stapte de dronken koning terug naar zijn kamer, het bier deed niets om hem te helpen +terwijl hij door de deur waggelde<span class="editor-note">[Opmerking van de redacteur: Op dit moment in het +stuk, moeten de lichten worden gedimd]</span>.</p></pre> + +<p>In dit geval moet de opmerking van de redacteur gewoon extra regie aan de regisseur van het stuk bieden. Het hoeft geen extra semantische betekenis te krijgen. Voor goedziende gebruikers, kan je CSS gebruiken om de opmerking een beetje te onderscheiden van de rest van de tekst.</p> + +<p>{{HTMLElement("div")}} is een niet-semantisch element op blokniveau, dat je enkel zou moeten gebruiken als je geen beter semantisch blokelement kan bedenken of geen specifieke betekenis wil toevoegen. Beeld je bijvoorbeeld een widget in de vorm van een winkelkarretje in, dat je op elk moment kan openen terwijl je je op een koopsite bevindt:</p> + +<pre class="brush: html"><div class="winkelkarretje"> + <h2>Winkelkarretje</h2> + <ul> + <li> + <p><a href=""><strong>Zilveren oorbellen</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="zilveren oorbellen"> + </li> + <li> + ... + </li> + </ul> + <p>Totaal: $237.89</p> +</div></pre> + +<p>Dit is niet echt een <code><aside></code> want er is niet noodzakelijk een verband met de belangrijkste inhoud van de pagina (je wil de inhoud van dat karretje op elke pagina zichtbaar kunnen maken). Het rechtvaardigt ook niet echt het gebruik van een <code><section></code> want het vormt geen onderdeel van de belangrijkste inhoud van de pagina. In dit geval is een <code><div></code> dus prima. We hebben een koptekst toegevoegd die als een wegwijzer kan dienen zodat mensen met schermlezer de widget kunnen vinden.</p> + +<div class="warning"> +<p><strong>Waarschuwing</strong>: Divs zijn zo handig dat je ze nogal gemakkelijk te veel gaat gebruiken. Omdat ze geen semantische betekenis dragen, zullen ze je HTML-code snel rommelig maken. Wees voorzichtig en gebruik ze enkel als er geen betere semantische oplossing is en probeer het gebruik ervan tot een minimum te beperken; anders zal je veel werk moeten steken in het updaten en het onderhoud van je documenten.</p> +</div> + +<h3 id="Regeleindes_en_horizontale_lijnen">Regeleindes en horizontale lijnen</h3> + +<p>{{htmlelement("br")}} en {{htmlelement("hr")}} zijn twee elementen die je nu en dan zal gebruiken en die je dus beter wil leren kennen :</p> + +<p><code><br></code> creërt een regeleinde in een paragraaf; het is de enige manier om een rigide structuur in een serie kort lijnen te dwingen, zoals in een postadres of een gedicht. Bijvoorbeeld:</p> + +<pre class="brush: html"><p>Er was eens een meisje en ze heette Nell<br> +Die hield erg veel van HTML<br> +Maar haar structuur was slecht, haar semantiek was droef<br> +en haar opmaak was zo heel veel en erg stroef.</p></pre> + +<p>Zonder de <code><br></code>-elementen zou de paragraaf als een lange regel worden weergegeven (zoals we al eerder in de cursus hebben gezegd, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML negeert de meeste witte ruimte</a>). Als je ze in de code stopt, geeft de opmaak dit weer:</p> + +<p>Er was eens een meisje en ze heette Nell<br> + Die hield erg veel van HTML<br> + Maar haar strutuur was slecht, haar semantiek was droef<br> + en haar opmaak was zo heel veel en erg stroef.</p> + +<p><code><hr></code>-elementen creëren een horizontale lijn in het document die een thematische verandering in de tekst aangeeft (zoals een ander onderwerp of een scène. Visueel ziet die er gewoon uit als een horizontale lijn. Dit is een voorbeeld:</p> + +<pre><p>Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.</p> +<hr> +<p>Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.</p></pre> + +<p>Dit zou zo worden weergegeven:</p> + +<p>Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.</p> + +<hr> +<p>Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.</p> + +<h2 id="De_planning_van_een_eenvoudige_website">De planning van een eenvoudige website</h2> + +<p>Jbt gepland hoe de inhoud van je eenvoudige website eruit zal zien. De volgende logische stap is uit te werken welke inhoud je in de hele website zal steken, wat voor pagina's je nodig hebt en hoe ze moeten worden geordend en aan elkaar gelinkt om de beste gebruikerservaring mogelijk te maken. Dit noemen we {{glossary("Information architecture")}}. In een grote complexe website, kan er heel wat planning in dit proces worden gestoken maar voor een eenvoudige website van slechts een paar pagina's kan dit vrij simpel zijn en plezierig!</p> + +<ol> + <li>Denk eraan dat je een paar elementen hebt die vaak voorkomen in de meeste (misschien zelfs in alle) pagina's, zoals het navigatiemenu en de inhoud van de voettekst. Als je site bijvoorbeeld voor een zaak dient, is het een goed idee om je contactinformatie in de voettekst van elke pagina te steken. Noteer wat je op elke pagina terug wil zien komen <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>Vervolgens teken je een ruwe schets die toont hoe jij wil dat de structuur er op elke pagina zal uitzien (het zou er kunnen uitzien als onze simpele website hierboven). Noteer wat de functie van elk blok zal zijn. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Nu brainstorm je welke andere inhoud je op je website wil zien (inhoud die niet op elke pagina zal voorkomen). Maak er een grote lijst van en schrijf die op. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>De volgende stap is om all deze inhoudelijke componenten in groepen te sorteren. Op die manier krijg je een idee van welke onderdelen samen kunnen leven op de verscillende pagina's. Dit lijkt erg op een techniek die we {{glossary("Card sorting")}} noemen. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Probeer nu een ruwe sitemap te schetsen - maak een bubbel voor elke pagina van je site en trek lijnen die de typische workflow tussen de verschillende pagina's toont. De startpagina zal waarschijnlijk in het midden liggen. Link de meeste of zelfs alle anderen. De meeste pagina's in een kleine site zouden bereikbaar moeten zijn vanuit de belangrijkste navigatie, hoewel er uitzonderingen zijn. Je wil misschien ook opmerkingen toevoegen over hoe alles zal worden weergegeven .<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Actief_leren_creëer_je_eigen_sitemap">Actief leren: creëer je eigen sitemap</h3> + +<p>Volg nu dezelfde stappen en probeer zelf een eigen website te creëren. Waarover wil je een site bouwen? </p> + +<div class="note"> +<p><strong>Opmerking</strong>: Sla je werk ergens op; je hebt het misschien later nog nodig.</p> +</div> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Op dit moment zou je een beter idee moeten hebben van hoe je een webpagina of website kan structureren. In het laatste artikel van deze module zullen we het debuggen van HTML bestuderen.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Gevorderde gids voor HTML5 semantische elementen en het HTML5 overzichtsalgoritme.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/getting_started/index.html b/files/nl/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..740b87094d --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,513 @@ +--- +title: Beginnen met HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">In dit artikel nemen we de basisprincipes van HTML door — we definiëren elementen, attributen en alle andere belangrijke begrippen waarover je misschien al hebt gelezen en hoe ze in de taal passen. We tonen je ook hoe een HTML-element is gestructureerd en verklaren een aantal belangrijke basiseigenschappen van de taal. Terwijl we je daarmee op weg helpen, spelen we met HTML om je interesse op te wekken! </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis computers, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basiskennis software installatie</a> en basiskennis over <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">werken met bestanden</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Vertrouwd raken met de HTML-taal. Vaardigheden in de praktijk brengen door enkele HTML-elementen te schrijven.</td> + </tr> + </tbody> +</table> + +<h2 id="Wat_is_HTML">Wat is HTML?</h2> + +<p>{{glossary("HTML")}} (HyperText Markup Language) is geen programmeertaal; het is <em>een opmaaktaal </em>en hij wordt gebruikt om je browser te vertellen hoe de webpagina's die je bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie {{glossary("Element", "elementen")}}, die je kan gebruiken om verschillende onderdelen van je inhoud te verpakken zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De {{glossary("Tag", "tags")}} (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:</p> + +<pre>My cat is very grumpy</pre> + +<p>Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met ({{htmlelement("p")}}) paragraaflabels te omhullen:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<h2 id="Anatomie_van_een_HTML-element">Anatomie van een HTML-element</h2> + +<p>We gaan dit paragraafelement wat verder onderzoeken:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>De belangrijkste onderdelen van ons element zijn:</p> + +<ol> + <li><strong>De opening tag:</strong> (het openingslabel) Deze bestaat uit de naam van het element (in dit geval p), ingesloten door kleiner- en groter-dan-tekens. <elementnaam> toont ons waar het element en zijn invloed op de inhoud begint. In dit geval duidt het het begin van de paragraaf aan.</li> + <li><strong>De closing tag: </strong> (het eindlabel) Die is identiek aan de opening tag, behalve dat er ook nog een schuine streep voor de naam van het element staat. De schuine streep leunt naar voor en staat net achter <. Het eindlabel duidt het einde van het element aan, in dit geval dus het einde van de paragraaf. Beginners vergeten de eindmarkeerder nogal eens en dat kan tot vreemde resultaten leiden.</li> + <li><strong>De content:</strong> (de inhoud) Dit is de inhoud van het element, in dit geval gewoon een regel tekst. </li> + <li><strong>Het element:</strong> De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.</li> +</ol> + +<h3 id="Actief_leren_creër_je_eerste_HTML-element">Actief leren: creër je eerste HTML-element</h3> + +<p>Bewerk de regel in het <em>Invoer-</em>gebied hieronder. Sluit het in tussen de <code><em>-</code> en <code></em>-</code>labels. (Plaats <code><em></code> voor de regel om <em>het element te openen</em> en <code></em></code> erachter om <em>het element te sluiten</em>) — dit zou de regel cursief moeten benadrukken! Je zal je veranderingen live kunnen zien in het <em>Uitvoer-</em>gebied.</p> + +<p>Als je een fout maakt, kan je die altijd ongedaan maken door op de <em>Ongedaan maken-</em>knop te drukken. Als je echt vast raakt, druk dan op <em>Toon oplossing</em> om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">Dit is mijn tekst.</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan maken" /> + <input id="solution" type="button" value="Toon oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<em>Dit is mijn tekst.</em>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Geneste_Elementen">Geneste Elementen</h3> + +<p>Je kan elementen in andere elementen steken - we noemen dit <strong>nesten</strong>. Als we willen zeggen dat our cat VERY grumpy is, kunnen we het woord "very" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Je moet er echter wel voor zorgen dat je elementen correct worden genest: in het voorbeeld hierboven openden we het <p>-element eerst en dan het <strong>-element. Dus moeten we <strong> eerst sluiten en dan <p>. Het volgende is fout:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>De elementen moeten correct worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat je wil zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!</p> + +<h3 id="Blok-_versus_inline-elementen">Blok- versus inline-elementen</h3> + +<p>Elementen in HTML kunnen in twee belangrijke categorieën worden ingedeeld: elementen die als een blok functioneren en inline-elementen.</p> + +<ul> + <li>Elementen op blokniveau vormen een zichtbaar blok op de pagina — wat er ook aan vooraf ging, ze volgen op een nieuwe lijn en elke inhoud die erna komt zal ook op een nieuwe lijn staan. Zulke elementen zijn meestal structurele elementen in de pagina. Ze zijn bijv. paragrafen, lijsten, menu's, voetteksten enz. Een blokelement zal niet in een inline-element worden genest maar het kan wel in een ander blokelement worden genest. </li> + <li>Inline-elementen bestaan binnen elementen op blokniveau. Ze worden rond kleine delen van de inhoud geplaatst en dus niet rond volledige paragrafen en andere vormen van gegroepeerde inhoud. Ze zullen eerder in een paragraaf of tekst terechtkomen, bijvoorbeeld {{htmlelement("em")}} of {{htmlelement("strong")}} kan je in een {{htmlelement("a")}}-element (hyperlink) zetten om het element te benadrukken.</li> +</ul> + +<p>Bekijk het volgende voorbeeld eens:</p> + +<pre class="brush: html"><em>eerste</em><em>tweede</em><em>derde</em> + +<p>vierde</p><p>vijfde</p><p>zesde</p> +</pre> + +<p>{{htmlelement("em")}} is een inline-element zoals je hieronder kan zien. De eerste drie elementen bevinden zich op dezelfde lijn zonder ruimte tussen hen in. {{htmlelement("p")}} daarentegen is een element op blokniveau. Elk element verschijnt dus op een nieuwe lijn met ruimte boven en onder elk element. (De ruimte wordt gecreëerd door de standaard <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS stijl</a> die de browser op paragrafen toepast).</p> + +<p>{{ EmbedLiveSample('Blok-_versus_inline-elementen', 700, 200) }}</p> + +<div class="note"> +<p><strong>Opmerking</strong>: HTML5 heeft de elementcategorieën in HTML5 geherdefiniëerd : zie <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. Hoewel deze definities accurater en niet zo ambigu zijn als hun voorgangers, zijn ze wel een stuk moeilijker te begrijpen dan 'blok' en 'inline'. Daarom gaan we bij die twee blijven in dit artikel.</p> +</div> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Je kan nuttige referentiepagina's vinden die lijsten van blok- en inline-elementen bevatten — zie <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> en <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> +</div> + +<h3 id="Lege_elementen">Lege elementen</h3> + +<p>Niet alle elementen volgen hetzelfde patroon met een openingslabel, inhoud en eindlabel. Sommige elementen bestaan uit één enkel label, dat meestal wordt gebruikt om iets in de inhoud in te voegen/in te bedden. Het {{htmlelement("img")}}-element bijvoorbeeld voegt een afbeelding aan de pagina toe op de plaats waar het het element in de code is geplaatst:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Dit zou het volgende op je pagina moeten uitvoeren:</p> + +<p>{{ EmbedLiveSample('Lege_elementen', 700, 300) }}</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Lege elementen worden soms <em>void elementen</em> genoemd (<em>void </em>is natuurlijk Engels en betekent ook leeg).</p> +</div> + +<h2 id="Attributen">Attributen</h2> + +<p>Elementen kunnen ook attributen krijgen die er zo uitzien:</p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Attributen bevatten extra informatie over het element die je niet in de inhoud van dat element wil zien. In dit voorbeeld zie het class (klasse dus) attribuut dat je kan gebruiken om het element een naam te geven. Daarmee kan je het identificeren en er onder andere stijlinformatie op richten.</p> + +<p>Een attribuut bestaat uit:</p> + +<ol> + <li>Een spatie tussen het attribuut en de elementnaam (of het vorige attribuut als het element al een of meer attributen heeft).</li> + <li>De attribuutnaam, gevolgd door een is-gelijk-aan-teken (=).</li> + <li>Een attribuutwaarde tussen aanhalingstekens.</li> +</ol> + +<h3 id="Actief_leren_Attributen_aan_een_element_toevoegen">Actief leren: Attributen aan een element toevoegen</h3> + +<p>{{htmlelement("a")}} is ook een element — het vertegenwoordigt een anker en verandert de tekst die het insluit in een hyperlink. Dit element kan een aantal attributen krijgen, twee ervan zijn de volgende:</p> + +<ul> + <li><code>href</code>: De waarde van dit attribuut is het webadres waar je de link naar wil doen wijzen en waar de browser naartoe navigeert als er op de link wordt geklikt. Bijvoorbeeld: <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: Dit attribuut verschaft exta informatie over de link, zoals de aard van de pagina waarmee het anker ons verbindt. Bijvoorbeeld: <code>title="The Mozilla homepage"</code>. Dit attribuut zal als een tooltip verschijnen als de muis erover heen beweegt.</li> +</ul> + +<p>Bewerk de regel in het <em>invoer-gebied</em> hieronder en verander hem in een hyperlink naar je favoriete website. Eerst voeg je het <code><a>-</code>element toe, dan het <code>href-</code>attribuut en dan het <code>title-</code>attribuut. Je zal de verandering live kunnen updaten in het <em>uitvoer-gebied</em>. Je zou een link moeten zien die de inhoud van het <code>title</code>-attribuut toont als je met je muis over de link heen glijdt. Als je erop klikt zou je naar het webadres moeten worden gebracht dat in het href-element staat. Vergeet niet dat je een spatie tussen de elementnaam en elk attribuut moet plaatsen.</p> + +<p>Als je een fout maakt, kan je die altijd ongedaan maken met de <em>Ongedaan Maken </em>knop. Als je echt vastraakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">&lt;p&gt;Een link naar mijn favoriete website.&lt;/p&gt;</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan Maken" /> + <input id="solution" type="button" value="Toon Oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Een link naar mijn<a href="<code>https://www.mozilla.org/</code>" title="De Mozilla homepage">favoriete website</a>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> + +<h3 id="Boolean_attributen">Boolean attributen</h3> + +<p>Soms zal je attributen zonder waarden zien — dit is helemaal toegestaan. We noemen hen boolean attributen, en ze kunnen slechts één waarde hebben. Die is meestal dezelfde als de attribuutnaam. Neem het {{htmlattrxref("disabled", "input")}}-attribuut als voorbeeld. Je kan het toewijzen aan het invoerveld van een formulier dat je wil uitschakelen.(Het veld wordt dan grijs weergegeven en de gebruiker kan niets invullen.)</p> + +<pre><input type="text" disabled="disabled"></pre> + +<p>Zoals je hieronder kan zien, is een verkorte vorm ook toegestaan . Ter informatie hebben we ook een ingeschakeld invoerveld toegevoegd zoadat je beter begrijpt wat er gebeurt: </p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Beiden zullen het volgende produceren:</p> + +<p>{{ EmbedLiveSample('Boolean_attributen', 700, 100) }}</p> + +<h3 id="Aanhalingstekens_rond_attribuutwaarden_weglaten">Aanhalingstekens rond attribuutwaarden weglaten</h3> + +<p>Als je wat rondkijkt op het World Wide Web, zal je allerlei rare opmaakstijlen tegenkomen, waaronder waarden zonder aanhalingstekens. Dit is toegestaan in een aantal omstandigheden maar het zal je code in andere breken. Als we bijvoorbeeld ons linkvoorbeeld opnieuw bekijken, zouden we het kunnen herschrijven met enkel het <code>href-</code>attribuut en zonder aanhalinstekens zoals hieronder:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favoriete website</a></pre> + +<p>Maar als we het <code>title-</code>attribuut toevoegen, loopt het mis:</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=De Mozilla homepage>favoriete website</a></pre> + +<p>In deze situatie zal de browser je opmaak verkeerd interpreteren en denken dat het <code>title-</code>attribuut in feite uit drie attributen bestaat — een title-attribuut met "De" als waarde, en twee boolean attributen, <code>Mozilla</code> en <code>homepage</code>. Dit is natuurlijk niet de bedoeling en het zal fouten en onverwacht gedrag in de code veroorzaken, zoals je in het live voorbeeld hier beneden kunt zien. Probeer met je muis over de link heen te glijden om te zien wat de tekst van de titel is!</p> + +<p>{{ EmbedLiveSample('Aanhalingstekens_rond_attribuutwaarden_weglaten', 700, 100) }}</p> + +<p>We adviseren om de waarden van je attributen altijd tussen aanhalingstekens te zetten — je vermijdt er dit soort problemen mee en je code wordt ook leesbaarder. </p> + +<h3 id="Enkele_of_dubble_aanhalingstekens">Enkele of dubble aanhalingstekens?</h3> + +<p>In dit artikel zal je merken dat de attributen allemaal tussen dubbele aanhalingstekens staan. Het is echter mogelijk dat je in de HTML van sommige mensen enkele aanhalingstekens ziet staan. Dit is uitsluitend een kwestie van stijl en je bent vrij om je eigen voorkeur te volgen. De volgende twee lijnen gelijkwaardig:</p> + +<pre class="brush: html"><a href="http://www.example.com">Een link naar mijn voorbeeld.</a> + +<a href='http://www.example.com'>Een link naar mijn voorbeeld.</a></pre> + +<p>Je moet er echter wel voor zorgen dat je de twee niet met elkaar vermengt. Het volgende zal mis gaan!</p> + +<pre class="brush: html"><a href="http://www.example.com'>Een link naar mijn voorbeeld.</a></pre> + +<p>Als je één type aanhalingstekens in je HTML hebt gebruikt, kan je het andere type nesten:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Plezant, niet?">Een link naar mijn voorbeeld.</a></pre> + +<p>Als je hetzelfde type aanhalingstekens wil nesten, zal je <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML">HTML-entititeiten</a> voor de aanhalingstekens moeten gebruiken.</p> + +<h2 id="Anatomie_van_een_HTML-document">Anatomie van een HTML-document</h2> + +<p>Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten. Op hun eentje zijn ze echter niet erg nuttig. Nu gaan we zien hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mijn testpagina</title> + </head> + <body> + <p>Dit is mijn pagina</p> + </body> +</html></pre> + +<p>Wat steekt er in die pagina?</p> + +<ol> + <li><code><!DOCTYPE html></code>: het doctype. Lang geleden was HTML jong (rond 1991/2). Doctypes moesten toen als links naar een serie regels dienen. De HTML-pagina moest die regels volgen om als goede HTML te kunnen worden beschouwd. Dat kon automatische foutcontrole zijn en andere nuttige zaken. Ze zagen er toen ongeveer zo uit:</li> + <li> + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + Maar tegenwoordig trekt niemand zich nog iets van die regels aan. Ze zijn enkel nog een historisch artefact dat erin moet staan opdat alles correct zou werken. <code><!DOCTYPE html></code> is de kortste tekenserie die als een geldig doctype kan dienen; voorlopig is dat al dat je moet weten.</li> + <li><code><html></html></code>: Het <code><html>-</code>element. element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).</li> + <li><code><head></head></code>: Het <code><head>-</code>element gedraagt zich als een container voor alle zaken die je in je HTML-pagina wil steken maar die niet tot de inhoud behoren die je aan de gebruikers wil tonen. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van je pagina zoals je die in zoekresultaten wil zien verschijnen, CSS om je inhoud van stijlen te voorzien, tekensetverklaringen en meer. Je zal er meer over leren in het volgende artikel van deze serie.</li> + <li><code><meta charset="utf-8"></code>: Met dit element bepaal je dat de tekenset voor je document utf-8 zal zijn. In utf-8 steken bijna alle tekens die voor alle gekende menselijke talen worden gebruikt. In wezen houdt dit in dat je nu elke tekstinhoud aankan, die je erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan je helpen om later problemen te vermijden.</li> + <li><code><title></title></code>: Dit element stelt de titel van je pagina in. Dat is de titel die in de browsertab verschijnt waarin je pagina wordt geladen. Hij wordt ook gebruikt om de pagina te beschrijven als je hem als bladwijzer/favoriet instelt.</li> + <li><code><body></body></code>: Het <code><body>-</code>element bevat de volledige inhoud die je aan webgebruikers wil tonen als die je pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (audio tracks in het Engels) of wat dan ook.</li> +</ol> + +<h3 id="Actief_leren_Extra_functionaliteit_aan_een_HTML-document_toevoegen">Actief leren: Extra functionaliteit aan een HTML-document toevoegen</h3> + +<p>Als je met HTML op je lokale computer wil experimenteren, kan je het volgende doen:</p> + +<ol> + <li>Kopieer de HTML-pagina die je hierboven in 'Anatomie van een HTML-document' vindt.</li> + <li>Creër een nieuw bestand in je broncode-editor.</li> + <li>Plak the code in het nieuwe bestand.</li> + <li>Sla het bestand op als <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Je kan dit simpele HTML-jsabloon ook op de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a> vinden.</p> +</div> + +<p>Je kan het bestand nu in een webbrowser openen om te zien hoe de gegenereerde code eruitziet. Dan kan je de code bewerken en de browser vernieuwen om te zien wat het resultaat is. Eerst zal het er zo uitzien:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In deze oefening kan je de code lokaal op je computer bewerken, zoals we hierboven hebben uitgelegd, of je kan die in het bewerkbare voorbeeldvenster hieronder bewerken. (In deze oefening vertegenwoordigt het bewerkbare voorbeeldvenster gewoon de inhoud van het <code><body>-</code>element.) Probeer nu de volgende stappen uit te voeren:</p> + +<ul> + <li>Net onder het <code><body>-</code>openingslabel, voeg je een titel voor het document toe. Die zou tussen een <code><h1>-</code>openingslabel en een <code></h1>-</code>eindlabel moeten staan.</li> + <li>Bewerk de inhoud van de paragraaf en zorg dat er wat tekst in staat over iets dat je interesseert.</li> + <li>Zorg dat de belangrijke woorden goed opvallen door ze vet te maken. Dat doe je door ze tussen een <code><strong>-</code>openingslabel en een <code></strong>-</code>eindlabel te zetten.</li> + <li>Voeg een hyperlink aan je paragraaf toe, zoals <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">we eerder in dit artikel hebben uitgelegd</a>.</li> + <li>Voeg onder de paragraaf een afbeelding aan je document toe. Doe dit ook <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">zoals we eerder in dit artikel hebben uitgelegd</a>. Je krijgt bonuspunten als je erin slaagt de hyperlink naar een andere afbeelding te laten wijzen. (Dat kan een beeld zijn dat zich op je lokale computer bevindt of eentje dat je ergens in het internet hebt gevonden.)</li> +</ul> + +<p>Als je een fout maakt, kan je altijd op <em>Ongedaan Maken </em>klikken Als je echt vast raakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input"> +&lt;p&gt;Dit is mijn pagina.&lt;/p&gt;</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan Maken" /> + <input id="solution" type="button" value="Toon Oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +img { + max-width: 100%; +} + +.output { + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Ik geniet ervan om <strong>te drummen</strong>. Een van mijn favoriete drummers is Neal Peart, die\ + in de groep <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a> speelt.\ + Mijn favoriete Rush album is op dit moment <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> + +<h3 id="Witruimte_in_HTML">Witruimte in HTML</h3> + +<p>In de voorbeelden hierboven heb je misschien gemerkt dat er veel witruimte in de code staat. Dit is helemaal niet nodig; de twee volgende stukjes code zijn beiden correct:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>Witruimte kan uit spaties bestaan maar ook uit regeleindes. Het doet er niet toe hoeveel je ervan gebruikt; het HTML-ontledingsprogramma herleidt elke spatie tot een enkele wanneer het de code genereert. Dus waarom zou een mens zoveel witruimte gebruiken? Het antwoord is leesbaarheid — het maakt het zoveel gemakkelijker om te begrijpen wat er in je code gebeurt als je die aangenaam en netjes hebt opgesteld in plaats van opeengestapeld als een hoop troep. In onze HTML hebben we elk genest element twee spaties verder laten inspringen dan het element waar het in zit. Het is jouw zaak welke opmaakstijl je gebruikt (hoeveel spaties je gebruikt voor elk niveau van inspringing bijvoorbeeld) maar je zou moeten nadenken over een of andere vorm van opmaak.</p> + +<h2 id="Entiteitsverwijzingen_inclusief_speciale_tekens_in_HTML">Entiteitsverwijzingen: inclusief speciale tekens in HTML</h2> + +<p>De tekens <code><</code>, <code>></code>,<code>"</code>,<code>'</code> en <code>&</code> zijn speciale tekens in HTML. Ze vormen onderdelen van de HTML-syntaxis zelf dus hoe gebruik je een van die tekens in je tekst? Als je bijvoorbeeld echt een ampersand (& dus) wil gebruiken of een kleiner-dan-teken, hoe zorg je er dan voor dat het niet als code wordt geïnterpreteerd zoals in sommige browsers gebeurt?</p> + +<p>We moeten entiteitsverwijzingen gebruiken — speciale codes die tekens vertegenwoordigen en die in deze omstandigheden kunnen worden gebruikt. Elke entiteitsverwijzing begint met een ampersand (&) en eindigt op een puntkomma (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Letterlijk teken</th> + <th scope="col">Entiteitsverwijzing als equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In het voorbeeld hieronder kan je twee paragrafen zien waarin over webtechnologieën wordt gepraat:</p> + +<pre class="brush: html"><p>In HTML definiëer je een paragraaf met een <p>-element</p>. + +<p>In HTML definiëer je een paragraaf met een &lt;p&gt;-element.</p></pre> + +<p>In de live uitvoer hier beneden, kan je zien dat er met de eerste paragraaf iets is misgelopen. De browser denkt namelijk dat de <code><p></code> code is waarmee je een nieuwe paragraaf wil beginnen. De tweede paragraaf ziet er prima uit omdat we de kleiner- en groter-dan-tekens hebben vervangen door entiteitsverwijzingen.</p> + +<p>{{ EmbedLiveSample('Entiteitsverwijzingen_inclusief_speciale_tekens_in_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Op Wikipedia kan je een kaart van alle beschikbare entiteitsverwijzingen voor HTML-tekens vinden: <a class="external text" href="https://nl.wikipedia.org/wiki/Karakter-entiteitreferentie" rel="nofollow">Lijst van entiteitsverwijzingen voor XML- en HTML-tekens</a>.</p> +</div> + +<h2 id="HTML_commentaren">HTML commentaren</h2> + +<p>In HTML, zoals in de meeste programmeertalen, bestaat er een mechanisme om commentaren in je code te schrijven. Commentaren worden genegeerd door de browser en zijn onzichtbaar voor de gebruiker. Het doel van dit mechanisme is commentaren in je code te schrijven die verduidelijken hoe je code werkt, wat de verschillende delen van je code precies doen enz. Dit kan zeer nuttig zijn als je terugkeert naar code waar je al zes maanden niet meer aan hebt gewerkt en je je niet meer kan herinneren wat je hebt gedaan of als je je code doorgeeeft aan iemand anders die er verder mee zal werken.</p> + +<p>Om een deel van de inhoud in je HTML-bestand in een commentaar te veranderen, moet je die door de speciale markeerders <code><!--</code> en <code>--></code> omhullen. Bijvoorbeeld:</p> + +<pre class="brush: html"><p>Ik sta niet in een commentaar.</p> + +<!-- <p>Ik wel!</p> --></pre> + +<p>Zoals je hieronder kan zien, verschijnt de eerste paragraaf in de live uitvoer maar de tweede niet.</p> + +<p>{{ EmbedLiveSample('HTML_commentaren', 700, 100) }}</p> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Je hebt het einde van het artikel bereikt — ik hoop dat je van onze reis doorheen de fundamenten van HTML hebt genoten. Op dit punt zou je moeten begrijpen hoe de taal eruitziet, hoe hij werkt op een basisniveau en je zou nu een paar elementen en attributen moeten kunnen schrijven. Deze kennis is meer dan genoeg om de volgende artikelen te lezen. Daarin gaan we sommige behandelde onderwerpen in groter detail bespreken en we zullen een paar nieuwe eigenschappen van de taal introduceren. Stay tuned!</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Nu je meer over HTML gaat leren, zal je misschien ook de fundamenten van <a href="/en-US/docs/Learn/CSS">CSS</a> (Cascading Style Sheets of Waterval Stijlbestanden) willen onderzoeken. CSS is de taal die je gebruikt om je webpagina's te stijlen (om bijvoorbeeld je lettertype of kleuren te veranderen of de indeling van de pagina te wijzingen). HTML en CSS passen heel goed bij elkaar zoals je snel zal ontdekken.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html b/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html new file mode 100644 index 0000000000..1413987a12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html @@ -0,0 +1,452 @@ +--- +title: Geavanceerde tekstopmaak +slug: Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Er zijn nog vele andere elementen in HTML om je tekst mee op te maken waar we in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basisprincipes</a> niet aan toe zijn gekomen. De elementen die in dit artikel worden besproken zijn minder bekend maar niettemin nuttig om meer over te weten (en dan heb je de hele lijst nog lang niet gezien). In dit artikel leer je citaten op te maken, beschrijvende lijsten, computercode en andere verwante tekst, subscript en superscript, contactinformatie en nog veel meer.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis HTML zoals aangeboden in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML tekstopmaak zoals aangeboden in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML Tekst: basisprincipes. </a></td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Je leert hoe je minder bekende HTML-elementen kan gebruiken om gevorderde semantische functionaliteit mogelijk te maken.</td> + </tr> + </tbody> +</table> + +<h2 id="Beschrijvende_lijsten">Beschrijvende lijsten</h2> + +<p>In HTML Basisprincipes heb je geleerd hoe je <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lijsten">eenvoudige lijsten</a> in HTML op kan maken. We hebben het toen niet over een derde lijsttype gehad, eentje dat je nu en dan zal tegenkomen: <strong>beschrijvende lijsten</strong>. Het doel van deze lijsten is om een aantal lijstonderdelen op te maken samen met de beschrijvingen die ermee worden geassociëerd. Ze kunnen termen en hun definities zijn of vragen en antwoorden. Als voorbeeld gaan we nu een stel termen en hun definities bekijken:</p> + +<pre>Alleenspraak +Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk). +Monoloog +Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters. +Terzijde +Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</pre> + +<p>Beschrijvende lijsten gebruiken een andere verpakking als de andere lijsttypes— {{htmlelement("dl")}}. Elk lijstonderdeel wordt door een {{htmlelement("dt")}}-element omhuld ({{htmlelement("dt")}} is ee beschrijvende term of <strong>d</strong>escription <strong>t</strong>erm in het Engels) en elke beschrijving bevindt zich in een {{htmlelement("dd")}} (description description) element. We gaan nu de opmaak van ons voorbeeld voltooien:</p> + +<pre class="brush: html"><dl> + <dt>Alleenspraak</dt> + <dd>Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).</dd> + <dt>Monoloog</dt> + <dd>Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.</dd> + <dt>Terzijde</dt> + <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> +</dl></pre> + +<p>De standaardstijlen van de browser zullen de beschrijvingen van de beschrijvende lijst ietwat laten inspringen. MDN's standaardstijl volgt deze conventie vrij nauw op maar MDN maakt de termen ook vet om ze extra te benadrukken.</p> + +<dl> + <dt>alleenspraak</dt> + <dd>Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).</dd> + <dt>monoloog</dt> + <dd>Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.</dd> + <dt>terzijde</dt> + <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> +</dl> + +<p>Merk ook op dat het is toegelaten om verscheidene beschrijvingen aan één enkele term te koppelen. Bijvoorbeeld:</p> + +<dl> + <dt>terzijde</dt> + <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> + <dd>Vind je ook in een geschreven tekst of als onderdeel van een inhoud die verwant is met het onderwerp maar dat niet echt in de algemene inhoud past zodat die apart wordt gepresenteerd (vaak in een kader aan de zijkant).</dd> +</dl> + +<h3 id="Actief_leren_Maak_een_reeks_definities_op">Actief leren: Maak een reeks definities op</h3> + +<p>Het is tijd om zelf een beschrijvende lijst te maken. In het <em>invoerveld </em>voeg je elementen aan de ruwe tekst toe zodat die in het <em>uitvoerveld </em>als een beschrijvende lijst verschijnt. Als je wil, kan je ook je eigen termen en beschrijvingen gebruiken. </p> + +<p>Als je een fout maakt, kan je die altijd ongedaan maken door op de <em>Maak Ongedaan</em>-knop drukken. Als je echt vast raakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">Bacon +De lijm die de wereld aan elkaar plakt. +Eieren +De lijm die de cake bindt. +Koffie +De drank die de wereld 's morgens in gang krijgt. +Een lichtbruine kleur.</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan Maken" /> + <input id="solution" type="button" value="Toon Oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>De lijmt die de wereld aan elkaar plakt.</dd>\n <dt>Eieren</dt>\n <dd>De lijm die de cake bindt.</dd>\n <dt>Koffie</dt>\n <dd>De drank die de wereld \'s morgens in gang krijgt.</dd>\n <dd>Een lichtbruine kleur.</dd>\n</dl>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Citaten">Citaten</h2> + +<p>HTML beschikt ook over eigenschappen waameer je citaten kan opmaken. Je kan kiezen tussen elementen waarmee je de inhoud als een blokcitaat of als een inline citaat kan opmaken.</p> + +<h3 id="Blokcitaten">Blokcitaten</h3> + +<p>Als de inhoud op blokniveau wordt geciteerd, moet je dat aanduiden door die in een {{htmlelement("blockquote")}}-element in te bedden. (Dit kan een paragraaf zijn, meerdere paragrafen, een lijst enz.). Verder moet je er in een {{htmlattrxref("cite","blockquote")}}-attribuut een URL aan toevoegen die naar de bron van het citaat verwijst. De volgende opmaak bijvoorbeeld is uit de MDN <code>pagina over het <blockquote></code>-element gehaald.</p> + +<pre class="brush: html"><p>Het <strong>HTML <code>&lt;blockquote&gt;</code> element</strong> (of <em>HTML Blok +Citaat Element</em>) maakt duidelijk dat het ingesloten element een langer citaat is.</p></pre> + +<p>Om dit in een blokcitaat te veranderen, doen we dit :</p> + +<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p>Het <strong>HTML <code>&lt;blokquote&gt;</code> element</strong> (of <em>HTML Blok + Citaat Element</em>) duidt aan dat het ingesloten element een langer citaat is.</p> +</blockquote></pre> + +<p>De standaardstijl van een browser zal dit als een ingesprongen paragraaf weergeven die aanduidt dat dit een citaat is. MDN doet dit ook en voegt er nog wat extra stijl aan toe:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p><strong>Het HTML <code><blockquote></code> element</strong> (of <em>HTML Blokcitaat element</em>) duidt aan dat de ingesloten tekst een langer citaat is.</p> +</blockquote> + +<h3 id="Inline_citaten">Inline citaten</h3> + +<p>Inline citaten werken op exact dezelfde manier met één uitzondering: ze gebruiken het {{htmlelement("q")}}-element. Als voorbeeld zie je de opgemaakte tekst hieronder: hij bevat een citaat uit de MDN <code><q></code> pagina:</p> + +<pre class="brush: html"><p>Het citaat element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld voor korte citaten die geen volledige paragraaf beslaan. </q></p></pre> + +<p>De standaardstijl van een browser zal dit als normale tekst weergeven die tussen aanhalingstekens staat en zo aanduidt dat het hier om een citaat gaat. Zoals dit:</p> + +<p>Het citaat element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld voor korte citaten die geen volledige paragraaf beslaan.</q></p> + +<h3 id="Het_cite-attribuut_en_het_cite-element">Het cite-attribuut en het cite-element</h3> + +<p>De inhoud van het {{htmlattrxref("cite","blockquote")}}-attribuut klinkt nuttig, maar spijtig genoeg doen browsers, schermlezers enz. er niet echt veel mee. Je kan de inhoud van <code>cite</code>, niet zichtbaar maken in de browser zonder dat je daarvoor je eigen oplossing in JavaScript of CSS moet schrijven. Als je de bron van je citaat beschikbaar wil maken op de pagina, kan je het {{htmlelement("cite")}}-element beter naast het citaat-element plaatsen. Dit element moet eigenlijk de bron van het citaat bevatten, i.e. de naam van het boek of van de persoon die het citaat heeft gezegd, maar er is geen reden waarom je de tekst in het <code><cite>-</code>element niet op de één of andere manier aan de bron van het citaat zou kunnen linken:</p> + +<pre class="brush: html"><p>Volgens de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<cite>MDN-pagina over het blokcitaat</cite></a>: +</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p>Het <strong>HTML <code>&lt;blockquote&gt;</code>-element</strong> (of <em>HTML Blokcitaat-element</em>) + duidt aan dat de ingesloten tekst een langer citaat is.</p> +</blockquote> + +<p>Het citaatelement — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld +voor korte citaten die niet uit meerdere paragrafen bestaan.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> +<cite>MDN-pagina over het q-elementa</cite></a>.</p></pre> + +<p>De bron van een citaat wordt standaar cursief gedrukt. Je kan deze code aan het werk zien in ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> voorbeeld.</p> + +<h3 id="Actief_leren_Wie_zei_dat">Actief leren: Wie zei dat?</h3> + +<p>Tijd voor nog een voorbeeld met actief leren! In dit voorbeeld willen we het volgende:</p> + +<ol> + <li>Verander de middelste paragraaf in een blokcitaat en voeg een <code>cite</code>-attribuut toe.</li> + <li>Verander een deel van de derde paragraaf in een inline citaat en zorg ervoor dat het element ook een <code>cite</code>-attribuut bevat.</li> + <li>Voeg een <code><cite></code>-element toe aan elk citaat.</li> +</ol> + +<p>Zoek online naar geschikte bronnen.</p> + +<p>Als je een fout maakt, kan je altijd op <em>Maak Ongedaan</em> drukken. Als je echt vast raakt, kan je op de <em>Toon Oplossing</em>-knop drukken om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input"><p>Hallo en welkom op mijn motivatiepagina. Zoals Confucius ooit zei:</p> + +<p>Het doet er niet toe hoe langzaam je gaat zolang je maar niet stopt.</p> + +<p>Ik houd ook van het concept van positief denken en de nood om negatieve gesprekken met jezelf te elimineren. +(zoals vermeld in Affirmations for Positive Thinking.)</p></textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Maak Ongedaan" /> + <input id="solution" type="button" value="Toon Oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p>Hallo en welkom op mijn motivatiepagina. Zoals <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> ooit zei:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>Het doet er niet toe hoe langzaam je gaat zolang je maar niet stopt.</p>\n</blockquote>\n\n<p>Ik houd ook van het concept van positief denken en <q cite="http://www.affirmationsforpositivethinking.com/index.htm">de nood om negatieve gesprekken met jezelf te elimineren</q> (zoals vermeld in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking.</cite></a>.)</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Afkortingen">Afkortingen</h2> + +<p>Het {{htmlelement("abbr")}}-element is een ander vrij courant element dat je zal tegenkomen als je op het web surft. Het omhult een afkorting of acroniem en verschaft ook de volledige term (die in het {{htmlattrxref("title")}}-attribuut steekt.) We gaan eerst een paar voorbeelden bekijken:</p> + +<pre><p>We gebruiken <abbr title="Hypertext Markup Language">HTML</abbr> om onze webdocumenten te structureren.</p> + +<p>Ik denk dat <abbr title="Monseigneur">Mgr.</abbr> Green het in de keuken deed met de kettingzaag.</p></pre> + +<p>Deze zullen er ongeveer zo uitzien (de volledige tekst zal als een tooltip verschijnen als je er met je muis overeen glijdt):</p> + +<p>We gebruiken <abbr title="Hypertext Markup Language">HTML</abbr> om onze webdocumenten te structureren.</p> + +<p>Ik denk dat <abbr title="Reverend">Mgr.</abbr> Green het in de keuken deed met de kettingzaag.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Er is nog een ander element, {{htmlelement("acronym")}}, dat in feite hetzelfde doet als <code><abbr>. Dit element was</code> specifiek voor acroniemen bedoeld en niet zozeer voor afkortingen. Het wordt echter niet meer gebruikt — browsers ondersteunden het niet zo goed als <code><abbr></code> en de functies zijn zo gelijkaardig dat men het gevoel had dat het zinloos was om beide elementen te hebben. Gebruik dus gewoon altijd <code><abbr></code>.</p> +</div> + +<h3 id="Actief_leren_maak_een_afkorting_op">Actief leren: maak een afkorting op</h3> + +<p>Voor deze eenvoudige opdracht, willen we dat je gewoon een afkorting opmaakt. Je kan het voorbeeld hier beneden gebruiken of het vervangen door eentje dat je zelf kiest.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input"><p>NASA doet echt wel opwinded werk.</p></textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan Maken" /> + <input id="solution" type="button" value="Toon Oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 5em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> doet echt wel opwinded werk</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Contactinformatie_opmaken">Contactinformatie opmaken</h2> + +<p>HTML heeft een element om contactinformatie mee op te maken — {{htmlelement("address")}}. Het element omhult gewoon je contactinformatie, bijvoorbeeld:</p> + +<pre class="brush: html"><address> + <p>Chris Mills, Manchester, Het Grimmige Noorden, UK</p> +</address></pre> + +<p>Er is wel een ding dat je moet onthouden: het <address>-element is bedoeld om de contactinformatie op te maken van de persoon die het HTML-document heeft geschreven en niet van <em>eender welk</em> adres. Het voorbeeld hierboven is dus enkel oké als Chris het document heeft geschreven waarin de opmaak verschijnt. Iets zoals het volgende is ook oké:</p> + +<pre class="brush: html"><address> + <p>Deze pagina is geschreven door <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Superscript_en_subscript">Superscript en subscript</h2> + +<p>Nu en dan zal je superscript en subscript nodig hebben bij de opmaak van inhoud zoals een datum, een chemische formule en wiskundige vergelijkingen. Het {{htmlelement("sup")}} en het {{htmlelement("sub")}}-element zorgen ervoor dat die inhoud de juiste betekenis krijgt. Zoals in dit voorbeeld:</p> + +<pre class="brush: html"><p>Mijn verjaardag valt op de 25<sup>ste</sup> mei 2001.</p> +<p>De chemische formule van caffeïne is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>Als x<sup>2</sup> gelijk is aan 9, dan is x gelijk 3 aan of -3.</p></pre> + +<p>De output van deze code ziet er zo uit:</p> + +<p>Mijn verjaardag valt op de 25<sup>ste</sup> mei 2001.</p> + +<p>De chemische formule van caffeïne is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> + +<p>Als x<sup>2</sup> gelijk is aan 9, dan is x gelijk aan 3 of -3.</p> + +<h2 id="De_weergave_van_computercode">De weergave van computercode</h2> + +<p>Er bestaan een aantal elementen waarmee je computercode kan opmaken in HTML:</p> + +<ul> + <li>{{htmlelement("code")}}: Voor de opmaak van algemene computercode.</li> + <li>{{htmlelement("pre")}}: Voor de opmaak van tekstblokken met een vaste breedte waarin de witte ruimte bewaard blijft (in het algemeen zijn dat blokken met code. Je hoeft geen speciale karakters te gebruiken voor regeleindes of witte ruimte. Alles binnen de pre-tags wordt weergegeven zoals jij het hebt getypt.)</li> + <li>{{htmlelement("var")}}: Voor de opmaak van de namen van variabelen.</li> + <li>{{htmlelement("kbd")}}: Voor de opmaak van allerlei vormen van invoer die (onder andere via een toetsenbord) is ingegeven in de computer.</li> + <li>{{htmlelement("samp")}}: Voor de opmaak van de uitvoer van een computerprogramma.</li> +</ul> + +<p>We gaan een paar voorbeelden bekijken. Probeer er wat mee te spelen (je kan een kopie van ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> voorbeeldbestand nemen):</p> + +<pre class="brush: html"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Owww, stop met in mijn ribben te porren!'); +}</code></pre> + +<p>Je zou geen weergave-elementen mogen gebruiken zoals <code>&lt;font&gt;</code> en <code>&lt;center&gt;</code>.</p> + +<p>In het JavaScript voorbeeld hierboven vertegenwoordigt <var>para</var> een paragraaf-element.</p> + +<p>Selecteer alle tekst met <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes van 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>De code hierboven zal er zo uitzien:</p> + +<p>{{ EmbedLiveSample('Representing_computer_code','100%',300) }}</p> + +<h2 id="De_opmaak_van_uren_en_data">De opmaak van uren en data</h2> + +<p>HTML heeft ook het {{htmlelement("time")}}-element om uren en data in een formaat om te zetten dat door een machine kan gelezen worden. Bijvoorbeeld:</p> + +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 januari 2016</<span class="pl-ent">time</span>></pre> + +<p>Waarom is dit nuttig? Wel, er zijn vele manieren waarop mensen data noteren. De datum hierboven zou kunnen worden geschreven als:</p> + +<ul> + <li>20 januari 2016</li> + <li>20th January 2016</li> + <li>jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>De 20ste van de volgende maand</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>Enzovoort</li> +</ul> + +<p>Maar deze verschillende vormen kunnen niet gemakkelijk worden herkend door de computers. Wat als je automatisch de data van alle gebeurtenissen in een pagina zou willen grijpen en die in een kalender steken ? Met het {{htmlelement("time")}}-element kan je een ondubbelzinnige tijd en uur vastmaken aan je datum zodat die door een machine kan gelezen worden .</p> + +<p>Het basisvoorbeeld hierboven toont ons een simpele datum, maar er zijn nog vele andere opties mogelijk. Bijvoorbeeld:</p> + +<pre class="brush: html"><!-- Eenvoudige standaarddatum --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Enkel jaar en maand --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Enkel maand en dag --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Enkel tijd, uren en minuten --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- Je kan ook seconden en milliseconden weergeven! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Datum en tijd --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Datum en tijd met tijdzone --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Vermelding van een specifiek weeknummer--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>En zo komen we aan het einde van onze studie over HTML tekst en semantiek. Wees je er wel van bewust dat wat je in deze cursus hebt gezien lang niet alles is. Er zijn nog veel meer HTML tekstelementen. We hebben geprobeerd om de belangrijkste elementen te bespreken en een aantal van de courante element die je in het wild zal tegenkomen of ten minste interessant zal vinden. Om meer HTML-elementen te vinden, kan je een kijkje nemen op onze <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> pagina. (de <a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> sectie zou een zeer goede plaats kunnen zijn om te beginnen.) In het volgende artikel zullen we de HTML-elementen bekijken die je gebruikt om de verschillende onderdelen van een HTML-document te structureren.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html b/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html new file mode 100644 index 0000000000..b6e0307328 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html @@ -0,0 +1,257 @@ +--- +title: Wat steekt er in het hoofd? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Het {{glossary("Head", "hoofd")}} van een HTML-document is het deel dat niet wordt getoond in de webbrowser wanneer de pagina is geladen. Het bevat informatie zoals de {{htmlelement("title")}} van de pagina, links naar {{glossary("CSS")}} (als je je HTML-inhoud met CSS wil stijlen), koppelingen naar aangepaste favicons en andere metadata (data over de HTML, zoals wie die geschreven heeft en belangrijke sleutelwoorden die het document beschrijven.) In dit artikel behandelen we alle zaken die we hierboven hebben vermeld en we geven je een goede basis om met de opmaak en andere code om te gaan die in het hoofd zou moeten leven. </p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis HTML vergelijkbaar met de informatie die is aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Over het HTML-hoofd leren: wat is zijn doel, wat zijn de belangrijkste onderdelen die het kan bevatten en welk effect kan het hebben op het HTML-document.</td> + </tr> + </tbody> +</table> + +<h2 id="Wat_is_het_HTML-hoofd">Wat is het HTML-hoofd?</h2> + +<p>We bekijken opnieuw het eenvoudige <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML-document dat we in het vorige artikel hebben besproken</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mijn testpagina</title> + </head> + <body> + <p>Dit is mijn pagina</p> + </body> +</html></pre> + +<p>Het HTML-hoofd is de inhoud van het {{htmlelement("head")}}-element. In tegenstelling tot de inhoud van het {{htmlelement("body")}}-element die wordt weergegeven als de pagina in een browser wordt geladen, is de inhoud van het hoofd niet niet zichtbaar op de pagina. De taak van het hoofd is om {{glossary("Metadata", "metadata")}} over het document te bevatten. In het voorbeeld hierboven is het hoofd vrij klein:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Mijn testpagina</title> +</head></pre> + +<p>In grotere pagina's echter, kan het hoofd echt wel vol allerlei zaken staan — ga maar eens naar een paar van je favoriete websites en gebruik de <a href="/en-US/docs/Learn/Discover_browser_developer_tools">hulpprogramma's voor ontwikkelaars</a> om de inhoud van hun hoofden te onderzoeken. Ons doel is hier niet om je alles te tonen dat je in het hoofd kan zetten en gebruiken. We willen je wel uitleggen wat de meest voor de hand liggende zaken zijn die je in je hoofd kan plaatsen, hoe je ze moet gebruiken en je er een beetje bekend mee maken. Laat ons beginnen.</p> + +<h2 id="Een_titel_toevoegen">Een titel toevoegen</h2> + +<p>We hebben het {{htmlelement("title")}}-element al in actie gezien — het kan namelijk gebruikt worden om een titel aan het document toe te voegen. Dit kan echter verward worden met het {{htmlelement("h1")}}-element dat gebruikt kan worden om de belangrijkste kop aan de inhoud van je body toe te voegen — die kop wordt soms de paginatitel genoemd maar het zijn twee verschillende zaken!</p> + +<ul> + <li>Het {{htmlelement("h1")}}-element verschijnt op de pagina wanneer die in de browser wordt geladen — over het algemeen zou die maar één keer per pagina gebruikt mogen worden. Namelijk om de titel van je pagina-inhoud op te maken (de titel van een verhaal, of de kop van een nieuwsbericht of wat er dan ook geschikt is voor jou).</li> + <li>Het {{htmlelement("title")}}-element behoort tot de metadata en bevat de titel van het volledige HTML-document (niet die van de inhoud van het document)</li> +</ul> + +<h3 id="Actief_leren_We_onderzoeken_een_eenvoudig_voorbeeld">Actief leren: We onderzoeken een eenvoudig voorbeeld</h3> + +<ol> + <li>Om met dit hoofdstuk te beginnen, willen we dat je naar onze Github repo gaat en een kopie van onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html pagina</a> downloadt. Er zijn twee manieren om dit te doen: + + <ol> + <li>Je kan met behulp van je broncodeverwerkerde de code in de pagina in een nieuw tekstbestand kopiëren en die ergens op een goede plek opslaan.</li> + <li>Druk op de "Raw"-knop van de pagina. De code zal in een nieuwe tabpagina verschijnen. Vervolgens selecteer je de tekst selecteren, je kopiëert hem en je kiest een plek uit waar je het bestand kan opslaan.</li> + </ol> + </li> + <li>Open nu het bestand in je browser. Je zou een pagina moeten zien die er zo uitziet: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Het zou nu volledig duidelijk moeten zijn waar de <code><h1></code>-inhoud verschijnt en waar die van de <code><title></code>!</p> + </li> + <li> Je kan nu de code in je broncodeverwerker openen, de inhoud van deze elementen bewerken, de code opslaan en dan de pagina in je browser vernieuwen. Veel plezier!</li> +</ol> + +<p>De inhoud van het <code><title>-</code>element wordt ook op andere manieren gebruikt. Als je bijvoorbeeld een bladwijzer van de pagina wil maken, zal je de inhoud van het <code><title>-</code>element als een suggestie voor de naam van de bladwijzer ingevuld zien staan (Om een bladwijzer te maken klik je met de <em>rechtermuisknop bovenaan in de bladwijzerbalk. </em>Dan kies je<em> Nieuwe bladwijzer</em> of klik je op<em> het sterretje bovenaan in het menu </em>in Firefox).</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>De <code><title>-</code>inhoud wordt ook in zoekresultaten gebruikt zoals je hieronder zult zien.</p> + +<h2 id="Metadata_het_<meta>-element">Metadata: het <meta>-element</h2> + +<p>Metadata zijn data die data beschrijven en HTML heeft een "officiële" manier om metadata aan een document toe te voegen — het {{htmlelement("meta")}}-element. Natuurlijk kan al het andere waarover we in dit artikel al hebben gesproken ook als metadata worden beschouwd. Er zijn vele verschillende soorten <code><meta>-</code>element die kunnen worden opgenomen in het <head> van je pagina, maar die gaan we nog niet proberen uit te leggen omdat dat gewoon te verwarrend zou worden. In de plaats daarvan gaan we nu een paar zaken uitleggen die je vaak zal zien, gewoon om je een idee te geven van wat metadata zijn.</p> + +<h3 id="De_tekencodering_van_je_document_bepalen">De tekencodering van je document bepalen</h3> + +<p>In het voorbeeld dat we hierboven hebben gezien, staat deze regel:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>Dit element bepaalt de tekencodering van het document . Dit is de tekenset (i.e. de karakters, zoals onze letters, Japanse tekens, wiskundige symbolen...) die je document mag gebruiken. <code>utf-8</code> is een universele tekenset waarin zowat elk karakter in elke menselijke taal is opgenomen. Dit betekent dat je webpagina in staat zal zijn om elke taal weer te geven. Het is dan ook een goed idee om deze tekenset toe te voegen aan elke webpagina die je creëert! Je pagina zal bijvoorbeeld Engelse en Japanse karakters prima aankunnen:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Als je je karakterencodering volgens <code>ISO-8859-1</code> instelt (de tekenset voor het Latijnse alfabet), zal de weergave van je pagina volledig in de knoei raken:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Actief_leren_Een_experiment_met_tekenencodering">Actief leren: Een experiment met tekenencodering</h3> + +<p>Om dit uit te proberen, neem je het eenvoudige HTML-sjabloon dat je in de vorige sectie over het <code><title>-</code>element hebt gevonden (de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html pagina</a>). Probeer de meta tekenset-waarde in <code>ISO-8859-1 </code>te veranderen en voeg dan wat Japanse tekens aan je pagina toe. Dit is de code die we hebben gebruikt:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Een_auteur_en_een_beschrijving_toevoegen">Een auteur en een beschrijving toevoegen</h3> + +<p>Vele <code><meta>-</code>elementen kunnen ook attributen voor naam en inhoud krijgen:</p> + +<ul> + <li><code>name</code> bepaalt met welke type meta-element je werkt en welke type informatie het bevat.</li> + <li><code>content</code> (inhoud in het Nederlands) bepaalt welke meta-inhoud wordt gebruikt.</li> +</ul> + +<p>Er bestaan twee nuttige meta-elementen: eentje waarmee je de auteur van de pagina kan vermelden en nog één dat de gebruiker een een beknopte beschrijving van de pagina verschaft. Laat ons een voorbeeld bekijken:</p> + +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="Het MDN Leerplatform heeft als doel +totale beginners alle informatie te verschaffen om te kunnen beginnen +met het ontwerpen van websites en applicaties."></pre> + +<p>Er zijn een paar redenen waarom het nuttig is de auteur te vermelden: het is handig omdat je erachter kan komen wie de pagina heeft geschreven en je kan hem/haar/hen vragen over de inhoud stellen. Sommige inhoudsbeheersystemen selecteren automatisch de auteursinformatie en maken die beschikbaar voor zulke doeleinden.</p> + +<p>Vergeet niet dat je de Engelse termen <em>name, description </em>(beschrijving) en <em>content </em>(inhoud) in je HTML-pagina moet gebruiken.</p> + +<p>Het is nuttig als een <em>description </em>sleutelwoorden bevat die relevant zijn voor de inhoud op je pagina omdat die je pagina hoger in relevante resultaten van zoekmachines doet verschijnen (zulke activiteiten noemen we <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a> (optimalisatie van zoekmachines) or {{glossary("SEO")}}.)</p> + +<h3 id="Actief_leren_Het_gebruik_van_de_beschrijving_in_zoekmachines">Actief leren: Het gebruik van de beschrijving in zoekmachines</h3> + +<p>De <em>description </em>(beschrijving) wordt ook gebruikt in de pagina's met resultaten van zoekmachines. We gaan dit nu verder onderzoeken met een oefening.</p> + +<ol> + <li>Ga naar het <a href="https://developer.mozilla.org/en-US/">voorblad van het Mozilla Developer Network</a>.</li> + <li>Bekijk de bron van de pagina (Klik met de rechtermuisknop + <kbd>Ctrl</kbd> op de pagina, kies <em>Paginabron bekijken</em>.)</li> + <li>Zoek het metalabel met de description. Die zal er zo uitzien: + <pre class="brush: html"><meta name="description" content="Het Mozilla Developer Network (MDN) biedt informatie over Open-Web-technologieën waaronder HTML, CSS, en API's voor zowel websites als HTML5-apps. Ook documenteert het Mozilla producten, zoals Firefox OS."></pre> + </li> + <li>Zoek nu "Mozilla Developer Network" in je favoriete zoekmachine (wij gebruikten Yahoo). In de zoekresultaten zal je de inhoud zien van de description <code><meta>-</code> en de content (inhoud) van het <code><title>-</code>element — zeker de moeite waard om te hebben! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: In Google zal je onder de hoofdlink van de MDN-startpagina een paar relevante MDN-pagina's zien — deze worden site koppelingen genoemd en je kan die configureren met <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — een manier om de zoekresultaten van je site te verbeteren in de Google zoekmachine.</p> +</div> + +<div class="note"> +<p><strong>Opmerking</strong>: Vele <code><meta></code> eigenschappen worden eigenlijk niet meer gebruikt. Het sleutelwoord <code><meta>-</code>element bijvoorbeeld, zou sleutelwoorden voor zoekmachines moeten verschaffen om zo de relevantie van de pagina voor verschillende zoektermen te bepalen. Het wordt nu door zoekmachines genegeerd omdat spammers deze lijst van sleutelwoorden met honderden sleutelwoorden opvulden en zo de resultaten verdraaiden. </p> +</div> + +<h3 id="Andere_metadata-types">Andere metadata-types</h3> + +<p>Terwijl je in het web zit rond te scharrelen, zal je ook andere types van metadata tegenkomen. Vele eigenschappen die je op websites zult zien zijn hun eigen creaties en ontworpen om bepaalde sites (zoals socialenetwerksites) specifieke informatie te verschaffen die ze kunnen gebruiken.</p> + +<p><a href="http://ogp.me/">Open Graph Data</a> bijvoorbeeld is een metadata-protocol dat Facebook heeft uitgevonden om websites van verrijkte metadata te voorzien. In de MDN-broncode, zal je dit vinden:</p> + +<pre class="brush: html"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Dat heeft ondere andere het volgende effect: als je een hyperlink maakt naar MDN op facebook, zal de hyperlink samen met een afbeelding en een beschrijving verschijnen: een verrijkte ervaring voor gebruikers.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter heef ook gelijkaardige eigen metadata, die een vergelijkbaar effect hebben als de URL van de site op twitter.com wordt getoond. Bijvoorbeeld:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Eigen_op_maat_gemaakte_iconen_toevoegen_aan_je_site">Eigen op maat gemaakte iconen toevoegen aan je site</h2> + +<p>Om het design van je site verder te verrijken, kan je referenties naar op maat gemaakte iconen in je metadata steken. Die zullen in een aantal contexten worden weergegeven.</p> + +<p>De nederige favicon hoort er al vele, vele jaren bij. Je vindt het bovenaan in het tab-gedeelte naast de <title>-inhoud van je pagina staat en naast je bladwijzers in je bladwijzerbalk. Het was het eerste icoon van dit type, een 16 x 16 pixel icoon dat op meerdere plaatsen wordt gebruikt. De favicon kan op twee manieren aan je pagina worden toegevoegd:</p> + +<ol> + <li>Je slaat hem op in dezelfde folder als die waarin de index-pagina van je site is opgeslagen en je doet dat met de <code>.ico-</code>extensie. (De meeste browsers zullen favicons in gewonere formaten ondersteunen zoals<code>.gif</code> of <code>.png</code>, maar als je het ICO-formaat gebruikt zal dat ervoor zorgen dat het werkt, zelfs in Internet Explorer 6.)</li> + <li>Creëer er een koppeling naar door de volgende lijn in je HTML-<code><head></code> toe te voegen: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Moderne browsers gebruiken favicons op verschillende plaatsen, zoals in de tab waarin de pagina is geopend, en in het bladwijzermenu als je een bladwijzer maakt van je pagina :</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Er spelen tegenwoordig ook nog vele andere icoon-types mee. Je zal dit bijvoorbeeld in de broncode van de MDN-startpagina vinden:</p> + +<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>De commentaren verklaren waarvoor elk icoon wordt gebruikt — deze elementen zorgen er bijvoorbeeld voor dat een icoon met een mooie hoge resolutie wordt gebruikt als de site wordt opgeslagen in het startscherm van een iPad.</p> + +<p>Maak je nu nog niet te veel zorgen over de implementatie van al deze verschillende soorten iconen — dit is een vrij gevorderde eigenschap and we zullen er geen kennis verwachten in deze cursus. Het belangrijkste doel is om je te laten weten dat dit soort zaken bestaat. Moest je er eentje tegenkomen terwijl zit rond te snuffelen in de broncode van één of andere website, dan weet je waar je mee bezig bent.</p> + +<h2 id="CSS_en_JavaScript_toepassen_op_HTML">CSS en JavaScript toepassen op HTML</h2> + +<p>Zowat alle websites gebruiken tegenwoordig {{glossary("CSS")}} om ze een coole look te geven en {{glossary("JavaScript")}} om interactieve functionaliteit mogelijk te maken. Voorbeelden daarvan zijn videospelers, plattegronden, spelletjes en nog veel meer. CSS en Javascript worden meestal via respectievelijk het {{htmlelement("link")}}-element en het {{htmlelement("script")}}-element op een webpagina toegepast.</p> + +<ul> + <li> + <p>Het {{htmlelement("link")}}-element staat altijd in het hoofd van je document. Het krijgt twee attributen, rel="stylesheet", dat aanduidt dat het het stijlblad is van het document en href, dat het pad naar het stijlblad-bestand bevat:</p> + + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>Het {{htmlelement("script")}}-element hoeft niet in het hoofd te worden gezet; in feite is het vaak beter om het aan de onderkant van het body van het document te plaatsen (net voor het <code></body>-eindlabel</code>) om er zeker van te zijn dat alle HTML-inhoud eerst door de browser is ingelezen vooraleer de browser er Javascript op probeert toe te passen. (Als JavaScript een element probeert te gebruiken dat nog niet bestaat, zal de browser een foutmelding genereren.)</p> + + <pre class="brush: html"><script src="my-js-file.js"></script></pre> + + <p><strong>Opmerking</strong>: Het <code><script>-</code>element mag er dan als een leeg element uitzien, dat is het echt niet en het heeft dus een eindlabel nodig. In plaats van naar een extern scriptbestand te wijzen, kan je er ook voor kiezen om je volledige scriptcode tussen de twee labels van het <code><script>-</code>element te plaatsen.</p> + </li> +</ul> + +<h3 id="Actief_leren_CSS_en_JavaScript_op_een_pagina_toepassen">Actief leren: CSS en JavaScript op een pagina toepassen</h3> + +<ol> + <li>Om met deze oefening te beginnen, grijp je een kopie van onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> en <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> bestanden en sla je ze op je lokale computer in dezelfde map op. Zorg ervoor dat ze worden opgeslagen met de juiste namen en bestandsextensies.</li> + <li>Open het HTML-bestand in je browser en in je broncodebewerker.</li> + <li>Voeg nu de {{htmlelement("link")}}- en {{htmlelement("script")}}-elementen toe aan je HTML zoals hierboven is uitgelegd. Op die manier worden je CSS en JavaScript toegepast op je HTML.</li> +</ol> + +<p>Als je dit correct doet en je HTML opslaat, zal je zien dat er vanalles is veranderd wanneer je de browser vernieuwt:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Het JavaScript heeft een lege lijst aan de pagina toegevoegd. Als je nu ergens op de pagina klikt, zal een dialoogvenster omhoog komen. Het zal je vragen wat tekst in te voeren om een nieuw lijstonderdeel toe te voegen. Als je op de OK-knop drukt, zal de tekst als een nieuw lijstonderdeel aan de lijst worden toegevoegd. Als je op op een bestaand lijstonderdeel klikt, zal een dialoogvenster verschijnen waarin je de tekst ervan kunt veranderen. </li> + <li> De CSS heeft ervoor gezorgd dat de achtergrond nu een groene kleur heeft. De tekst is ook groter geworden. Het heeft ook de inhoud gestijld die door het Javascript aan de pagina wordt toegevoegd (de rode balk met de zwarte boord is door CSS aan de door JS gegenereerde lijst toegevoegd.) </li> +</ul> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Als je in deze oefening vastraakt en er niet in slaagt om de CSS/JS op de pagina toe te passen, ga dan naar onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> voobeeldpagina.</p> +</div> + +<h2 id="De_belangrijkste_taal_van_het_document_instellen">De belangrijkste taal van het document instellen</h2> + +<p>Als afsluiter vinden we het de moeite waard om te vermelden dat je de taal van je pagina kan (en echt wel zou moeten) instellen. Dit kan je doen door het <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribuut</a> aan het openingslabel van het HTML-element toe te voegen (zoals je hieronder en in het <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> kan zien.)</p> + +<pre class="brush: html"><html lang="en-US"></pre> + +<p>Dit is op vele manieren nuttig. Als de taal van je HTML-document is ingesteld, zal die beter worden geïndexeerd door zoekmachines (het zal bijvoorbeeld correct verschijnen in taal-specifieke resultaten) en het is ook nuttig voor mensen met een visuele beperking die een schermlezer gebruiken. (het woord "six" bijvoorbeeld bestaat zowel in het Frans als in het Engels maar wordt op een verschillende manier uitgesproken.)</p> + +<p>Je kan ook subsecties van je document als verschillende talen laten herkennen. We zouden onze Japanse sectie als Japans kunnen laten herkennen, zoals hieronder :</p> + +<pre class="brush: html"><p>Japans voorbeeld: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Deze codes worden gedefiniëerd door de <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standaard. Je kan er meer over ontdekken in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>We zijn aan het einde van onze sneltreintour over het HTML-hoofd gekomen. Er is nog veel meer dat je ermee kan doen, maar een rondleiding die alles uitlegt, zou in dit stadium snel saai en verwarrend worden. We willen je gewoon een idee geven van wat de gebruikelijkste zaken zijn die je erin kan vinden! in het volgende artikel bekijken we HTML-basisstructuren die ons helpen met tekst om te gaan.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/html_debuggen/index.html b/files/nl/learn/html/introduction_to_html/html_debuggen/index.html new file mode 100644 index 0000000000..e0b791bd12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/html_debuggen/index.html @@ -0,0 +1,161 @@ +--- +title: HTML debuggen +slug: Learn/HTML/Introduction_to_HTML/HTML_Debuggen +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML schrijven is oké maar wat als er iets fout gaat en je kan er maar niet achter komen waar de fout in je code zit? In dit artikel zullen we je kennis laten maken met een aantal instrumenten die je kunnen helpen om de fouten in je HTML op te sporen en te herstellen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis HTML zoals die is aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML, HTML tekst: basisprincipes</a> en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Je verwerft basiskennis over het gebruik van debugging-instrumenten waarmee je de bron van problemen in HTML kan vinden.</td> + </tr> + </tbody> +</table> + +<h2 id="Van_debuggen_hoef_je_niet_bang_te_zijn">Van debuggen hoef je niet bang te zijn</h2> + +<p>Als je de één of andere code zit te schrijven, is alles meestal dik in orde, tot het gevreesde moment waarop een fout zich voordoet. Je hebt dus iets verkeerd gedaan zodat je code niet werkt — of hij doet het helemaal niet of toch niet helemaal zoals jij dat wil. Hieronder vind je bijvoorbeeld een foutmelding die verschijnt wanneer men een simpel programma probeert te {{glossary("compileren")}} in de <a href="https://www.rust-lang.org/">Rust</a>-taal.</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">Hier is de foutmelding vrij gemakkelijk te begrijpen — "unterminated double quote string" (niet afgesloten dubbele aanhalingstekens string). Als je de lijst bekijkt, zie je waarschijnlijk hoe <code>println!(Hello, world!")</code> een dubbel aanhalingsteken mist. Foutmeldingen kunnen echter snel een stuk ingewikkelder worden en minder gemakkelijk om te interpreteren omdat programma's groter worden en zelfs simpele gevallen kunnen nogal intimiderend overkomen bij iemand die niets over Rust weet. </p> + +<p>Toch hoeft debuggen niet angstaanjagend te zijn. De sleutel tot een comfortabel gevoel bij het schrijven van code, is je vertrouwdheid met de taal en de instrumenten die hij aanbiedt.</p> + +<h2 id="HTML_en_debuggen">HTML en debuggen</h2> + +<p>HTML is niet zo complex en makkelijker te begrijpen als Rust. HTML wordt niet eerst in een andere vorm gecompileerd voor de browser die ontleedt en het result toont. HTML wordt <em>geïnterpreteerd</em>, niet <em>gecompileerd</em> en HTML's {{glossary("element")}} syntaxis is een stuk makkelijker te begrijpen dan een "echte programmeertaal" zoals Rust, {{glossary("JavaScript")}} of {{glossary("Python")}}. De manier waarop browsers HTML ontleden (i.e. parsen in het Engels) is veel <strong>toleranter </strong>dan de wijze waarop programmeertalen worden uitgevoerd, wat zowel goed als slecht is.</p> + +<h3 id="Tolerante_code">Tolerante code</h3> + +<p>Dus wat bedoelen we met tolerant? Wel, als je iets fout doet in je code, zal je een aantal fouten tegenkomen. De twee voornaamste zijn :</p> + +<ul> + <li><strong>Syntactische fouten</strong>: Deze zijn spelfouten in je code die ervoor zorgen dat je programma niet wordt uitgevoerd, zoals de Rust fout die we hierboven hebben getoond. Deze kan je meestal makkelijk herstellen als je vertrouwd bent met de syntaxis van de taal en als je weet wat de foutmeldingen betekenen.</li> + <li><strong>Logische fouten</strong>: Dit zijn fouten waarbij de syntaxis correct is maar de code is niet wat je eigenlijk wil, wat inhoudt dat het programma niet correct wordt uitgevoerd. Deze zijn vaak veel moeilijker te repareren dan syntactische fouten omdat er geen foutmelding is die je naar de bron van de fout leidt.</li> +</ul> + +<p>HTML zelf lijdt niet onder syntactische fouten omdat browsers HTML op een tolerante manier ontleden (d.w.z. parsen). Dit houdt in dat de pagina zal worden weergegeven zelfs als er syntactische fouten in zitten. Browsers hebben ingebouwde regels die zeggen hoe ze incorrect geschreven opmaak moeten interpreteren zodat je pagina toch wordt uitgevoerd al ziet die er misschien niet uit zoals je verwacht. Dit kan naturlijk nog altijd een groot probleem zijn!</p> + +<div class="note"> +<p><strong>Opmerking</strong>: HTML wordt tolerant geparst. Toen het web namelijk werd gecreëerd, werd er beslist dat het belangrijker was dat mensen hun inhoud konden publiceren dan er zeker van te zijn dat de syntaxis volledig correct was. Het web zou waarschijnlijk niet zo populair zijn, als het vanaf het begin stricter was geweest.</p> +</div> + +<h3 id="Actief_leren_De_studie_van_tolerante_code">Actief leren: De studie van tolerante code</h3> + +<p>Het is tijd om de tolerante aard van HTML-code te bestuderen</p> + +<ol> + <li>Eerst download je ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> en sla je die locaal op. Deze demo is opzettelijk met fouten erin geschreven die we kunnen onderzoeken (we zeggen dat de HTML-opmaak <strong>slecht is gevormd</strong> in tegenstelling tot <strong>goed gevormd</strong>).</li> + <li>Vervolgens open je de demo in een browser. Die zal er ongeveer zo uitzien:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Dat ziet er niet echt geweldig uit. We gaan daarom de broncode bekijken en zien of we erachter kunnen komen waarom dat zo is (enkel de inhoud van de body wordt getoond): + <pre class="brush: html"><h1>HTML debugging voorbeelden</h1> + +<p>Wat veroorzaakt er fouten in HTML? + +<ul> + <li>Elementen die niet zijn afgesloten : als een element <strong>niet correct word afgesloten, + dan kan zijn effect zich uitbreiden naar gebieden die daarvoor niet zijn bedoeld + + <li>Slecht geneste elementen: Het is ook belangrijk om je elementen correct te nesten + zodat je code zich correct gedraagt. <strong>strong <em>sterk benadrukt?</strong> + wat is dat?</em> + + <li>Attributen die niet zijn gesloten : Nog een vaak voorkomende bron van problemen met HTML. Laat ons + daarvoor een voorbeeld bekijken: <a href="https://www.mozilla.org/>link naar de homepage van + Mozilla</a> +</ul></pre> + </li> + <li>We gaan deze problemen nu één voor één bekijken: + <ul> + <li>De {{htmlelement("p","paragraaf")}} en {{htmlelement("li","lijstonderdeel")}}-elementen hebben geen eindtags. Als je naar de afbeelding hierboven kijken, zie je dat dit de weergegeven opmaak niet zo erg beïnvloedt want het is makkelijk om te zien waar een element zou moeten stoppen en een ander beginnen.</li> + <li>Het eerste {{htmlelement("strong")}} element heeft geen eindtag. Dit is iets problematischer want het is niet zo gemakkelijk om te weten waar het element zou moeten eindigen. In feite is de rest van de tekst sterk benadrukt. </li> + <li>Een van de secties is slecht genest: <code><strong>strong <em>sterk benadrukt emphasised?</strong> wat is dat?</em></code>. Het is niet gemakkelijk om te zeggen hoe dit is geïnterpreteerd door het vorige probleem.</li> + <li>De {{htmlattrxref("href","a")}}-attribuutwaarde mist een dubbel aanhalingsteken. Dat heeft blijkbaar het grootste probleem veroorzaakt — de link is gewoon niet weergegeven.</li> + </ul> + </li> + <li>We kunnen nu ook de opmaak bekijken die de browser heeft gegenereerd in plaats van de opmaak in de broncode. Om dat te doen, kunnen we de hulpprogramma's voor ontwikkelaars bekijken (de browser developer tools in het Engels). Als je niet vertrouwd bent met het gebruik van deze programma's kan je er meer over leren. Neem een paar minuten de tijd en bekijk <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li> + <li>Met de DOM Inspecteur kan je zien hoe de weergegeven opmaak eruit ziet: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Met de DOM inspecteur kunnen we onze code in detail onderzoeken en zien hoe de browser heeft geprobeerd om onze HTML-fouten te herstellen. We hebben dat in Firefox gedaan; andere moderne browsers <em>zouden</em> hetzelfde resultaat moeten produceren: + <ul> + <li>De paragrafen en de lijstonderdelen hebben eindtags gekregen.</li> + <li>Het is niet duidelijk waar het eerste <code><strong></code>-element zou moeten worden gesloten, dus heeft de browser elke apart tekstblok in zijn eigen strong-tag ingesloten, helemaal tot aan de onderkant van het document!</li> + <li>De incorrect geneste element zijn door de browser op deze manier hersteld: + <pre class="brush: html"><strong>sterk + <em>sterk benadrukt</em> +</strong> +<em> wat is dat?</em></pre> + </li> + <li>De link met het ontbrekende dubbele aanhalingsteken is helemaal verwijderd. Het laatste lijstonderdeel ziet er zo uit: + <pre class="brush: html"><li> + <strong>Attributen die niet zijn afgesloten: Een andere vaak voorkomende bron van HTML-problemen. + Laat ons daarvoor een voorbeeld bekijken: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_validatie">HTML validatie</h3> + +<p>Door het voorbeeld hierboven begrijp je dat je er echt zeker van wil zijn dat je HTML goed gevormd is. Maar hoe doe je dat? In een klein voorbeeld zoals dat hierboven, is het gemakkelijk om de fouten te vinden, maar wat moet met je een enorm en complex HTML document? </p> + +<p>De beste strategie is om je HTML-pagina eerst door de <a href="https://validator.w3.org/">Markup Validation Service</a> (Opmaak Validatie Dienst) te laten beoordelen. Deze dienst is gecreëerd door de W3C en word er ook door onderhouden. De organisatie zorgt voor de specificaties die HTML, CSS en andere webtechnologieën definiëren. De webpagina aanvaardt je HTML als invoer, verwerkt die en geeft je dan een verslag waarin staat wat er mis is met je HTML.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Om de HTML in te voeren de je wil laten valideren, kan je een webadres opgeven, een HTML-bestand uploaden of de HTML-code direct invoeren.</p> + +<h3 id="Actief_leren_Een_HTML-document_valideren">Actief leren: Een HTML-document valideren</h3> + +<p>We gaan dit met ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a> uitproberen.</p> + +<ol> + <li>Eerst laad je de <a href="https://validator.w3.org/">Markup Validation Service</a> in een tabblad van een browser, als je dat nog niet hebt gedaan.</li> + <li>Klik op <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Kopiëer de volledige code van het sample document (dus niet enkel de body) en plak die in het tekstinvoerveld.</li> + <li>Klik op de <em>Check</em> knop.</li> +</ol> + +<p>Nu zou je een lijst met fouten en andere informatie moeten zien.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="De_interpretatie_van_de_foutmelding">De interpretatie van de foutmelding</h4> + +<p>Al zijn de foutmeldingen meestal een hulp, soms zijn ze dat toch niet helemaal maar met een beetje oefening kan je erachter komen hoe je ze moet interpreteren om je code te repareren. We gaan ze nu één voor één bekijken en hun betekenis ontcijferen. Je zal merken dat elke boodschap een regel en kolomnummer krijgt zodat je kan zien waar de fout zich bevindt.</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): (eindtag li geïmpliceerd maar er waren open elementen (twee gevallen)). Deze boodschappen duiden aan dat een element nog open is en gesloten moet worden. De eintag is geïmpliceerd maar staat er niet echt. De regel/kolom informatie wijst naar de eerste regel na de regel waar de eindtag eigenlijk zou moeten zijn, maar deze aanwijzing is goed genoeg om te zien wat er fout is.</li> + <li>"Unclosed element <code>strong</code>" (niet gesloten element strong) : Dit is echt makkelijk te begrijpen — een {{htmlelement("strong")}}-element is niet afgesloten en de lijn/kolom informatie wijst recht naar de plaats van het element.</li> + <li>"End tag <code>strong</code> violates nesting rules" (eind tag strong schendt regels voor geneste elementen): Dit verwijst naar de incorrect geneste elementen en de regel/kolom informatie wijst naar waar die zitten.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag" (einde van het bestand is bereikt binnen een attribuutwaarde): Deze is vrij cryptisch; hij verwijst naar het feit dat er ergens een attribuutwaarde zit die niet correct werd gevormd, misschien dicht bij het einde van het bestand want het einde van het bestand verschijnt binnen de attribuutwaarde. Het feit dat de browser de link niet weergeeft, is een goede aanwijzing die ons vertelt welk element de fout bevat.</li> + <li>"End of file seen and there were open elements" (einde van het bestand gezien en er waren open elementen) : Dit is een beetje dubbelzinnig, maar in feite verwijst de foutmelding naar het feit dat er open elementen zijn die moeten worden gesloten. De regelnummers wijzen naar de laaste regels van het bestand en deze foutmelding verschijnt samen met een regel code die een voorbeeld van een open element aanduidt: + <pre>example: <a href="https://www.mozilla.org/>link naar de startpagina van Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Opmerking</strong>: Een attribuut dat het aanhalingsteken mist dat de attribuutwaarde afsluit, kan resulteren in een open element omdat de rest van het document wordt geïnterpreteerd als de inhoud van het attribuut.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>" (niet afgesloten element ul): Dit is niet erg behulpzaam omdat het {{htmlelement("ul")}}-element wel degelijk correct is afgesloten. Dese fout verschijnt omdat het {{htmlelement("a")}}-element niet is afgesloten en dat komt door het ontbrekende aanhalingsteken op het einde van de attribuutwaarde.</li> +</ul> + +<p><span>Als je niet de betekenis van elke foutmelding kan uitdokteren, hoef je je daarover niet te veel zorgen te maken — het is een goed idee om niet alle fouten tegelijk te herstellen. Bewerk er een paar en probeer dan opnieuw je HTML te valideren en kijk welke fouten er nog over schieten. Soms is het genoeg om één fout weg te werken. De rest van de fouten verdwijnt dan vanzelf omdat meerdere fouten door één enkel probleem veroorzaakt kunnen worden. Het probleem creëert dan een domino-effect.</span></p> + +<p><span>Als alle fouten hersteld zijn, zal je de volgende tekst met groene achtergrond in je uitvoer zien. Dit is de vertaling: het document is gevalideerd volgens de gespecifiëerde schema's en volgens bijkomende beperkingen die door de validator zijn gecontroleerd. </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Samenvating">Samenvating</h2> + +<p>En dat is het dus, een inleiding op het debuggen van HTML. Je zou nu een paar nuttige vaardigheden onder de knie moeten hebben. Je zal er later in je carrière op kunnen rekenen wanneer je CSS, Javascript en andere soorten code gaat debuggen. Dit betekent ook het einde van onze introductie op HTML — Je kan nu verder gaan door jezelf te testen met onze evaluaties: de link naar de eerste vind je hieronder.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..4da6104778 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,632 @@ +--- +title: Grondbeginselen van HTML-tekst +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Een van de kerntaken van HTML is structuur en betekenis aan een tekst geven (ook gekend onder de term {{glossary("semantiek")}}), zodat een browser de tekst correct kan weergeven. Dit artikel legt uit hoe {{glossary("HTML")}} gebruikt kan worden om een pagina te structureren door er koppen en paragrafen aan toe te voegen, woorden te benadrukken, lijsten te creëren en meer.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis HTML die je kunt terugvinden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Je leert hoe je een tekst kunt opmaken en hoe je er structuur en betekenis aan kunt geven – inclusief paragrafen, koppen, lijsten, tekst benadrukken en citaten.</td> + </tr> + </tbody> +</table> + +<h2 id="De_basis_Koppen_en_Paragrafen">De basis: Koppen en Paragrafen</h2> + +<p>Een gestructureerde tekst bestaat meestal uit koppen of hoofdingen en paragrafen, ongeacht of je nu een verhaal leest, een krant, een leerboek, een magazine enz.</p> + +<p><img alt="Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien."></p> + +<p>Een gestructureerde inhoud maakt de leeservaring gemakkelijker en aangenamer.</p> + +<p>In HTML moet elke paragraaf ingesloten worden door een {{htmlelement("p")}}-element zoals hieronder:</p> + +<pre class="brush: html"><p>Ik ben een paragraaf, laat me je dat vertellen.</p></pre> + +<p>Elke hoofding moet worden ingesloten door een kop-element:</p> + +<pre class="brush: html"><h1>Ik ben de titel van het verhaal.</h1></pre> + +<p>Er bestaan zes kop-elementen – {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} en {{htmlelement("h6")}}. Elk element staat voor een verschillend inhoudelijk niveau in het document; <code><h1></code> vertegenwoordigt de belangrijkste kop, <code><h2></code> vertegenwoordigt een ondertitel, <code><h3></code> vertegenwoordigt een ondertitel die zich nog een niveau lager bevindt, enzovoort.</p> + +<h3 id="De_implementatie_van_structurele_hiërarchie">De implementatie van structurele hiërarchie</h3> + +<p>We beginnen met een voorbeeld: in een verhaal zou <code><h1></code> voor de titel van het verhaal worden gebruikt, <code><h2></code>'s zouden de titel van elk hoofdstuk vertegenwoordigen, <code><h3></code>'s zouden de ondertitels van elk hoofdstuk vertegenwoordigen, enzovoort.</p> + +<pre class="brush: html"><h1>De Verpletterende Verveling</h1> + +<p>door Chris Mills</p> + +<h2>Hoofdstuk 1: De donkere nacht</h2> + +<p>Het was een donkere nacht. Ergens riep een uil 'oehoe'. Het regende pijpenstelen op de ...</p> + +<h2>Hoofdstuk 2: De eeuwige stilte</h2> + +<p>Onze protagonist kon uit de schaduwachtige figuur zelfs geen gefluisterd woord krijgen ...</p> + +<h3>Het fantoom spreekt</h3> + +<p>Meerdere uren waren voorbijgegaan, toen het fantoom plots rechtop ging zitten en schreeuwde: "Heb alsjeblieft erbarmen met mijn ziel!"</p></pre> + +<p>Jij bent degene die beslist wat je gebruikte elementen uitdrukken, zolang de hiërarchie logisch is. Je hoeft enkel met een paar goede gewoontes rekening te houden als je zulke structuren creëert:</p> + +<ul> + <li>Bij voorkeur gebruik je slechts één <code><h1></code> per pagina – dit is de hoogste kop en alle andere zitten eronder in de hiërarchie.</li> + <li>Zorg ervoor dat je de koppen in de hiërarchie in de juiste volgorde gebruikt. Gebruik geen <code><h3></code>'s voor ondertitels die dan gevolgd worden door <code><h2></code>'s om titels onder die ondertitels te vertegenwoordigen. Dat houdt geen steek en zal eigenaardige resultaten veroorzaken.</li> + <li>Van de zes beschikbare niveaus zou je moeten proberen er niet meer dan drie per pagina te gebruiken, behalve als je vindt dat het nodig is. Documenten met vele niveaus (d.w.z. een diepe koppenhiërarchie) worden onhandelbaar en moeilijk om in te navigeren. In zo'n geval is het aan te raden om de inhoud over meerdere pagina's te spreiden.</li> +</ul> + +<h3 id="Waarom_hebben_we_structuur_nodig">Waarom hebben we structuur nodig?</h3> + +<p>Om deze vraag te beantwoorden, gaan we eerst <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> bekijken – het startpunt van ons voorbeeld waarmee we in dit artikel gaan werken (een lekker hummusrecept). Je kunt het beste een kopie van dit bestand op je lokale machine opslaan, want je zult het later voor de oefeningen nodig hebben. De body van dit document bevat in dit stadium verschillende delen – de inhoud is op geen enkele manier opgemaakt, maar de onderdelen zijn met regeleindes van elkaar gescheiden (op Enter/Return gedrukt om naar de volgende regel te gaan).</p> + +<p>Als je het document echter in je browser opent, zul je zien dat de tekst er als één grote brok in zit!</p> + +<p><img alt="Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren."></p> + +<p>De reden hiervoor is simpel: er staan geen elementen in om de inhoud te structureren, dus weet de browser niet wat een kop is en wat een paragraaf. En bovendien is er dit:</p> + +<ul> + <li>Gebruikers die een webpagina bekijken, hebben de neiging die snel te scannen op zoek naar relevante inhoud, vaak door eerst slechts de koppen te lezen. (Gewoonlijk <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">brengen we slechts een zeer korte tijd door op een webpagina</a>.) Als ze in een paar seconden niets nuttigs kunnen vinden, zullen ze waarschijnlijk gefrustreerd raken en ergens anders naartoe gaan.</li> + <li>Zoekmachines die je pagina indexeren beschouwen de inhoud van de koppen als belangrijke sleutelwoorden die de positie van de pagina in de ranglijsten van de zoekresultaten beïnvloeden. Zonder koppen zal je pagina zwak presteren wat de {{glossary("SEO")}} (<em>Search Engine Optimization</em>, "zoekmachine-optimalisatie") betreft.</li> + <li>Mensen met een ernstige visuele beperking lezen vaak geen webpagina's; in plaats daarvan luisteren ze ernaar. Dit wordt mogelijk gemaakt door een <a class="external external-icon" href="https://nl.wikipedia.org/wiki/Schermlezer">schermlezer</a>. Deze software verschaft snelle toegang tot een tekstinhoud. Een van de gebruikte technieken houdt in dat een overzicht van het document gegeven wordt door de koppen voor te lezen, zodat de gebruikers de informatie die ze nodig hebben snel kunnen vinden. Als er geen koppen zijn, worden ze gedwongen om het volledige document hardop te laten voorlezen.</li> + <li>Om inhoud op te maken met {{glossary("CSS")}}, of om interessante dingen met {{glossary("JavaScript")}} te doen, is het nodig om de relevante inhoud in elementen in te bedden zodat CSS/JavaScript de inhoud doelgericht kan benaderen.</li> +</ul> + +<p>Het is dus nodig om onze inhoud structureel op te maken.</p> + +<h3 id="Actief_leren_Onze_inhoud_structuur_geven">Actief leren: Onze inhoud structuur geven</h3> + +<p>We vallen direct met de deur in huis met een live voorbeeld. Voeg in het voorbeeld hieronder elementen aan de ruwe tekst in het <em>Invoer</em>-veld toe, zodat die als een kop en twee paragrafen in het <em>Uitvoer</em>-veld verschijnt.</p> + +<p>Als je een fout maakt, kun je altijd op <em>Maak ongedaan</em> drukken. Als je vastraakt, gebruik dan de <em>Toon oplossing</em>-knop om het antwoord te zien.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">Mijn korte verhaal + +Ik ben een politievrouw en mijn naam is Chris. + +Mijn benen zijn van karton en ik ben getrouwd met een vis.</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Maak ongedaan" /> + <input id="solution" type="button" value="Toon oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>Mijn korte verhaal</h1>\n<p>Ik ben een politievrouw en mijn naam is Chris.</p>\n<p>Mijn benen zijn van karton en ik ben getrouwd met een vis.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Waarom_hebben_we_semantiek_nodig">Waarom hebben we semantiek nodig?</h3> + +<p>Overal om ons heen vertrouwen we op semantiek – we rekenen op eerdere ervaringen die ons vertellen wat de functie van een alledaags object is; als we iets zien, weten we wat zijn functie zal zijn. Dus we verwachten bijvoorbeeld dat een rood verkeerslicht "stop" betekent en een groen verkeerslicht "vertrek". De dingen kunnen zeer snel ingewikkeld worden als de foute semantiek wordt toegepast. (Zijn er landen die rood gebruiken om "vertrek" uit te drukken? Ik hoop van niet.)</p> + +<p>In dezelfde geest moeten we er zeker van zijn dat we de juiste elementen gebruiken om betekenis aan onze tekst, een functie of weergave te geven. In deze context is het {{htmlelement("h1")}}-element dus ook een semantisch element, het geeft aan de betreffende tekst de rol (of betekenis) van "een hoofdtitel van je pagina".</p> + +<pre class="brush: html"><h1>Dit is een belangrijke hoofdtitel</h1></pre> + +<p>Standaard zal de browser dit element een groter lettertype geven om het er als een kop te laten uitzien (alhoewel je het met CSS kunt stylen om het elke look te geven die je wil). Nog belangrijker is dat zijn semantische waarde op meer dan één manier zal worden gebruikt, door bijvoorbeeld zoekmachines en schermlezers (zoals hierboven vermeld).</p> + +<p>Aan de andere kant kun je elk element er als een hoofdtitel laten <em>uitzien</em>. Bekijk het volgende eens:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is dit een hoofdtitel?</span></pre> + +<p>Dit is een {{htmlelement("span")}}-element. Er steekt geen semantiek in. Je gebruikt het element om inhoud te omhullen als je er CSS op wil toepassen (of om er iets mee te doen met JavaScript) zonder er extra betekenis aan te geven. (Je zult er later in de cursus meer over leren.) We hebben wat CSS op het element toegepast om het er als een hoofdtitel te laten uitzien, maar aangezien het geen semantische waarde heeft, zal het geen van de hierboven beschreven extra voordelen krijgen. Het is een goed idee om het relevante HTML-element voor die taak te gebruiken.</p> + +<h2 id="Lijsten">Lijsten</h2> + +<p>Nu gaan we onze aandacht op lijsten richten. Lijsten zijn overal in ons leven – van je boodschappenlijst tot de lijst met aanwijzingen die je onbewust elke dag gebruikt om naar huis te geraken, tot de lijsten met instructies die je in deze handleidingen volgt! Lijsten zijn ook overal op het Web, en er bestaan drie verschillende types.</p> + +<h3 id="Ongeordend">Ongeordend</h3> + +<p>Ongeordende lijsten worden gebruikt om lijsten op te maken waarbij de volgorde van de onderdelen niet belangrijk is – als voorbeeld nemen we een boodschappenlijst.</p> + +<pre>melk +eieren +brood +hummus</pre> + +<p>Elke ongeordende lijst begint met een {{htmlelement("ul")}}-element – je plaatst het rond alle lijstonderdelen:</p> + +<pre class="brush: html"><ul> +melk +eieren +brood +hummus +</ul></pre> + +<p>De laatste stap is om elk lijstonderdeel in een {{htmlelement("li")}}-element in te pakken:</p> + +<pre class="brush: html"><ul> + <li>melk</li> + <li>eieren</li> + <li>brood</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Actief_leren_Een_ongeordende_lijst_opmaken">Actief leren: Een ongeordende lijst opmaken</h4> + +<p>Probeer het live voorbeeld hieronder te bewerken om zo je eigen ongeordende lijst te maken.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">melk +eieren +brood +hummus</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan maken" /> + <input id="solution" type="button" value="Toon oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>melk</li>\n<li>eieren</li>\n<li>brood</li>\n<li>hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Geordend">Geordend</h3> + +<p>Geordende lijsten zijn lijsten waarvan de volgorde van de onderdelen <em>wel</em> belangrijk is – als voorbeeld nemen we een reeks instructies om de weg mee uit te leggen:</p> + +<pre>Rijd naar het einde van de weg +Sla rechtsaf +Rijd rechtdoor bij de eerste twee rotondes +Sla linksaf bij de derde rotonde +De school staat 300 meter verder aan je rechterkant</pre> + +<p>De opmaakstructuur is gelijk aan die voor ongeordende lijsten, behalve dat je de lijstonderdelen in een {{htmlelement("ol")}}-element (i.p.v. een <code><ul></code>) moet inpakken:</p> + +<pre class="brush: html"><ol> + <li>Rijd naar het einde van de weg</li> + <li>Sla rechtsaf</li> + <li>Rijd rechtdoor bij de eerste twee rotondes</li> + <li>Sla linksaf bij de derde rotonde</li> + <li>De school staat 300 meter verder aan je rechterkant</li> +</ol></pre> + +<h4 id="Actief_leren_Een_geordende_lijst_opmaken">Actief leren: Een geordende lijst opmaken</h4> + +<p>Bewerk het live voorbeeld hieronder om je eigen geordende lijst te maken.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input">Rijd naar het einde van de weg +Sla rechtsaf +Rijd rechtdoor bij de eerste twee rotondes +Sla linksaf bij de derde rotonde +De school staat 300 meter verder aan je rechterkant</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Ongedaan maken" /> + <input id="solution" type="button" value="Oplossing tonen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Rijd naar het einde van de weg</li>\n<li>Sla rechtsaf</li>\n<li>Rijd rechtdoor bij de eerste twee rotondes</li>\n<li>Sla linksaf bij de derde rotonde</li>\n<li>De school staat 300 meter verder aan je rechterkant</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Actief_leren_Maak_onze_receptpagina_op">Actief leren: Maak onze receptpagina op</h3> + +<p>Oké, op dit punt beschik je over alle informatie die je nodig hebt om onze voorbeeldpagina op te maken. Je kunt ervoor kiezen om een locale kopie van ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> startbestand op te slaan en het werk daar te doen, of je kunt het in het bewerkbare voorbeeld hieronder doen. Het is waarschijnlijk beter om het locaal te doen, want dan kun je je werk opslaan. Als je het in het bewerkbare voorbeeld doet, zal het verloren gaan als je de pagina later heropent. Beide hebben voor- en nadelen.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Snel recept om hummus te maken + + Met dit recept maak je snel lekkere hummus, zonder gedoe. Het is een aangepaste versie van een aantal recepten die ik door de jaren heen heb gelezen. + + Hummus is een verrukkelijk dik smeersel, dat vaak in Griekse en Midden-Oosterse gerechten wordt gebruikt. Het is zeer lekker met sla, gegrild vlees en pitabroodjes. + + Ingrediënten + + 1 blik (400 g) kikkererwten (garbanzobonen) + 175 g tahin + 6 zongedroogde tomaten + een halve rode peper + een snufje cayennepeper + 1 teentje knoflook + een scheutje olijfolie + + Bereiding + + Pel de knoflook en hak in grove stukken. + Verwijder alle zaden en de steel van de peper en hak in grove stukken. + Doe alle ingrediënten in een keukenmachine. + Pureer alles tot een pasta. + Als je grove hummus met stukjes wil, pureer dan heel even. + Als je gladde hummus wil, pureer dan wat langer. + + Voor een andere smaak kun je de volgende ingrediënten toevoegen: een beetje citroen en koriander, chilipeper, limoen en jalapenopeper, harissa en munt, of spinazie en fetakaas. Experimenteer en ontdek wat jij lekker vindt. + + Bewaring + + Koel de bereide hummus in een luchtdichte bak. De hummus blijft tot ongeveer een week na de bereidingsdatum eetbaar. Als hij begint te 'bruisen', moet je hem echt weggooien. + + Hummus is ook geschikt om in te vriezen; je zou hem binnen een paar maanden moeten ontdooien en gebruiken.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Maak ongedaan" /> + <input id="solution" type="button" value="Toon oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>Snel hummusrecept</h1>\n\n<p>Met dit recept maak je snel lekkere hummus, zonder gedoe. Het is een aangepaste versie van een aantal recepten die ik door de jaren heen heb gelezen.</p>\n\n<p>Hummus is een verrukkelijk dik smeersel, dat vaak in Griekse en Midden-Oosterse gerechten wordt gebruikt. Het is zeer lekker met sla, gegrild vlees en pitabroodjes.</p>\n\n<h2>Ingrediënten</h2>\n\n<ul>\n<li>1 blik (400 g) kikkererwten (garbanzobonen)</li>\n<li>175 g tahin</li>\n<li>6 zongedroogde tomaten</li>\n<li>een halve rode peper</li>\n<li>een snufje cayennepeper</li>\n<li>1 teentje knoflook</li>\n<li>een scheutje olijfolie</li>\n</ul>\n\n<h2>Bereiding</h2>\n\n<ol>\n<li>Pel de knoflook en hak in grove stukken.</li>\n<li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li>\n<li>Doe alle ingrediënten in een keukenmachine.</li>\n<li>Pureer alles tot een pasta.</li>\n<li>Als je grove hummus met stukjes wil, pureer dan heel even.</li>\n<li>Als je gladde hummus wil, pureer dan wat langer.</li>\n</ol>\n<p>Voor een andere smaak kun je de volgende ingrediënten toevoegen: een beetje citroen en koriander, chilipeper, limoen en jalapenopeper, harissa en munt, of spinazie en fetakaas. Experimenteer en ontdek wat jij lekker vindt.</p>\n\n<h2>Bewaring</h2>\n\n<p>Koel de bereide hummus in een luchtdichte bak. De hummus blijft tot ongeveer een week na de bereidingsdatum eetbaar. Als hij begint te \'bruisen\', moet je hem echt weggooien.</p>\n\n<p>Hummus is ook geschikt om in te vriezen; je zou hem binnen een paar maanden moeten ontdooien en gebruiken.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>Als je vastraakt, kun je altijd op <em>Toon oplossing</em> drukken of ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> voorbeeld bekijken dat je op onze github-repo vindt.</p> + +<h3 id="Lijsten_nesten">Lijsten nesten</h3> + +<p>Het is helemaal prima om de ene lijst in een andere te nesten. Je wil wellicht wat subonderdelen onder een hoogste-niveau-lijstonderdeel hebben. Laten we de tweede lijst van ons receptvoorbeeld bekijken:</p> + +<pre class="brush: html"><ol> + <li>Pel de knoflook en hak in grove stukken.</li> + <li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li> + <li>Doe alle ingrediënten in een keukenmachine.</li> + <li>Pureer alles tot een pasta.</li> + <li>Als je grove hummus met stukjes wil, pureer dan heel even.</li> + <li>Als je gladde hummus wil, pureer dan wat langer.</li> +</ol></pre> + +<p>Aangezien er een nauw verband is tussen de laatste twee onderdelen en hetgene dat eraan voorafgaat (ze lezen als sub-instructies of keuzes bij de voorafgaande instructie), kan het logisch zijn om ze in hun eigen ongeordende lijst te nesten, en die lijst in het huidige vierde lijstelement te plaatsen. Dat ziet er dan zo uit:</p> + +<pre class="brush: html"><ol> + <li>Pel de knoflook en hak in grove stukken.</li> + <li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li> + <li>Doe alle ingrediënten in een keukenmachine.</li> + <li>Pureer alles tot een pasta. + <ul> + <li>Als je grove hummus met stukjes wil, pureer dan heel even.</li> + <li>Als je gladde hummus wil, pureer dan wat langer.</li> + </ul> + </li> +</ol></pre> + +<p>Ga naar het vorige "Actief leren"-voorbeeld en werk de tweede lijst op deze manier bij.</p> + +<h2 id="Nadruk_en_belangrijkheid">Nadruk en belangrijkheid</h2> + +<p>In menselijke taal benadrukken we vaak bepaalde woorden om de betekenis van een zin te veranderen, en willen we vaak bepaalde woorden als belangrijk of op een bepaalde manier anders markeren. HTML bevat diverse semantische elementen die ons in staat stellen om tekstuele inhoud met zulke effecten op te maken. In deze sectie gaan we een paar van de meest gebruikelijke bekijken.</p> + +<h3 id="Nadruk">Nadruk</h3> + +<p>Als we in gesproken taal ergens de nadruk op willen leggen, <em>beklemtonen</em> we bepaalde woorden, waarmee we op subtiele wijze de betekenis van wat we zeggen veranderen. In geschreven taal kunnen we op vergelijkbare wijze woorden benadrukken door ze cursief te maken. De twee volgende zinnen hebben bijvoorbeeld verschillende betekenissen.</p> + +<p>Ik ben blij dat je niet te laat was.</p> + +<p>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p> + +<p>De eerste zin klinkt oprecht opgelucht omdat de persoon niet te laat was. De tweede zin klinkt daarentegen sarcastisch of passief-aggressief; hij drukt irritatie uit omdat de persoon een beetje te laat aankwam.</p> + +<p>In HTML gebruiken we het {{htmlelement("em")}}-element (<em>emphasis</em>, nadruk) om zulke gevallen te markeren. Behalve dat het het document interessanter om te lezen maakt, wordt dit element ook herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als cursief, maar je kunt het beter niet gebruiken puur voor cursivering. Gebruik daarvoor een {{htmlelement("span")}}-element en wat CSS, of wellicht een {{htmlelement("i")}}-element (zie hieronder).</p> + +<pre class="brush: html"><p>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p></pre> + +<h3 id="Zeer_belangrijke_woorden">Zeer belangrijke woorden</h3> + +<p>Om belangrijke woorden te benadrukken, hebben we de neiging om ze in gesproken taal te beklemtonen en om ze in geschreven taal <strong>vet</strong> te maken. Bijvoorbeeld:</p> + +<p>Deze vloeistof is <strong>uiterst toxisch</strong>.</p> + +<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p> + +<p>In HTML gebruiken we het {{htmlelement("strong")}}-element (<em>strong importance</em>, sterke belangrijkheid) om zulke gevallen op te maken. Behalve dat het het document nuttiger, wordt ook dit element herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als vette tekst, maar je kunt het beter niet gebruiken puur om vette styling te verkrijgen. Daarvoor kun je beter een {{htmlelement("span")}}-element en wat CSS gebruiken, of wellicht een {{htmlelement("b")}}-element (zie hieronder).</p> + +<pre class="brush: html"><p>Deze vloeistof is <strong>uiterst toxisch</strong>.</p> + +<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p></pre> + +<p>Indien gewenst kun je belangrijkheid en nadruk ook in elkaar nesten:</p> + +<pre class="brush: html"><p>Deze vloeistof is <strong>uiterst toxisch</strong> – +als je hem drinkt, <strong>kun je <em>sterven</em></strong>.</p></pre> + +<h3 id="Actief_leren_Laten_we_belangrijk_zijn!">Actief leren: Laten we belangrijk zijn!</h3> + +<p>In deze sectie geven we een bewerkbaar voorbeeld. Probeer nadruk en grote belangrijkheid toe te voegen aan de woorden waarvan je denkt dat die ze nodig hebben, gewoon om wat te oefenen.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Belangrijk bericht</h1> + +<p>Op zondag 9 januari 2010 werd een bende goths gezien die +meerdere tuinkabouters stalen uit een winkelcentrum in de +binnenstad van Milwaukee. Ze droegen allemaal groene jumpsuits +en onnozele hoedjes, en leken zich uitstekend te amuseren. +Als iemand enige informatie heeft over dit incident, gelieve +nu de politie te contacteren.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Maak ongedaan" /> + <input id="solution" type="button" value="Toon oplossing" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Belangrijk bericht</h1>\n<p>Op <strong>zondag 9 januari 2010</strong> werd een bende <em>goths</em> gezien die <strong><em>meerdere</em> outers</strong> stalen uit een winkelcentrum in de binnenstad van <strong>Milwaukee</strong>. Ze droegen allemaal <em>groene jumpsuits</em> en <em>onnozele hoedjes</em>, en leken zich uitstekend te amuseren. Als iemand <strong>enige</strong> informatie heeft over dit incident, gelieve <strong>nu</strong> de politie te contacteren.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Cursief_vet_onderstrepen...">Cursief, vet, onderstrepen...</h3> + +<p>De elementen die we tot nu toe hebben besproken, hebben duidelijk omschreven semantische waarden. De situatie rond {{htmlelement("b")}}, {{htmlelement("i")}} en {{htmlelement("u")}} is iets ingewikkelder. Ze onstonden zodat mensen tekst vet, cursief of onderstreept konden maken, in een tijdperk dat CSS nog nauwelijks of helemaal niet ondersteund werd. Dit soort elementen, die enkel de presentatie en niet de semantiek beïnvloeden, staan bekend als <strong>formele elementen</strong> (<em>presentational elements</em> in het Engels) en kunnen beter niet meer gebruikt worden, omdat, zoals we reeds hebben gezien, semantiek belangrijk is voor de toegankelijkheid, SEO, enz.</p> + +<p>HTML5 verschafte nieuwe definities voor <code><b></code>, <code><i></code> en <code><u></code> met nieuwe nogal verwarrende semantische rollen.</p> + +<p>Dit is de beste vuistregel: het is waarschijnlijk geschikt om <code><b></code>, <code><i></code> of <code><u></code> te gebruiken als je een betekenis wil overbrengen die traditioneel wordt toegekend aan vette, cursieve of onderstreepte tekst, op voorwaarde dat er geen geschikter element is. Het is echter van cruciaal belang dat de toegankelijkheid nooit uit het oog verloren wordt. Het concept cursivering is niet erg nuttig voor mensen die een schermlezer gebruiken, of voor mensen die een ander schrijfsysteem dan het Latijnse alfabet gebruiken.</p> + +<ul> + <li>{{HTMLElement('i')}} wordt gebruikt om een betekenis over te brengen die traditioneel met cursieve tekst wordt weergegeven: woorden uit een andere taal, taxonomische aanduidingen, technische termen, een gedachte...</li> + <li>{{HTMLElement('b')}} wordt gebruikt om een betekenis over te brengen die traditioneel met vette tekst wordt weergegeven: sleutelwoorden, productnamen, de eerste zin van een hoofdstuk...</li> + <li>{{HTMLElement('u')}} wordt gebruikt om een betekenis over te brengen die traditioneel met onderstreepte tekst wordt weergegeven: eigennamen, fout gespelde woorden...</li> +</ul> + +<div class="note"> +<p>Een vriendelijke waarschuwing over onderstreping: <strong>Mensen associëren onderstreping sterk met hyperlinks.</strong> Daarom kun je op het Web het beste slechts hyperlinks onderstrepen. Gebruik het <code><u></code>-element als het semantisch geschikt is, maar overweeg CSS te gebruiken om de standaard onderstreping te veranderen in iets dat geschikter is voor het Web. Het voorbeeld hieronder illustreert hoe je dat kunt doen.</p> +</div> + +<pre class="brush: html"><!-- wetenschappelijke benamingen --> +<p> + De robijnkeelkolibrie (<i>Archilochus colubris</i>) + is de meest voorkomende kolibrie in het Oosten van Noord-Amerika. +</p> + +<!-- vreemde woorden --> +<p> + Het menu was een zee van exotische woorden zoals <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> en <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- een bekende spelfout --> +<p> + Op een dag zal ik beter leren <u>spelen</u>. +</p> + +<!-- Sleutelwoorden in een reeks instructies markeren --> +<ol> + <li> + <b>Snijd</b> twee sneden van het brood. + </li> + <li> + <b>Leg</b> een schijfje tomaat en een blaadje + sla tussen de sneetjes brood. + </li> +</ol></pre> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Voorlopig is dit het! Met dit artikel zou je nu een goed idee moeten hebben van de methodes waarmee je een tekst in HTML kunt opmaken, en heeft je laten kennismaken met enkele van de belangrijkste elementen op dit gebied. Er bestaan veel meer semantische elementen die we in dit artikel zouden kunnen bespreken, en we zullen er veel meer zien in 'Meer Semantische Elementen' later in deze cursus. In het volgende artikel zullen we in detail bekijken hoe we <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">hyperlinks creëren</a>, misschien wel het belangrijkste element op het Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html b/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html new file mode 100644 index 0000000000..a00d948b29 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html @@ -0,0 +1,306 @@ +--- +title: Hyperlinks maken +slug: Learn/HTML/Introduction_to_HTML/Hyperlinks_maken +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Hyperlinks zijn heel belangrijk – ze maken van het web <em>een Web</em>. Dit artikel toont de vereiste syntaxis voor het maken van een koppeling en bespreekt de beste werkwijzen om met koppelingen te werken.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiskennis van HTML, zoals beschreven in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML-tekstopmaak, zoals beschreven in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grondbeginselen van HTML-tekst</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>U leert hoe u een hyperlink op een doeltreffende manier aan uw inhoud kunt toevoegen en meerdere bestanden met elkaar kunt verbinden.</td> + </tr> + </tbody> +</table> + +<h2 id="Wat_is_een_hyperlink">Wat is een hyperlink?</h2> + +<p>Hyperlinks zijn een van de meest opwindende vernieuwingen die het web ons biedt. Eigenlijk horen ze er al sinds het allereerste begin bij, maar zij zijn wat van het web <em>een Web</em> maakt - hiermee kunnen we onze documenten met andere documenten (of met een andere informatiebron) verbinden. Ook kunnen we specifieke onderdelen van documenten met elkaar verbinden, en we kunnen apps op een eenvoudig webadres beschikbaar maken (in tegenstelling tot ‘native’ apps, die op voorhand moeten worden geïnstalleerd). Bijna alle webinhoud kan in een koppeling worden omgezet, zodat wanneer hierop wordt geklikt (of deze op een andere manier wordt geactiveerd), de webbrowser naar een ander webadres zal gaan ({{glossary("URL")}}.)</p> + +<div class="note"> +<p><strong>Noot</strong>: een URL wijst ook naar HTML-bestanden, tekstbestanden, afbeeldingen, tekstdocumenten, video- en audiobestanden en alles wat er op het web kan leven. Als de browser niet weet hoe deze het bestand moet weergeven of behandelen, zal worden gevraagd of u het bestand wilt openen of downloaden (in dat geval kunt u er later uw ding mee doen). Als u wordt gevraagd het bestand te openen, wordt de verantwoordelijkheid voor die taak doorgegeven naar een geschikte systeemeigen app op het apparaat.</p> +</div> + +<p>De startpagina van de BBC bijvoorbeeld bevat een groot aantal koppelingen die niet alleen naar meerdere nieuwsartikelen wijzen, maar ook naar verschillende gebieden van de website (navigatiefunctionaliteit), aanmeldings-/registratiepagina’s (gebruikershulpmiddelen) en meer.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomie_van_een_koppeling">Anatomie van een koppeling</h2> + +<p>Een eenvoudige koppeling wordt gemaakt door de tekst (of andere inhoud, zie {{anch("Koppelingen op blokniveau")}}) die u in een koppeling wilt omzetten binnen een {{htmlelement("a")}}-element op te nemen, en dat element een {{htmlattrxref("href", "a")}}-attribuut te geven (ook bekend als een <strong>Hypertext Reference</strong> of <strong>target</strong>) dat het webadres zal bevatten waarnaar u de koppeling wilt laten wijzen.</p> + +<pre class="brush: html"><p>Ik ben een koppeling naar +<a href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken. +</p></pre> + +<p>Dit geeft het volgende resultaat:</p> + +<p>Ik ben een koppeling naar <a class="ignore-external" href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken.</p> + +<h3 id="Ondersteunende_informatie_toevoegen_met_het_title-attribuut">Ondersteunende informatie toevoegen met het title-attribuut</h3> + +<p>Een andere attribuut dat u mogelijk aan uw koppelingen wilt toevoegen is <code>title</code>; dit is bedoeld voor extra nuttige informatie over de koppeling, zoals het type informatie dat de pagina bevat, of zaken waarvan u zich bewust moet zijn. Voorbeeld:</p> + +<pre class="brush: html"><p>Ik ben een koppeling naar +<a href="https://www.mozilla.org/nl/" + title="De beste plek om meer informatie over Mozilla’s + missie te vinden en hoe u daaraan kunt bijdragen">de Mozilla-startpagina</a> +aan het maken.</p></pre> + +<p>De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als u de muisaanwijzer boven een koppeling houdt:</p> + +<p>Ik ben een koppeling naar <a class="ignore-external" href="https://www.mozilla.org/nl/" title="De beste plek om meer informatie over Mozilla’s missie te vinden en hoe u daaraan kunt bijdragen">de Mozilla-startpagina</a> aan het maken.</p> + +<div class="note"> +<p><strong>Noot</strong>: een hyperlink-titel zal alleen verschijnen als u de muis erboven houdt. Dit betekent dat mensen die een toetsenbord gebruiken om in een webpagina te navigeren moeite zullen hebben om de informatie in de tooltip te lezen. Als de informatie van een titel echt nodig is om de pagina te kunnen gebruiken, zou u die moeten aabieden op een manier die voor alle gebruikers toegankelijk is. U kunt de informatie bijvoorbeeld in de normale tekst van de webpagina zetten.</p> +</div> + +<h3 id="Actief_leren_uw_eigen_voorbeeldkoppeling_maken">Actief leren: uw eigen voorbeeldkoppeling maken</h3> + +<p>Tijd om actief te leren: we zouden graag zien dat u een HTML-document maakt met uw lokale broncode-editor. (Ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">‘getting started’-sjabloon</a> is zeer geschikt voor dat doel.)</p> + +<ul> + <li>In de HTML-body voegt u een of meer alinea’s (of andere inhoudstypen waarover u hebt geleerd) toe.</li> + <li>Zet een deel van de inhoud om in hyperlinks.</li> + <li>Voeg title-attributen toe.</li> +</ul> + +<h3 id="Koppelingen_op_blokniveau">Koppelingen op blokniveau</h3> + +<p>We hebben al vermeld dat u ongeveer alle inhoud in een hyperlink kunt omzetten, zelfs <a href="/nl/Learn/HTML/Introduction_to_HTML/Getting_started#Blok-_versus_inline-elementen">elementen op blokniveau</a>. Als u een afbeelding in een koppeling zou willen omzetten, kon u die afbeelding gewoon tussen <code><a></a></code>-labels zeten.</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/nl/"> + <img src="mozilla-image.png" alt="mozilla-logo dat naar de mozilla-startpagina verwijst"> +</a></pre> + +<div class="note"> +<p><strong>Noot</strong>: in een later artikel zult u nog veel meer over het gebruik van afbeeldingen op het web ontdekken.</p> +</div> + +<h2 id="Een_snelle_uitleg_over_URL’s_en_paden">Een snelle uitleg over URL’s en paden</h2> + +<p>Om het doel van een hyperlink volledig te begrijpen, moet u URL’s en bestandspaden begrijpen. Deze sectie verschaft u de informatie die u daarvoor nodig hebt.</p> + +<p>Een URL, of Uniform Resource Locator, is gewoon een string (tekst) die bepaalt waar iets op het web kan worden gevonden. Mozilla’s Nederlandstalige startpagina bijvoorbeeld bevindt zich op <code>https://www.mozilla.org/nl/</code>.</p> + +<p>URL’s gebruiken paden om bestanden te vinden. Paden tonen ons waar een bestand zich in een bestandssysteem bevindt. Laten we een eenvoudig voorbeeld van een mapstructuur bekijken (zie de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>.)</p> + +<p><img alt="Een eenvoudige mapstructuur. De bovenliggende map heet creating-hyperlinks en bevat twee bestanden met de naam index.html en contacts.html, en twee mappen met de naam projects en pdfs, die respectievelijk een bestand index.html en een bestand project-brief.pdf bevatten" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>De <strong>hoofdmap</strong> van deze mapstructuur heet <code>creating-hyperlinks</code>. Als u op uw lokale computer aan een website werkt, zult u een map hebben waarbinnen de volledige website zich bevindt. In de hoofdmap hebben we een bestand <code>index.html</code> en een <code>contacts.html</code>. Op een echte website zou <code>index.html</code> onze startpagina of landingspagina zijn (een webpagina die als het startpunt voor een website of een bepaalde sectie van een website dient).</p> + +<p>In onze hoofdmap zitten ook twee andere mappen – <code>pdfs</code> en <code>projects</code>. In elk van hen steekt één bestand – respectievelijk een PDF-bestand (<code>project-brief.pdf</code>) en een <code>index.html-bestand</code>. Twee <code>index.html</code>-bestanden kunnnen dus heel goed in één project bestaan, zolang ze op verschillende locaties in het bestandsysteem zijn opgeslagen. Bij veel websites is dit het geval. De tweede <code>index.html</code> is misschien de landingspagina voor projectgerelateerde informatie. (Tussen haakjes: een <strong>landingspagina</strong> is een pagina op uw website die specifiek is ingericht voor bezoekers die op die pagina binnenkomen (landen). De bezoeker kan op uw pagina landen via een zoekopdracht of bijvoorbeeld een online- of offlinecampagne die hem of haar naar die specfieke pagina stuurt.)</p> + +<ul> + <li> + <p><strong>Dezelfde map</strong>: stel dat u een hyperlink aan het bestand <code>index.html</code> op het hoogste niveau wilt toevoegen. De hyperlink in deze index.html wijst naar <code>contacts.html.</code> U hoeft dan alleen de bestandsnaam van het bestand waarnaar u wilt verwijzen op te geven, omdat dit zich in dezelfde map bevindt als het huidige bestand. De URL is dus gewoon <code>contacts.html</code>:</p> + + <pre class="brush: html"><p>Wilt u contact opnemen met een staflid? +Details vindt u op onze <a href="contacts.html">contactpagina</a>.</p></pre> + </li> + <li> + <p><strong>Afdalen naar submappen</strong>: stel dat u opnieuw een hyperlink aan het bestand <code>index.html</code> in de hoofdmap wilt toevoegen, maar deze keer wijst de hyperlink naar <code>projects/index.html</code>. In dat geval zou u omlaag naar de map <code>projects</code> moeten gaan voordat u het bestand aangeeft waarnaar u wilt verwijzen. Dit doet u door eerst de naam van de map te noteren, dan een voorwaartse schuine streep te schrijven, en dan de naam van het bestand. De URL zal er dus zo uitzien: <code>projects/index.html</code>:</p> + + <pre class="brush: html"><p>Bezoek mijn <a href="projects/index.html">project-startpagina</a>.</p></pre> + </li> + <li> + <p><strong>Teruggaan naar bovenliggende mappen</strong>: als u een hyperlink in <code>projects/index.html</code> wilt plaatsen en u wilt dat die koppeling naar <code>pdfs/project-brief.pdf</code> wijst, moet u een niveau omhoog gaan, en dan opnieuw omlaag naar de map <code>pdf</code>. ‘Naar een bovenliggende map gaan’ wordt aangegeven via twee puntjes – <code>..</code> – dus de te gebruiken URL is <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html"><p>Een hyperlink naar mijn <a href="../pdfs/project-brief.pdf">projectsamenvatting</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Noot</strong>: zo nodig kunt u meerdere instanties van deze eigenschappen in complexe URL’s combineren, bijvoorbeeld <code>../../../complex/pad/naar/mijn/bestand.html</code>.</p> +</div> + +<h3 id="Documentfragmenten">Documentfragmenten</h3> + +<p>Het is mogelijk om naar een specifiek deel van een HTML-document te verwijzen. Dit specifieke deel noemen we een <strong>documentfragment</strong>. Om dit te doen hebt u een {{htmlattrxref("id")}}-attribuut nodig. U moet het toekennen aan het element waarnaar u uw hyperlink wilt laten wijzen. Het is meestal zinvol om er een geschikte kop voor te gebruiken. Die kop zal er ongeveer zo uitzien:</p> + +<pre class="brush: html"><h2 id="E-mailadres">E-mailadres</h2></pre> + +<p>Om dan naar dat specifieke <code>id</code> te verwijzen, voegt u de inhoud van het id aan het einde van de URL toe, voorafgegaan door een hekje (#). Voorbeeld:</p> + +<pre class="brush: html"><p>Wilt u ons een brief schrijven? Gebruik dan ons <a href="contacts.html#e-mailadres">e-mailadres</a>.</p></pre> + +<p>U kunt het documentfragment zelfs aan <em>een ander deel van hetzelfde document</em> koppelen:</p> + +<pre class="brush: html"><p>Het<a href="#e-mailadres">e-mailadres van ons bedrijf</a> vindt u onderaan de pagina.</p></pre> + +<h3 id="Absolute_versus_relatieve_URL’s">Absolute versus relatieve URL’s</h3> + +<p>Twee termen die u op het web zult tegenkomen zijn <strong>absolute URL</strong> en <strong>relatieve URL:</strong></p> + +<p><strong>Een absolute URL</strong> wijst naar de absolute locatie op het web. Die locatie houdt ook het {{glossary("protocol")}} en de {{glossary("domain name")}} in. Stel bijvoorbeeld dat een pagina <code>index.html</code> wordt geüpload naar een map die <code>projects</code> heet. Als die zich in de hoofdmap (root in het Engels) van een webserver bevindt en het domein van de website is <code>http://www.example.com</code>, zou u de pagina op <code>http://www.example.com/projects/index.html</code> kunnen vinden. (Of zelfs alleen <code>http://www.example.com/projects/</code>, want de meeste webservers zoeken naar een landingspagina zoals <code>index.html</code> die ze kunnen laden als deze niet in de URL wordt vermeld.)</p> + +<p>Een absolute URL zal altijd naar dezelfde locatie wijzen, waar deze ook wordt gebruikt.</p> + +<p><strong>Een relatieve URL</strong> wijst naar een locatie die <em>relatief</em> is ten opzichte van het bestand vanwaar u verwijst. De koppeling ziet eruit zoals de URL’s die we in de vorige sectie hebben bekeken. Als u bijvoorbeeld een koppeling van ons voorbeeld <code>http://www.example.com/projects/index.html</code> naar een PDF-bestand in dezelfde map wilt maken, zou de URL alleen uit de bestandsnaam bestaan – bv. <code>project-brief.pdf</code> – extra informatie is dan niet nodig. Als de PDF beschikbaar was in de submap binnen <code>projects</code> met de naam <code>pdfs</code>, zou de relatieve koppeling <code>pdfs/project-brief.pdf</code> zijn (de equivalente absolute URL zou er dan zo uitzien: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Een relatieve URL kan naar verschillende plekken wijzen, afhankelijk van de locatie van het bestand waarin de koppeling wordt vermeld zich bevindt. Als we bijvoorbeeld ons bestand <code>index.html</code> uit de map <code>projects</code> zouden halen en dit in de hoofdmap van de website zouden plaatsen (het hoogste niveau, geen submappen), zou <code>pdfs/project-brief.pdf</code> nu naar <code>http://www.example.com/pdfs/project-brief.pdf</code> wijzen en niet naar <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<h2 id="Optimale_methoden_voor_het_werken_met_koppelingen">Optimale methoden voor het werken met koppelingen</h2> + +<p>Er bestaan een aantal ‘beste werkwijzen’ die u kunt volgen als u een hyperlink maakt. Die werkwijzen gaan we hieronder bekijken.</p> + +<ul> +</ul> + +<h3 id="Verwoord_uw_koppelingen_duidelijk">Verwoord uw koppelingen duidelijk</h3> + +<p>Het is makkelijk om een paar koppelingen op uw pagina te plaatsen, maar dat is niet genoeg. We moeten onze hyperlinks <em>toegankelijk</em> maken voor alle lezers, ongeacht hun huidige context en hulpmiddelen van hun voorkeur. Voorbeeld:</p> + +<ul> + <li>Mensen die een schermlezer gebruiken, springen graag van koppeling naar koppeling en lezen die zonder op de context in te gaan.</li> + <li>Zoekmachines gebruiken hyperlinktekst om doelbestanden te indexeren. Het is dus een goed idee om sleutelwoorden in uw koppelingstekst te gebruiken. Deze sleutelwoorden beschrijven de plek waar de koppeling u naartoe brengt.</li> + <li>Visuele lezers scannen de tekst in plaats van elk woord te lezen en hun blik zal op pagina-eigenschappen worden gericht die er echt uitspringen, zoals koppelingen. Ze zullen de beschrijvende tekst in een koppeling nuttig vinden.</li> +</ul> + +<p>We bekijken een specifiek voorbeeld:</p> + +<p><em><strong>Goede</strong> koppelingstekst:</em> <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><em><strong>Slechte</strong> koppelingstekst:</em> <a href="https://firefox.com/">Klik hier</a> om Firefox te downloaden</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Klik hier +</a> +om Firefox te downloaden</p> +</pre> + +<p>Andere tips:</p> + +<ul> + <li>Herhaal de URL niet als onderdeel van de koppelingstekst – URL’s zijn lelijk en klinken nog lelijker als ze letter voor letter door een schermlezer worden voorgelezen.</li> + <li>Zeg niet ‘koppeling’ of ‘verwijst naar’ in de koppelingstekst – dit is alleen maar ruis. Schermlezers vertellen gebruikers dat er een koppeling is. Visuele gebruikers zullen weten dat er een koppeling staat, omdat een koppeling standaard wordt onderstreept en ook in een andere kleur zal staan. (Deze conventie kan dus beter niet worden doorbroken, want gebruikers zijn eraan gewend.)</li> + <li>Houd uw koppelingstekst zo kort mogelijk – lange koppelingen irriteren schermlezergebruikers nog het meest, omdat die naar het hele verhaal moeten luisteren.</li> + <li>Minimaliseer het gebruik van meerder kopieën van dezelfde tekst die naar verschillende plaatsen wordt verwezen. Dit kan problemen veroorzaken bij gebruikers van schemrlezers, want zij zullen een koppelingen vaker buiten de context ervan lezen – diverse koppelingen met het label ‘klik hier’, ‘klik hier’, ‘klik hier’ zouden verwarrend zijn.</li> +</ul> + +<h3 id="Gebruik_relatieve_koppelingen_waar_mogelijk">Gebruik relatieve koppelingen waar mogelijk</h3> + +<p>Als u de beschrijving hierboven leest, denkt u misschien dat het een goed idee is om altijd absolute koppelingen te gebruiken. Ze kunnen niet defact raken als een pagina van plaats verandert, en relatieve koppelingen zullen dat wel doen. Niettemin is het beter een relatieve koppeling te gebruiken waar dat mogelijk is als u naar locaties <em>op dezelfde website</em> verwijst (Als u naar <em>een andere website</em> verwijst, zult u een absolute koppeling nodig hebben):</p> + +<ul> + <li>Ten eerste is het veel makkelijker om uw code te scannen – relatieve URL’s zijn in het algemeen veel korter dan absolute URL’s, wat het lezen van code veel makkelijker maakt.</li> + <li>Ten tweede is het gebruik van relatieve URL’s veel efficiënter. Als u een absolute URL gebruikt, zoekt de browser eerst de echte locatie van de server op door de domeinnaam op de {{glossary("DNS")}}-server op te zoeken, vervolgens gaat de browser naar de server waar het bestand zich op bevindt, en pas daarna vindt deze het gevraagde bestand. Een relatieve URL laat de browser naar het gevraagde bestand op dezelfde server zoeken. Als u dus absolute URL’s gebruikt waar relatieve URL’s voldoende zijn, laat u uw browser constant extra werk doen, wat betekent dat deze minder efficiënt werkt.</li> +</ul> + +<h3 id="Koppelingen_naar_browservreemde_bronnen_–_gebruik_duidelijke_wegwijzers">Koppelingen naar browservreemde bronnen – gebruik duidelijke wegwijzers</h3> + +<p>Als u hyperlinks schrijft naar een bron die men downloadt (zoals een PDF- of Word-document), streamt (zoals video of audio) of die een ander potentieel onverwacht effect heeft (een pop-upvenster opent of een Flash-film laadt), voeg dan duidelijke bewoording toe om elke verwarring te vermijden. Het kan zeer bijvoorbeeld zeer vervelend worden:</p> + +<ul> + <li>Als u een lage bandbreedte hebt, op een koppeling klikt en er onverwacht een download van een meerdere megabytes begint.</li> + <li>Als u Flash Player niet hebt geïnstalleerd, op een koppeling klikt en u plotseling naar een pagina wordt gebracht die Flash vereist.</li> +</ul> + +<p>Laten we een paar voorbeelden bekijken en wat voor tekst we in dit soort gevallen kunnen gebruiken:</p> + +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> + Het omzetrapport downloaden(PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + De video bekijken (stream opent in apart tabblad, HD-kwaliteit) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Het autospel spelen (vereist Flash-software) +</a></p></pre> + +<h3 id="Gebruik_het_download-attribuut_als_u_naar_een_download_verwijst">Gebruik het download-attribuut als u naar een download verwijst</h3> + +<p>Als u een koppeling naar een bron schrijft die beter kan worden gedownload dan deze in de browser te openen, kunt u het <code>download</code>-attribuut gebruiken en de koppeling een standaard bestandsnaam geven om de download mee op te slaan. Hier is een voorbeeld met een downloadkoppeling naar de Windows-versie van Firefox 39:</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=nl" + download="firefox-39-installer.exe"> + Download Firefox 39 voor Windows +</a></pre> + +<h2 id="Actief_leren_een_navigatiemenu_maken">Actief leren: een navigatiemenu maken</h2> + +<p>Voor deze oefening willen we dat u een paar pagina’s naar elkaar laat verwijzen met een navigatiemenu. Zo kunt u een website maken die uit meerdere pagina’s bestaat. Dit is een gebruikelijke manier – dezelfde paginastructuur wordt op elke pagina herhaald, inclusief het navigatiemenu. Als u dus op de koppelingen klikt, hebt u de indruk dat u op dezelfde plek blijft en dat er verschillende inhoud wordt getoond.</p> + +<p>U hebt lokale kopieën van de volgende vier pagina’s nodig, alle vier in dezelfde map (zie ook de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> voor een volledige lijst):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Wat u moet doen:</p> + +<ol> + <li>Voeg een ongeordende lijst toe op de aangegeven plek op één pagina, die de namen bevat van de pagina’s waarnaar wordt verwezen. Een navigatiemenu is gewoonlijk niet meer dan een lijst met koppelingen, dus semantisch gezien is dit in orde.</li> + <li>Zet alle paginanamen om naar een hyperlink naar die pagina.</li> + <li>Kopieer het navigatiemenu naar de drie andere pagina’s.</li> + <li>Op elke pagina verwijdert u de koppeling naar zichzelf – dat is alleen maar verwarrend en zinloos, en het ontbreken van een koppeling is een goede visuele herinnering aan de pagina waarop u zich nu bevindt.</li> +</ol> + +<p>Het voltooide voorbeeld zou er ongeveer zo moeten uitzien:</p> + +<p><img alt="Een voorbeeld van een eenvoudig HTML-navigatiemenu, met startmenu, afbeeldingen, projecten en sociale menu-items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Noot</strong>: als u vastloopt, of er niet zeker van bent dat u het allemaal juist hebt, kunt u de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> bekijken om het juiste antwoord te zien.</p> +</div> + +<h2 id="E-mailkoppelingen">E-mailkoppelingen</h2> + +<p>Het is mogelijk om koppelingen of knoppen te maken die een nieuwe e-mailbericht openen, als erop wordt geklikt. Dit is mogelijk door het gebruik van het {{HTMLElement("a")}}-element en het URL-schema <code>mailto:</code>.</p> + +<p>In de meest eenvoudige en gebruikelijke vorm duidt een ‘<code>mailto:</code>-koppeling’ gewoon het e-mailadres van de bedoelde ontvanger aan. Voorbeeld:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a> +</pre> + +<p>Het resultaat is een koppeling die er zo uitziet: <a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a>.</p> + +<p>In feite is het e-mailadres zelfs optioneel. Als u het weglaat (dat wil zeggen, uw {{htmlattrxref("href", "a")}} is gewoon "mailto:"), zal een nieuw venster voor uitgaande e-mail worden geopend door het e-mailprogramma van de gebruiker waarin nog geen bestemmingsadres is ingevuld. Dit is vaak nuttig voor het ‘Delen’ van koppelingen waarop gebruikers kunnen klikken om een e-mailbericht naar een zelfgekozen e-mailadres te sturen.</p> + +<h3 id="Details_toevoegen">Details toevoegen</h3> + +<p>Behalve het e-mailadres kunt u nog andere informatie toevoegen. In feite kunnen alle kopregels van een standaardmail worden toegevoegd aan de <code>mailto</code>-URL die u opgeeft. De meest gebruikelijke zijn ‘subject’ (onderwerp), ‘cc’, en ‘body’ (body is de inhoud, body is geen echt headerveld, maar u kunt er een korte inhoud van het nieuwe e-mailbericht mee opgeven). Elk veld en de waarde ervan wordt als zoekterm opgegeven.</p> + +<p>Hier is een voorbeeld met cc, bcc, subject en body:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> + E-mail verzenden met cc, bcc, subject en body +</a></pre> + +<div class="note"> +<p><strong>Noot:</strong> de waarden van elk veld moeten URL-gecodeerd zijn, d.w.z. met niet-afdrukbare tekens (onzichtbare tekens zoals tabs, enters en pagina-einden) en spaties <a href="http://en.wikipedia.org/wiki/Percent-encoding">‘percent-escaped’</a>). Let ook op het gebruik van het vraagteken (<code>?</code>) om de hoofd-URL van de ingevoerde waarden te scheiden, en de ampersand (&) om de velden in de <code>mailto:</code>-URL van elkaar te scheiden. Dit is standaard URL-zoeknotatie. U kunt de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#De_GET-methode">De GET-methode</a> lezen als u meer over URL-querynotatie wilt weten.)</p> +</div> + +<p>Dit zijn enkele voorbeelden van <code>mailto</code>-URL’s:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=Dit%20is%20het%20onderwerp">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=Dit%20is%20het%20onderwerp</a></li> +</ul> + +<h2 id="Samenvatting">Samenvatting</h2> + +<p>Dat is het wat koppelingen betreft, in elk geval voorlopig! U zult er later in deze cursus naar terugkeren als u begint te leren hoe u ze kunt stijlen. We gaan verder met tekstsemantiek en bekijken een aantal geavanceerde en ongewone eigenschappen die u nuttig zult vinden – Geavanceerde tekstopmaak is uw volgende halte.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/index.html b/files/nl/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..2d3a59d5d5 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/index.html @@ -0,0 +1,64 @@ +--- +title: Een Inleiding op HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - Inleiding op HTML + - Structuur + - semantisch +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{glossary("HTML")}} is, in zijn kern, een vrij eenvoudige taal. Hij bestaat uit <a href="/nl/docs/Glossary/Element">elementen</a> die kunnen worden toegepast op stukken tekst om hen een nieuwe betekenis in een document te geven (is de tekst een paragraaf? een ongeordende lijst? een onderdeel van een tabel?). Met HTML kan je een document ook in logische secties structureren (heeft het een koptekst? drie kolommen met inhoud? een navigatiemenu?) en je kan inhoud zoals afbeeldingen en video's in een pagina integreren. Deze module is een inleiding op de eerste twee aspecten van HTML en introduceert fundamentele begrippen en syntaxis, die je nodig hebt om HTML te begrijpen.</p> + +<h2 id="Minimum_vereisten">Minimum vereisten</h2> + +<p>Om met deze module te beginnen, hoef je geen HTML te kennen maar je zou toch wel een beetje vertrouwd moeten zijn met een computer en je zou het web passief moeten kunnen gebruiken (i.e. je kan websites bekijken en hun inhoud consumeren.) Je zou een miminimale werkomgeving moeten hebben opgezet zoals is aangegeven in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Basissoftware installeren</a>. Het is ook nodig dat je begrijpt hoe je bestanden kan maken en beheren, zoals is uitgelegd in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a>. Beide artikelen zijn hoofdstukken in onze module voor complete beginners, <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Van start met het web</a>. </p> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je met een computer, tablet of een ander toestel werkt en je kan er geen bestanden mee creëren, kan je de (meeste) codevoorbeelden in een online programma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a> schrijven.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<p>Deze module bevat een aantal artikelen die de basistheorie van HTML bespreken en heel wat gelegenheden biedt om je vaardigheden uit te testen.</p> + +<dl> + <dt><a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started" style="font-weight: 700;">Met HTML beginnen</a></dt> + <dd> + <p>Dit artikel helpt je op weg met de basisprincipes van HTML — we definiëren elementen, attributen en alle andere belangrijke begrippen waarover je misschien al hebt gelezen en hoe ze in de taal passen. We tonen je ook hoe een HTML-element is gestructureerd en verklaren een aantal belangrijke basiseigenschappen van de taal. Terwijl we dat allemaal doen, spelen we met HTML om je interesse op te wekken! </p> + </dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Wat zit er in het hoofd? Metadata in HTML</a></dt> + <dd>Het hoofd van een HTML-document is het deel dat niet in een webbrowser wordt getoond als de pagina wordt geladen. Het bevat informatie zoals bijvoorbeeld de pagina {{htmlelement("title")}}, links naar {{glossary("CSS")}} (als je je HTML-inhoud met CSS wil stijlen, links naar je eigen favicons en metadata (dit is data over de HTML, bijv. wie de HTML geschreven heeft en belangrijke sleutelwoorden die het document beschrijven).</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basisprincipes</a> </dt> + <dd>HTML vervult een aantal taken. Hij geeft onder andere betekenis aan een tekst (ook gekend als <strong>semantiek</strong>) zodat de browser weet hoe de tekst correct moet worden weergegeven. In dit artikel leren we hoe we HTML kunnen gebruiken om een blok tekst op te delen in een structuur van hoofdingen en paragrafen, hoe we woorden moeten benadrukken, hoe we lijsten moeten maken en nog veel meer.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks creëren</a></dt> + <dd>Hyperlinks zijn echt belangrijk — zij zijn wat van het Web een web maakt. Dit artikel toont welke syntaxis je nodig hebt om een hyperlink te maken en bespreekt de beste manier om de theorie over hyperlinks toe te passen.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gevorderde tekstopmaak</a></dt> + <dd>Er zijn vele andere elementen in HTML om tekst mee te formatteren waar we in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst: de basisprincipes</a> niet aan toe zijn gekomen. De elementen in dit artikel zijn niet zo goed gekend maar toch wel nuttig om te leren. Je zal leren hoe je citaten kunt opmaken, beschrijvende lijsten, computer code en andere gerelateerde tekst, subscript en superscript, contactinformatie enz.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document- en websitestructuur</a></dt> + <dd>Met HTML kan je individuele delen van je pagina definiëren (zoals een "paragraaf" of een "afbeelding") maar behalve dat wordt HTML ook gebruikt om gebieden van je website te definiëren (zoals "de koptekst", "het navigatiemenu", "de kolom met de hoofdinhoud"). Dit artikel bekijkt hoe we de basisstructuur van je website kunnen plannen en de HTML schrijven om die structuur weer te geven.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML debuggen</a></dt> + <dd>HTML schrijven is prima, maar wat als er iets fout gaat en je komt er maar niet achter waar de fout in je code zit? Dit artikel is een inleiding op een aantal instrumenten die je kunnen helpen.</dd> +</dl> + +<h2 id="Evalutie">Evalutie</h2> + +<p>De volgende oefeningen dienen als test van de HTML-basisbegrippen die in de gidsen hierboven zijn doorgenomen.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">De opmaak van een brief</a></dt> + <dd>Vroeg of laat leren we allemaal hoe we een brief moeten schrijven. Het is ook een nuttig voorbeeld waarmee we je tekstopmaak-vaardigheden kunnen testen! In deze test zal je dus een brief krijgen om op te maken.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">De inhoud van een pagina structureren</a></dt> + <dd>Deze oefening evalueert je capaciteit om een eenvoudige inhoud op een pagina te structureren met HTML. De pagina bevat een koptekst, een voettekst, een navigatiemenu, de hoofdinhoud en een zijbalk.</dd> +</dl> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd>Dit is een uitstekende Mozilla foundation cursus. Vele vaardigheden die in de <em>Met HTML beginnen</em> module werden besproken worden hierin onderzocht en getest. Studenten raken vertrouwd met het lezen, schrijven en participeren op het web in deze zesdelige module. Ontdek de fundamenten van het web door productie en samenwerking.</dd> +</dl> diff --git a/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html b/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html new file mode 100644 index 0000000000..1942ef0baa --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html @@ -0,0 +1,81 @@ +--- +title: De opmaak van een brief +slug: Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Vroeg of laat leren we allemaal hoe we een brief moeten schrijven. Deze vaardigheid is ook een nuttig voorbeeld waarmee we onze nieuwe vaardigheden kunnen uittesten. In deze evaluatie zal je een brief krijgen die je moet opmaken. Je zal je kennis over tekstopmaak kunnen gebruiken (zowel op basis- als op gevorderd niveau). Je kennis over hyperlinks zal ook van pas komen en we zullen ook je vertrouwdheid met een aantal HTML <code><head></code> inhouden testen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Vooraleer je deze evaluatie uitprobeert zou je de volgende hoofdstukken moeten hebben doorgewerkt: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Wat steek er in het hoofd? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst: basisprincipes</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a> en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gevorderde tekstopmaak</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Je vaardigheden op het gebied van HTML tekstopmaak en hyperlinks uittesten (op basis- en gevorderd niveau) en de evaluatie van je kennis over het HTML <head>.</td> + </tr> + </tbody> +</table> + +<h2 id="Startpunt">Startpunt</h2> + +<p>Om met deze evaluatie van start te kunnen gaan, heb je de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">ruwe tekst die je gaat opmaken</a> nodig en de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS die je HTML zal bevatten</a>. Creëer een nieuw <code>.html</code> bestand in je broncodebewerker. Daarin ga je je werk doen (een alternatief voor de broncodeverwerker is een site zoals <a class="external external-icon" href="http://jsbin.com/">JSBin</a> of <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>)</p> + +<h2 id="Instructies">Instructies</h2> + +<p>Je taak voor dit project is de opmaak van een brief die op het intranet van een universiteit zal worden geplaatst. De brief is een antwoord van een onderzoeker aan een student die zijn doctoraat wil doen. Het gaat over de aanvraag van de doctoraatsstudent om aan de universiteit te kunnen werken. </p> + +<p>Semantiek op blokniveau:</p> + +<ul> + <li>Je moet het hele document een geschikte structuur geven, inclusief het doctype en de {{htmlelement("html")}}, {{htmlelement("head")}} and {{htmlelement("body")}} elementen.</li> + <li>De brief moeten worden opgemaakt met een structuur die paragrafen en kopteksten bevat, met uitzondering van de secties die je hieronder vindt. Er is één koptekst op het hoogste niveau (de "Re:" regel) en er zijn drie kopteksten op een tweede niveau.</li> + <li>De start data van de semesters, studie-onderwerpen en de exotische dansen zouden moeten worden opgemaakt met een passende structuur om een lijst weer te geven.</li> + <li>De twee adressen kan je gewoon in paragrafen steken. Het {{htmlelement("address")}}-element is er niet voor geschikt — denk eens na over het waarom. Elke regel van de adressen moet ook op een nieuwe lijn worden geplaatst maar niet in een nieuwe paragraaf.</li> +</ul> + +<p>Inline semantiek:</p> + +<ul> + <li>De namen van de zender en de ontvanger (en "Tel" en "Email") moeten als zeer belangrijk worden opgemaakt.</li> + <li>De vier data in het document zouden door passende elementen omhuld moeten worden. Deze elementen moeten data bevatten die machine-leesbaar zijn.</li> + <li>Het eerste adres en de eerste datum in de letter krijgen een class attribuut met de waarde "ontvanger-kolom"; de CSS die je later zal toevoegen zal ervoor zorgen dat ze rechts zullen worden uitgelijnd zoals je dat ziet in de lay-out van een typische brief.</li> + <li>De vijf acroniemen/afkortingen in de brieftekst zouden zo moeten worden opgemaakt dat je kan zien waar de afkortingen/acroniemen voor staan als je er met je muis overheen glijdt.</li> + <li>De zes sub/superscripten moeten op passende wijze worden opgemaakt.</li> + <li>De symbolen die graden voorstellen, het groter-dan symbool en de symbolen die een vermenigvuldiging weergeven moeten met passende entiteitsverwijzingen.</li> + <li>Probeer ten minste twee geschikte woorden in de brieftekst met grote belangrijkheid/nadruk op te maken.</li> + <li>Je moet op twee plekken een hyperlink toevoegen. Voeg passende links met titels toe. Voor de locatie waar de link naar verwijst, gebruik je gwoon http://example.com.</li> + <li>Het motto van de universitveit moet met geschikte elementen worden opgemaakt.</li> +</ul> + +<p>Het hoofd van het document:</p> + +<ul> + <li>Als tekencodering van het document kies je utf-8 en je plaatst het in een passende meta-tag.</li> + <li>De auteur van de brief moet worden vermeldi in een geschikte meta-tag.</li> + <li>De CSS die het document zal stijlen, moet worden ingebed in een geschikte tag.</li> +</ul> + +<h2 id="Hints_en_tips">Hints en tips</h2> + +<ul> + <li>Gebruik de <a href="https://validator.w3.org/">W3C HTML validator</a> om je HTML te evalueren; je krijgt bonuspunten als hij wordt gevalideerd.</li> + <li>Je hoeft nog niets over CSS te weten om deze evaluatie te doen; al wat je moet doen is de CSS die we aanbieden in een HTML-element plaatsen.</li> +</ul> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>De volgende schermafbeelding toont een voorbeeld van hoe de brief er uit zou kunnen zien nadat die is opgemaakt.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<h2 id="Evaluatie">Evaluatie</h2> + +<p>Als je deze evaluatie als onderdeel van een georganiseerde cursus volgt, zou je in staat moeten zijn om je werk aan je leraar of mentor te geven zodat die er punten aan kan geven. Als je op je eentje werkt, dan kan je de puntengids vrij gemakkelijk krijgen door die op te vragen op de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, of op het <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC kanaal op <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html b/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html new file mode 100644 index 0000000000..baca13f51b --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html @@ -0,0 +1,83 @@ +--- +title: De inhoud van een webpagina structureren +slug: Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Als je de inhoud van een pagina structureert, doe je dat met de CSS in je achterhoofd. Het is een belangrijk vaardigheid want met de CSS die je op die structuur zal toepassen, kan je een mooie lay-out kan creëren. In deze evaluatie testen we je capaciteit om te bedenken hoe een pagina er zou kunnen uit gaan zien en om geschikte semantische elementen te gebruiken zodat je bovenop die structuur een lay-out kan bouwen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Vooraleer je aan deze evaluatie begint zou je al de vorige hoofdstukken al moeten hebben verwerkt, vooral <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">De structuur van je document en je website</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>We testen je kennis van webpagina-structuren en hoe je een toekomstig lay-out ontwerp in html-opmaak kan weergeven.</td> + </tr> + </tbody> +</table> + +<h2 id="Startpunt">Startpunt</h2> + +<p>Je start deze evaluatie met het <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">zip bestand met al de hulpmiddelen om te starten</a>. Het zip-bestand bevat:</p> + +<ul> + <li>De HTML waar je structurele opmaak aan toe moeten voegen.</li> + <li>CSS om je opmaak te stijlen.</li> + <li>Afbeeldingen die op de pagina worden gebruikt.</li> +</ul> + +<p>Maak het voorbeeld op je lokale computer of gebruik een site als <a class="external external-icon" href="http://jsbin.com/">JSBin</a> of <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> om je evaluatie op uit te voeren.</p> + +<h2 id="Instructies_voor_die_project">Instructies voor die project</h2> + +<p>Voor dit project krijg je de volgende taak: je voegt structurele elementen toe aan de inhoud van de startpagina voor vogelaars. Je zorgt ervoor dat er later een lay-out op kan worden toegepast. Het krijgt de volgende elementen:</p> + +<ul> + <li>Een hoofding die de volledige breedte van de site bestrijkt. Het bevat de belangrijkste titel voor de pagina, het logo van de site en het navigatie menu. De titel en het logo zullen naast elkaar en verschijnen als de CSS erop wordt toegepast. Het navigatiemenu zal eronder worden weergegeven.</li> + <li>Een gebied voor de belangrijkste inhoud die twee kolommen bevat - één blok voor de de welkomsttekst en een zijbalk voor de thumbnails van de afbeeldingen.</li> + <li>Een voettekst die de informatie over de auteursrech en naamsvermeldingen.</li> +</ul> + +<p>Je hebt ook een elementen nodig voor:</p> + +<ul> + <li>De hoofding</li> + <li>Het navigatiemenu</li> + <li>De belangrijkste inhoud</li> + <li>De welkomsttekst</li> + <li>De zijbalk voor de afbeeldingen</li> + <li>De voettekst</li> +</ul> + +<p>Dit moet je ook nog doen:</p> + +<ul> + <li>Pas de CSS die je hebt gekregen op de webpagina toe door nog een {{htmlelement("link")}}-element toe te voegen. Dat doe je net onder degene die er al staat.</li> +</ul> + +<h2 id="Hints_en_tips">Hints en tips</h2> + +<ul> + <li>Gebruik de <a href="https://validator.w3.org/">W3C HTML validator</a> om je HTML te valideren; je krijgt bonuspunten als je HTML zo veel mogelijk wordt gevalideerd (de "googleapis" regel is een regel die wordt gebruikt om aangepaste lettertypes van Google's Font Service te importeren en die wordt niet gevalideerd. Maak je er maar geen zorgen over.)</li> + <li>Je hebt geen CSS-kennis nodig om deze evaluatie uit te voeren; je hoeft enkel de CSS die wij verschaffen in een HTML-element te plaasten.</li> + <li>De CSS die je van ons krijgt is zo ontworpen dat als de correcte structurele elementen aan de opmaak worden toegevoegd, ze met een groene kleur in de gegenereerde pagina zullen verschijnen.</li> + <li>Als je vastraakt en je hebt geen idee waar je welke elementen moet plaatsen, helpt het vaak om een eenvoudig diagram of de lay-out te tekenen en de elementen die je denkt nodig te hebben op de schets te schrijven.</li> +</ul> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Devolgende schermafbeelding toont een voorbeeld van hoe de startpagina er zou kunnen uitzien nadat die werd opgemaakt.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Evaluatie">Evaluatie</h2> + +<p>Als je deze evaluatie als onderdeel van een georganiseerde cursus volgt, zou je in staat moeten zijn om je werk aan je leraar of mentor te geven zodat die er punten aan kan geven. Als je op je eentje werkt, dan kan je de puntengids vrij gemakkelijk krijgen door die op te vragen op de <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, of op het <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC kanaal op <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen! </p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html b/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html new file mode 100644 index 0000000000..5e2662b5ea --- /dev/null +++ b/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html @@ -0,0 +1,368 @@ +--- +title: Afbeeldingen in HTML +slug: Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML +tags: + - Article + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">In den beginne was het web alleen tekst en was het echt heel saai. Gelukkig duurde het niet lang totdat de mogelijkheid voor het inbedden van afbeeldingen (en andere soorten inhoud) in webpagina’s werd toegevoegd. Er bestaan ook nog andere soorten multimedia, maar het is logisch om te beginnen met het nederige {{htmlelement("img")}}-element, dat wordt gebruikt om eenvoudige afbeeldingen in een webpagina te plaatsen. In dit artikel bekijken we in detail hoe we dit element gebruiken. We bespreken de basisprincipes, de toevoeging van bijschriften met het {{htmlelement("figure")}}-element, en hoe het zich verhoudt tot CSS-achtergrondafbeeldingen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereisten:</th> + <td>Basiscomputervaardigheden, <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">de installatie van basissoftware</a>, basiskennis van het <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">werken met bestanden</a>, vertrouwdheid met HTML-basisprincipes (zoals die worden besproken in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>).</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>U leert hoe u eenvoudige afbeeldingen in HTML kunt inbedden, hoe u hieraan bijschriften kunt toevoegen, en hoe HTML-afbeeldingen zich verhouden tot CSS-achtergrondafbeeldingen.</td> + </tr> + </tbody> +</table> + +<h2 id="Hoe_plaatsen_we_een_afbeelding_op_een_webpagina">Hoe plaatsen we een afbeelding op een webpagina?</h2> + +<p>Om eenvoudige afbeelding op een webpagina te plaatsen, gebruiken we het {{htmlelement("img")}}-element. Dit is een leeg element (wat inhoudt dat het geen tekst of sluittag bevat) en slechts één attribuut nodig heeft om nuttig te zijn: het <code>src</code>-attribuut (soms uitgesproken als het volledige woord, <em>source</em>, ofwel bron in het Nederlands). Het <code>src</code>-attribuut bevat een pad dat naar de afbeelding wijst die u in de pagina wilt inbedden. Dit pad kan een relatieve of een absolute URL zijn, net zoals de waarden van het href-attribuut dat tot het {{htmlelement("a")}}-element behoort.</p> + +<div class="note"> +<p><strong>Noot</strong>: voordat u verdergaat, zou u <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Een_snelle_uitleg_over_URL%E2%80%99s_en_paden">Een snelle uitleg over URL’s en paden</a> moeten lezen om uw geheugen wat betreft relatieve en absolute URL’s op te frissen.</p> +</div> + +<p>Als uw afbeelding bijvoorbeeld <code>dinosaur.jpg</code> heet en zich in dezelfde map bevindt als uw HTML-pagina, zou u de afbeelding als volgt kunnen inbedden:</p> + +<pre class="brush: html"><img src="dinosaurus.jpg"></pre> + +<p>Als de afbeelding zich in een submap <code>afbeeldingen</code> zou bevinden die zich in dezelfde map als de HTML-pagina zou bevinden (een aanbeveling van Google voor {{glossary("SEO")}}/indexeringsdoeleinden), zou u deze op de volgende manier inbedden:</p> + +<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg"></pre> + +<p>Enzovoort.</p> + +<div class="note"> +<p><strong>Noot</strong>: zoekmachines lezen ook bestandsnamen en gebruiken die om hun zoekresultaten te optimaliseren (SEO of Search Engine Optimalisation in het Engels). Geef uw afbeelding daarom een beschrijvende naam. <code>dinosaurus.jpg</code> is beter dan <code>img835.png</code>.</p> +</div> + +<p>U zou de afbeelding met een absolute URL kunnen inbedden, zoals in dit voorbeeld:</p> + +<pre class="brush: html"><img src="https://www.example.com/afbeeldingen/dinosaurus.jpg"></pre> + +<p>Dat is echter zinloos, want de browser moet dan veel meer werk verrichten. Hij moet het IP-adres van de DNS-server helemaal opnieuw opvragen, etc. Vrijwel altijd bewaart u de afbeeldingen voor uw website toch op dezelfde server als uw HTML.</p> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> de meeste afbeeldingen zijn auteursrechtelijk beschermd. Plaats <strong>geen</strong> afbeelding op uw webpagina, tenzij:<br> + <br> + 1) u de eigenaar van de afbeelding bent<br> + 2) u expliciete, geschreven toestemming van de eigenaar van de afbeelding hebt, of<br> + 3) u voldoende bewijs hebt dat de afbeelding tot het publieke domein behoort.<br> + <br> + Schendingen van het auteursrecht zijn illegaal en onethisch. Bovendien mag u uw <code>src</code>-attribuut <strong>nooit </strong>gebruiken om een koppeling naar een afbeelding te maken die zich op de website van iemand anders bevindt en waarvoor u geen toestemming hebt gekregen om hiernaar te verwijzen. Dit noemen we ‘hotlinking’ (hete verbindingen maken in het Nederlands). Nogmaals, het is illegaal om iemands bandbreedte te stelen. Ook vertraagt het uw pagina en hebt u geen controle over wat de eigenaar ermee doet; deze kan de afbeelding verwijderen of vervangen door iets gênants.</p> +</div> + +<p>De code hierboven zou het volgende resultaat opleveren:</p> + +<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>Noot</strong>: elementen zoals {{htmlelement("img")}} en {{htmlelement("video")}} worden soms <strong>vervangen elementen</strong> genoemd (‘replaced elements’ in het Engels), omdat de inhoud en grootte van het element worden gedefinieerd door een externe bron (zoals een afbeelding of een videobestand), niet door de inhoud van het element zelf. </p> +</div> + +<div class="note"> +<p><strong>Noot</strong>: u kunt het voltooide voorbeeld van deze sectie op <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> vinden (en bekijk ook de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">broncode</a>.)</p> +</div> + +<h3 id="Alternatieve_tekst">Alternatieve tekst</h3> + +<p>Het volgende attribuut dat we gaan bekijken heet <code>alt</code>. De waarde ervan moet uit een beschrijving van de afbeelding bestaan die we kunnen gebruiken in situaties waarin de afbeelding niet kan worden gezien of weergegeven. De code hierboven bijvoorbeeld kan op de volgende manier worden gewijzigd:</p> + +<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg" + alt="Het hoofd en de romp van het skelet van een dinosaurus; + het heeft een groot hoofd en lange scherpe tanden"></pre> + +<p>De makkelijkste manier om uw <code>alt</code>-tekst te testen is opzettelijk de bestandsnaam verkeerd spellen. Als bijvoorbeeld voor ons voorbeeld de naam <code>dinosooooorus.jpg</code> werd gebruikt, zou de browser in plaats van de afbeelding de alt-tekst weergeven:</p> + +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>Waarom zou u de alt-tekst ooit zien of nodig hebben? Wel, het kan om een aantal goede redenen handig zijn:</p> + +<ul> + <li>De gebruiker is visueel beperkt en gebruikt een <a href="https://en.wikipedia.org/wiki/Screen_reader">schermlezer</a> om het web aan hem of haar te laten voorlezen. In feite is de alt-tekst die afbeeldingen kan beschrijven voor de meeste gebruikers nuttig.</li> + <li>Zoals hierboven beschreven, hebt u misschien het pad of de bestandsnaam onjuist gespeld.</li> + <li>De browser ondersteunt het afbeeldingselement niet. Sommige mensen gebruiken nog steeds browsers die alleen tekst ondersteunen, zoals <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, dat als alternatief de alt-tekst van afbeeldingen weergeeft.</li> + <li>U kunt tekst opgeven die zoekmachines kunnen gebruiken. Zoekmachines kunnen bijvoorbeeld alt-tekst gebruiken om aan hun zoekopdrachten te koppelen.</li> + <li>Er zijn gebruikers die hun afbeeldingen hebben uitgeschakeld om zowel het volume van gegevensoverdracht als afleiding te verminderen. Dat is vooral de gewoonte op mobiele telefoons en in landen waar de bandbreedte beperkt en duur is.</li> +</ul> + +<p>Wat moet er binnen dat<code>alt</code>-attribuut worden beschreven? In de eerste plaats hangt het af van de <em>reden</em> waarom de afbeelding er is. Met andere woorden, wat u verliest als de afbeelding niet verschijnt:</p> + +<ul> + <li><strong>Decoratie. </strong>Als de afbeelding alleen decoratie is en geen deel uitmaakt van de inhoud, voeg dan een lege <code>alt=""</code> toe. Een schermlezer verspilt bijvoorbeeld geen tijd aan het voorlezen van inhoud die de lezer niet echt nodig heeft. Decoratieve afbeeldingen horen niet echt in uw HTML thuis. {{anch("CSS background images")}} zouden voor het invoegen van decoratie moeten worden gebruikt, maar als het onvermijdelijk is, gebruik dan <code>alt=""</code> .</li> + <li><strong>Inhoud. </strong>Als uw afbeelding belangrijke informatie bevat, verschaf dan dezelfde informatie in een <em>korte </em><code>alt</code>-tekst. Of nog beter, in de gewone tekst op uw webpagina die iedereen kan zien. Schrijf geen overbodige <code>alt</code>-tekst. Hoe vervelend is het niet als u goed kunt zien en alle alinea’s zijn twee keer geschreven? Als de afbeelding voldoende in de tekst van uw webpagina wordt beschreven, kunt u gewoon <code>alt=""</code>gebruiken.</li> + <li><strong>Koppeling.</strong> Als u een afbeelding tussen {{htmlelement("a")}}-labels zet om er een koppeling van te maken, moet u toch nog <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">toegankelijke koppelingstekst</a> toevoegen. In zo'n geval kunt u die of in hetzelfde <code><a></code>-element schrijven, of in het <code>alt</code>-attribuut van de afbeelding. Kies wat voor u het beste werkt.</li> + <li><strong>Tekst.</strong> Plaats liever geen tekst in afbeeldingen. Als u bijvoorbeeld uw belangrijkste titel van een slagschaduw wilt voorzien, gebruik er dan <a href="/nl/docs/Web/CSS/text-shadow">CSS</a> voor in plaats van de tekst in een afbeelding te plaatsen. <em>Als u dit echt niet kunt vermijden</em>, zorg dan voor een tekst in het <code>alt</code>-attribuut.</li> +</ul> + +<p>In essentie gaat het erom een gebruiksvriendelijke ervaring te bieden, zelfs als de gebruiker de afbeeldingen niet kan zien. Dit zorgt ervoor dat de volledige inhoud voor alle gebruikers toegankelijk is. Probeer een keer alle afbeeldingen in uw browser te blokkeren en kijk dan hoe de webpagina eruitziet. U zult snel beseffen hoe nutteloos een alt-tekst zoals ‘logo’ of ‘mijn favoriete plek’ is als u de afbeeldingen niet kunt zien.</p> + +<div class="note"> +<p><strong>Noot</strong>: meer informatie vindt u in onze gids voor <a href="/nl/docs/Learn/Accessibility/HTML#Tekstalternatieven">Tekstalternatieven</a>.</p> +</div> + +<h3 id="Breedte_en_hoogte">Breedte en hoogte</h3> + +<p>U kunt de attributen <code>width</code> (breedte) en <code>height</code> (hoogte) gebruiken om de breedte en de hoogte van uw afbeelding te bepalen. Er zijn meerdere manieren om erachter te komen wat de breedte en de hoogte van uw afbeelding zijn. Op een Mac bijvoorbeeld kunt u <kbd>Cmd</kbd> + <kbd>I</kbd> gebruiken om de informatie over het afbeeldingsbestand weer te geven. Met ons voorbeeld kunnen we dit doen:</p> + +<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg" + alt="Het hoofd en de romp van een dinosaursskelet; + het heeft een groot hoofd met lange scherpe tanden" + width="400" + height="341"></pre> + +<p>Onder normale omstandigheden zal dit de weergave van de afbeelding niet veel beïnvloeden, maar als de afbeelding niet wordt weergegeven, verandert dat. Als de gebruiker bijvoorbeeld net naar de pagina is gegaan en de afbeelding nog niet is geladen, zult u merken dat de browser ruimte vrijlaat waarin de afbeelding kan verschijnen:</p> + +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>Dit is een goede praktijk; de pagina laadt sneller en soepeler.</p> + +<p>U kunt de grootte van uw afbeeldingen echter beter niet met HTML-attributen aanpassen. Als u de afbeeldingsgrootte te groot instelt, leidt dit tot afbeeldingen die er korrelig, wazig of te klein uitzien, en verspilt u bandbreedte aan het laden van een afbeelding die niet aan de behoeften van de gebruiker voldoet. De afbeelding kan er ook vervormd uitzien als u de juiste <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">hoogte-breedteverhouding</a> niet respecteert. Het beste kunt u een afbeeldingseditor gebruiken om uw afbeelding de juiste grootte te geven voordat u deze op een webpagina plaatst.</p> + +<div class="note"> +<p><strong>Noot</strong>: als het niet nodig is om de grootte van een afbeelding aan te passen, kunt u beter <a href="/nl/docs/Learn/CSS">CSS</a> gebruiken.</p> +</div> + +<h3 id="Afbeeldingstitels">Afbeeldingstitels</h3> + +<p>Net zoals <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">bij koppelingen</a> kunt u <code>title</code>-attributen aan uw afbeeldingen toevoegen om wanneer nodig extra informatie te verschaffen. In ons voorbeeld zouden we dit kunnen doen:</p> + +<pre class="brush: html"><img src="afbeeldingen/dinosaur.jpg" + alt="Het hoofd en de romp van een dinosaurusskelet; + het heeft een groot hoofd met lange scherpe tanden" + width="400" + height="341" + title="Een T-Rex die is tentoongesteld in het Manchester University Museum"></pre> + +<p>Dit geeft ons een tooltip, net zoals bij koppelingstitels:</p> + +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>Afbeeldingstitels zijn niet onontbeerlijk. Het is vaak beter om dit soort informatie aan de hoofdtekst van het artikel toe te voegen dan deze vast te maken aan de afbeelding. Er zijn echter omstandigheden waarin ze toch nuttig zijn; in een afbeeldingengalerij bijvoorbeeld hebt u geen plaats voor bijschrijften.</p> + +<h3 id="Actief_leren_een_afbeelding_inbedden">Actief leren: een afbeelding inbedden</h3> + +<p>Nu is het aan u! In deze sectie voor actief leren gaat u aan de slag met een eenvoudige oefening. U begint met een eenvoudig {{htmlelement("img")}}-label. We willen dat u de afbeelding inbedt die zich op de volgende URL bevindt:</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>Eerder in de tekst werd gezegd dat u nooit naar afbeeldingen op andere servers mag hotlinken, maar dit is gewoon voor leerdoeleinden, dus voor deze ene keer is het oké.</p> + +<p>We willen ook dat u:</p> + +<ul> + <li>Een alt-tekst toevoegt. Controleer ook dat hij werkt door de URL van de afbeelding onjuist te spellen.</li> + <li>Stel de juiste <code>width</code> en <code>height</code> van de afbeelding in (hint, deze is 200px breed en 171px hoog) en experimenteer met andere waarden om te zien wat het effect is.</li> + <li>Geef de afbeelding ook een <code>title</code>.</li> +</ul> + +<p>Als u een fout maakt, kunt u die altijd ongedaan maken via de knop <em>Terugzetten</em>. Als u echt vastloopt, klik dan op <em>Oplossing tonen</em> om een antwoord te zien:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input"> +<img></textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Terugzetten" /> + <input id="solution" type="button" value="Oplossing tonen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Bijschriften_aan_afbeeldingen_toevoegen_met_figures_en_figure_captions">Bijschriften aan afbeeldingen toevoegen met figures en figure captions</h2> + +<p>Er bestaat een aantal manieren om een bijschrift aan uw afbeelding toe te voegen. Er is bijvoorbeeld niets dat u tegenhoudt om het volgende te doen:</p> + +<pre class="brush: html"><div class="figure">: + <img src="afbeeldingen/dinosaurus.jpg" + alt="Het hoofd en de romp van een dinosaurusskelet; + het heeft een groot hoofd met lange scherpe tanden" + width="400" + height="341"> + + <p>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</p> +</div></pre> + +<p>Dit is in orde. Het bevat de inhoud die u nodig hebt en u kunt het mooi stijlen met CSS. Maar er een probleem: er is niets dat de afbeelding semantisch met het bijschrift verbindt, wat problemen voor schermlezers kan veroorzaken. Als u bijvoorbeeld 50 afbeeldingen en bijschriften hebt, welk bijschrift hoort dan bij welke afbeelding?</p> + +<p>Er is een betere oplossing: u kunt de HTML5-elementen {{htmlelement("figure")}} en {{htmlelement("figcaption")}} gebruiken. Deze zijn voor dit specifieke doel gemaakt: om een semantische container voor figuren te verschaffen en de figuur duidelijk met het bijschrift te verbinden. Ons voorbeeld hierboven kan op de volgende wijze worden herschreven:</p> + +<pre><figure> + <img src="afbeeldingen/dinosaurus.jpg" + alt="Het hoofd en de romp van een dinosaurusskelet; + het heeft een groot hoofd met lange scherpe tanden" + width="400" + height="341"> + + <figcaption>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</figcaption> +</figure></pre> + +<p>Het {{htmlelement("figcaption")}}-element vertelt browsers en ondersteunende technologie dat het bijschrift de andere inhoud van het {{htmlelement("figure")}}-element beschrijft.</p> + +<div class="note"> +<p><strong>Noot</strong>: vanuit het oogpunt van toegankelijkheid hebben bijschriften en {{htmlattrxref('alt','img')}}-tekst verschillende rollen. Bijschriften zijn ook nuttig voor mensen die de afbeelding kunnen zien, terwijl {{htmlattrxref('alt','img')}}-tekst dezelfde functionaliteit biedt als een ontbrekende afbeelding. Daarom zouden bijschriften en <code>alt</code> tekst niet hetzelfde moeten zeggen, omdat ze allebei verschijnen als de afbeelding afwezig is. Probeer de afbeeldingen in uw browser uit te schakelen en kijk hoe alles eruitziet.</p> +</div> + +<p>Een figuur hoeft geen afbeelding te zijn. Het kan een onafhankelijke inhoud zijn die:</p> + +<ul> + <li>Uw betekenis op een compacte makkelijk te begrijpen manier uitdrukt</li> + <li>Op verschillende plaatsen in de lineaire stroming van de pagina kan worden geplaatst</li> + <li>Essentiële informatie verschaft die de hoofdinhoud ondersteunt</li> +</ul> + +<p>Een figuur kan uit verschillende afbeeldingen bestaan, een codfragment, audio, video, vergelijkingen, een tabel, of iets anders.</p> + +<h3 id="Actief_leren_een_figuur_maken">Actief leren: een figuur maken</h3> + +<p>In deze sectie voor actief leren willen we dat u de voltooide code van de vorige oefening neemt en die in een figuur verandert:</p> + +<ul> + <li>Neem het op in een {{htmlelement("figure")}}-element.</li> + <li>Kopieer de tekst uit het <code>title</code>-attribuut, verwijder het <code>title</code>-attribuut en plaats de tekst in een {{htmlelement("figcaption")}}-element onder de afbeelding.</li> +</ul> + +<p>Als u een fout maakt, kunt u die altijd ongedaan maken via de knop <em>Terugzetten</em>. Als u echt vastloopt, klik dan op <em>Oplossing tonen</em> om een antwoord te zien:</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Invoer</h2> +<textarea id="code" class="input"> +</textarea> +<h2>Uitvoer</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Terugzetten" /> + <input id="solution" type="button" value="Oplossing tonen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="CSS-achtergrondafbeeldingen">CSS-achtergrondafbeeldingen</h2> + +<p>U kunt ook CSS gebruiken om afeeldingen in webpagina’s in te bedden (en JavaScript, maar dat is een heel ander verhaal). De CSS-eigenschap {{cssxref("background-image")}} en de andere <code>background-*</code>-eigenschappen worden gebruikt om het plaatsen van achtergrondafbeeldingen te beheren. Om bijvoorbeeld een achtergrondafbeelding in alle alinea’s in een pagina te plaatsen, zou u dit kunnen doen:</p> + +<pre class="brush: css">p { + background-image: url("afbeeldingen/dinosaurus.jpg"); +},</pre> + +<p>Het resultaat is een ingebedde afbeelding die makkelijker kan worden gepositioneerd en beheerd dan HTML-afbeeldingen. Dus waarom HTML-afbeeldingen gebruiken? Zoals hierboven al aangegeven, zijn CSS-achtergrondafbeeldingen er alleen voor decoratie. Als u gewoon iets wilt toevoegen dat mooi is om het visuele aspect van uw pagina te versterken, is dat prima. Bedenk wel dat zulke afbeeldingen geen enkele semantische betekenis hebben. Ze kunnen geen tekstequivalent bevatten, zijn onzichtbaar voor schermlezers, etc. Daarin blinken HTML-afbeeldingen dan weer uit!</p> + +<p>Samengevat: als een afbeelding betekenisvol is voor de inhoud van uw pagina, moet u een HTML-pagina gebruiken. Als een afbeelding niet meer dan decoratie is, gebruik dan CSS-achtergrondafbeeldingen.</p> + +<div class="note"> +<p><strong>Noot</strong>: u leert nog veel meer over <a href="/nl/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS-achtergrondafbeeldingen</a> in onze sectie <a href="/nl/docs/Learn/CSS">CSS</a>.</p> +</div> + +<p>Voorlopig is dit alles. We hebben afbeeldingen en bijschriften in detail besproken. In het volgende artikel gaan we een tandje bijsteken en bespreken we hoe we HTML kunnen gebruiken om video en audio in pagina’s in te bedden.</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/nl/learn/html/multimedia_inbedden/index.html b/files/nl/learn/html/multimedia_inbedden/index.html new file mode 100644 index 0000000000..bd42da37c8 --- /dev/null +++ b/files/nl/learn/html/multimedia_inbedden/index.html @@ -0,0 +1,53 @@ +--- +title: Multimedia en inbedden +slug: Learn/HTML/Multimedia_inbedden +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">We hebben in deze cursus al heel wat tekst bekeken maar het web zou wel heel vervelend zijn als we enkel tekst zouden gebruiken. We gaan nu bekijken hoe we het web tot leven kunnen brengen met veel interessantere inhoud! In deze module onderzoeken we hoe je HTML kan gebruiken om multimedia in je wepagina's in te bedden. Dit houdt het gebruik van afbeeldingen in en hoe we video, audio en zelfs volledige webpagina's kunnen inbedden.</p> + +<h2 id="Vereisten">Vereisten</h2> + +<p>Voor je met deze module begint, zou je een redelijke basiskennis van HTML moeten hebben, zoals die in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie op HTML</a> is behandeld. Als je deze module niet eerst hebt gelezen en verwerkt (of iets gelijkaardigs) doe dat dan eerst en kom dan terug!</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je op een computer/tablet/ander apparaat werkt en je bent niet in staat om je eigen bestanden te creëren, kan je de (meeste) codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="https://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<p>Deze module bevat een aantal artikelen waarin alle basisprincipes over het inbedden van multimedia worden doorgenomen.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Afbeeldingen in HTML</a></dt> + <dd>Er bestaan ook nog andere soorten multimedia, maar het is logisch om met het nederige {{htmlelement("img")}}-element te beginnen, dat we gebruiken om een eenvoudige afbeelding in een webpagina te plaatsen. In dit artikel gaan we dieper in op het gebruik van dit element. We bespreken de basis, hoe we er verklarende bijschriften (captions in het Engels) aan kunnen toevoegen met het {{htmlelement("figure")}}-element, en hoe het zich verhoudt tot CSS-afbeeldingen voor de achtergrond.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video en audio</a></dt> + <dd>In dit artikel bekijken we hoe de HTML5 {{htmlelement("video")}}- en {{htmlelement("audio")}}-elementen gebruiken om video en audio in onze pagina's in te bedden. We bespreken de basis, hoe we de toegang tot verschillende bestandsformaten op verschillende browsers mogelijk maken, hoe we bijschriften en ondertitels toevoegen en hoe we noodoplossingen voor oudere browsers creëren.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Van <object> tot <iframe> — andere technologiën waarmee we inhoud kunnen inbedden</a></dt> + <dd>Nu gaan we een zijpad inslaan en een aantal elementen bekijken waarmee je een breed gamma van inhouden en bestandstypes in je webpagina's kan inbedden: de {{htmlelement("iframe")}}-, {{htmlelement("embed")}}- en {{htmlelement("object")}}-elementen. <code><iframe></code>s zijn er om andere webpagina's in je pagina in te bedden en met de andere twee kan je PDFs, SVG, en zelfs Flash — een technologie die op zijn retour is, maar die je toch op nog wel eens zal tegenkomen.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vectorafbeeldingen aan het web toevoegen</a></dt> + <dd>Vectorafbeeldingen kunnen in een aantal situaties zeer nuttig zijn. In tegenstelling tot gewone formaten zoals PNG/JPG, zullen ze niet vervormd worden of verpixelen (de afbeelding verandert in een hoop blokjes) als je erop inzoomt. Ze kunnen glad en mooi blijven als ze worden vergroot of verkleind. Dit artikel is een inleiding op wat vectorafbeeldingen zijn en hoe je dit populaire {{glossary("SVG")}}-formaat in je webpagina's kan opnemen.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsieve afbeeldingen</a></dt> + <dd>Met zo veel verschillende soorten apparaten waarmee je vandaaag op het web kan surfen, van mobiele telefoons tot vaste computers — is responsief ontwerp een essentieel concept dat je goed moet begrijpen in de moderne webwereld. Responsief ontwerp verwijst naar de creatie van webpagina's die hun eigenschappen automatisch aanpassen aan de verschillende schermgroottes, resoluties enz. Later gaan we dit in onze CSS-module in veel groter detail bekijken. Nu beperken we ons tot de instrumenten waarover HTML beschikt, waaronder het {{htmlelement("picture")}} element, die we kunnen gebruiken om responsieve afbeeldingen te maken.</dd> +</dl> + +<h2 id="Evaluatie">Evaluatie</h2> + +<p>De volgende evaluaties dienen om je kennis te testen van de HTML-basisprincipes die hierboven werden besproken :</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash pagina</a></dt> + <dd>In deze evaluatie testen we je kennis van een aantal technieken die in de artikelen van deze module werden doorgenomen. Je zal een aantal afbeeldingen en video aan een funky splash page over Mozilla toevoegen!</dd> +</dl> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Een afbeeldingsmap bovenop een afbeelding toevoegen</a></dt> + <dd>Afbeeldingsmappen beschikken over een mechanisme waarmee je verschillende delen van een afbeelding kan verbinden met verschillende plaatsen (zie het als een map die je met extra informatie verbindt over elk land waarop je klikt.) Deze techniek is soms nuttig.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Basis Webvaardigheden 2</a></dt> + <dd> + <p>Dit is een uitstekende cursus van de Mozilla stichting die een aantal van de vaardigheden test en onderzoekt waar we in <em>Multimedia inbedden </em>hebben besproken. Hier kan je dieper ingaan op de basisprincipes waarmee we webpagina's samenstellen, hoe we ze toegankelijk maken voor iedereen, hoe we hulpmiddelen delen, online media gebruiken en en open source projecten werken.</p> + </dd> +</dl> diff --git a/files/nl/learn/html/tables/index.html b/files/nl/learn/html/tables/index.html new file mode 100644 index 0000000000..e508a954b0 --- /dev/null +++ b/files/nl/learn/html/tables/index.html @@ -0,0 +1,42 @@ +--- +title: Tabellen in HTML +slug: Learn/HTML/Tables +tags: + - Artikel + - Beginner + - Gids + - HTML + - Landing + - Module + - Tabellen +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Een standaardtaak in HTML is het structeren data in tabelvorm. HTML heeft een aantal elementen en attributen speciaal voor deze bedoeling. Gecombineerd met een beetje <a href="/nl/docs/Learn/CSS">CSS</a> voor de opmaak, maakt HTML het gemakkelijk om tabellen met informatie weer te geven op het web, zoals een lesplan voor onderwijs, het rooster van het plaatselijke zwembad, of statistieken over uw favoriete dinosauriërs of voetbalteam. Deze module vertelt u alles wat u nodig hebt over het strcuteren van data in tabelvorm door middel van HTML.</p> + +<h2 id="Randvoorwaarden">Randvoorwaarden</h2> + +<p>Voordat u begint met deze module hebt u basiskennis nodig van HTML — zie <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a>.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Als u werkt op een computer/tablet/ander apparaat waar u niet uw eigen bestanden kunt aanmaken, kunt u de (meeste) codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<p>Deze module bevat de volgende artikelen:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">De basis van tabellen in HTML</a></dt> + <dd>Dit artikel helpt u te beginnen met HTML-tabellen. Het dekt de basisbeginselen zoals rijen en cellen, headings, hoe u kunt zorgen dat cellen zich verspreiden over meerdere kolommen en rijen, en hoe u alle cellen kunt groeperen in een kolom voor de opmaak.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Geavanceerde functies en toegankelijkheid in HTML-tabellen</a></dt> + <dd>In het tweede artikel van deze module kijken we samen naar de meer geavanceerde functies van HTML-tabellen, zoals onderschriften/samenvattingen, het groeperen van rijen in head-, body- en footersecties, en we kijken naar de toegankelijkheid van tabellen voor slechtziende gebruikers.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Data van planeten structureren</a></dt> + <dd>In ons assessment over tabellen geven we u wat data over de planeten in ons zonnestelsel, die u kunt structureren in een HTML-tabel.</dd> +</dl> diff --git a/files/nl/learn/index.html b/files/nl/learn/index.html new file mode 100644 index 0000000000..b64f56b730 --- /dev/null +++ b/files/nl/learn/index.html @@ -0,0 +1,91 @@ +--- +title: Webontwikkeling leren +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - Web +translation_of: Learn +--- +<div class="summary"> +<p>Wil je jouw eigen websites en webtoepassingen maken? Dan ben je op de juiste plaats!</p> +</div> + +<p>Er is veel te leren over webdesign en -ontwikkeling, maar geen zorgen. We zijn er om je te helpen, of je nu maar pas code leert kennen of een volleerde professionele ontwikkelaar aan het worden bent.</p> + +<p>{{LearnBox({"title":"Snel leren: Woordenschat"})}}</p> + +<h2 id="Waar_starten">Waar starten</h2> + +<p>We willen je tegemoetkomen waar je staat. Welke beschrijving past best bij jou?</p> + +<ul class="card-grid"> + <li><span>Ik ben een beginner</span> + + <p>Welkom! De beste plaats om te starten is onze reeks <a href="/en-US/Learn/Getting_started_with_the_web">"Van start met het Web"</a>. Het leert je alle basiskennis om je op weg te zetten voor webontwikkeling.</p> + </li> + <li><span>Ik ken webtechnologie</span> + <p>Heel goed! In dat geval stellen we voor dat je wat dieper graaft in de technologie die aan de basis ligt van het Web: <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, en <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> + </li> + <li><span>Ik beheers webtechnologie</span> + <p>Fantastisch! In dat geval ben je misschien geïnteresseerd in het ontdekken van onze geavanceerde <a href="/en-US/docs/Web/Guide">Gidsen</a> en <a href="/en-US/docs/Web/Tutorials">Handleidingen</a>. Je zou ook kunnen <a href="/en-US/Learn/How_to_contribute"> bijdragen aan de Leerzone</a>. ;)</p> + </li> +</ul> + +<div class="note"> +<p><strong>Noot</strong>: In de toekomst plannen we om meer leerpaden te publiceren, bijvoorbeeld voor ervaren programmeurs die specifieke geavanceerde technieken leren, specifieke platformontwikkelaars die niet bekend zijn met het Web, of mensen die designtechnieken willen leren.</p> +</div> + +<h2 id="Leren_met_andere_mensen">Leren met andere mensen</h2> + +<p>Als je een vraag hebt, of je nog niet goed weet waar naartoe, Mozilla is een wereldwijde gemeenschap van webenthousiastelingen, met mentors en leraars die blij zijn je te kunnen helpen. Maak contact via WebMaker:</p> + +<ul> + <li>Ontmoet en spreek met mentors en leraars op het <a href="http://discourse.webmaker.org/" rel="external">discourse forum</a>.</li> + <li><a href="https://events.webmaker.org/">Vind evenementen</a> en leer het web met geweldige mensen.</li> +</ul> + +<h2 id="Kennis_delen">Kennis delen</h2> + +<p>Deze hele Leerzone is gebouwd door onze bijdragers. We hebben je nodig in ons team, of je nu een beginner, een leerkracht of een ervaren webontwikkelaar bent. Als je geïnteresseerd bent, kijk dan eens <a href="/en-US/Learn/How_to_contribute">hoe je kan helpen</a>, en we moedigen je aan om met ons te praten in onze <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailinglijsten</a> of <a href="/en-US/docs/MDN/Community#Get_into_IRC">het IRC kanaal</a>. :)</p> + +<h2 id="Subnavigatie">Subnavigatie</h2> + +<ol> + <li><a href="/en-US/Learn/Getting_started_with_the_web">Van start met het web</a></li> + <li><a href="/en-US/Learn/Skills">Leren over het web</a> + <ol> + <li><a href="https://webmaker.org/en-US/literacy" rel="external">Webgeletterdheidskaart</a></li> + <li><a href="/en-US/Learn/Web_Mechanics">Webmechanismes</a></li> + <li><a href="/en-US/Learn/Infrastructure">Infrastructuur</a></li> + <li><a href="/en-US/Learn/Coding-Scripting">Programmeren & Scripts</a></li> + <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Toegankelijkheid</a></li> + <li><a href="/en-US/Learn/Composing_for_the_web">Schrijven & plannen</a></li> + </ol> + </li> + <li><a href="#">Leer technologieën</a> + <ol> + <li><a href="/en-US/Learn/HTML">HTML</a></li> + <li><a href="/en-US/Learn/CSS">CSS</a></li> + <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> + <li><a href="/en-US/Learn/Python">Python</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/tutorial">Leerhandleidingen</a> + <ol> + <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">Hoe maak je een website?</a></li> + </ol> + </li> + <li><a href="http://weblitmapper.webmakerprototypes.org/">Leerhulpmiddelen</a></li> + <li><a href="/en-US/Learn/help">Hulp krijgen</a> + <ol> + <li><a href="/en-US/Learn/FAQ">Veelgestelde vragen</a></li> + <li><a href="/en-US/docs/Glossary">Woordenlijst</a></li> + <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Stel jouw vragen</a></li> + <li><a href="https://events.webmaker.org/" rel="external">Ontmoet leraars en mentors</a></li> + </ol> + </li> + <li><a href="/en-US/Learn/How_to_contribute">Hoe bijdragen</a></li> +</ol> diff --git a/files/nl/learn/javascript/client-side_web_apis/index.html b/files/nl/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..1dcb05cc57 --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,55 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Articles + - Beginner + - CodingScripting + - DOM + - Graphics + - JavaScript + - Landing + - Learn + - Media + - Module + - NeedsTranslation + - TopicStub + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Those modules involve quite a lot of simple API usage anyway, as it is difficult to write client-side JavaScript examples that do anything useful without them! Here we go up a level, assuming knowledge of the core JavaScript language and exploring common Web APIs in a bit more detail.</p> + +<p>Basic knowledge of <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a> would also be useful.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt> + <dd>First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt> + <dd>When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt> + <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behaviour of sites, so in this article we''ll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> + <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs, and shows some typical uses of the latter.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> + <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to canvas, and further resources to allow you to learn more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> + <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> + <dt>Device APIs</dt> + <dd>Modern web-browsing devices have many features that are useful for web apps to take advantage of, for example accessing the device's location data so you plot your position on a map, or telling the user that a useful update is available via system notifications or vibration hardware. This article looks at what is available, and goes through a few common use cases.</dd> + <dt>Client-side storage APIs</dt> + <dd>Most modern web browsers come with the ability to store structured data on the client-side, which is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. This article looks at the available options.</dd> +</dl> diff --git a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html b/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html new file mode 100644 index 0000000000..61f3e48bcf --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html @@ -0,0 +1,305 @@ +--- +title: Documenten manipuleren +slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Als je een webpagina of app ontwerpt, zal je regelmatig de documentstructuur van je site willen manipuleren. Het zal een van je meest voorkomende taken zijn. Meestal doen we dit met het Document Object Model (DOM). Het DOM is een reeks APIs waarmee we de HTML van onze pagina kunnen controleren en de informatie erin opmaken met allerlei stijlelementen. Het DOM maakt vooral gebruik van het {{domxref("Document")}} object. In dit artikel leren we hoe we hoe we het DOM kunnen gebruiken en we bekijken een aantal interessante APIs waarmee we onze webomgeving op een interessante manier kunnen veranderen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereiste kennis:</th> + <td>Basiskennis van een computer, basisbegrippen van HTML, CSS en Javascript, inclusief Javascript objecten.</td> + </tr> + <tr> + <th scope="row">Doelstelling:</th> + <td> + <p>Vertrouwd worden met de kern APIs van het DOM en met de andere APIs die meestal met het DOM en documentmanipulatie worden geassociëerd.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="De_belangrijke_onderdelen_van_een_webbrowser">De belangrijke onderdelen van een webbrowser </h2> + +<p>Web browsers bestaan uit zeer complexe software met vele bewegende onderdelen erin. Veel van die delen kunnen niet worden gecontrolleerd of gemanipuleerd door een webontwikkelaar die Javascript gebruikt. Je zou kunnen veronderstellen dat dat slecht is, maar er zijn goede redenen voor het vergrendelen van browsers. De meeste ervan draaien rond veiligheid. Beeld je je een website in die zomaar toegang zou kunnen hebben tot je opgeslagen paswoorden of andere gevoelige informatie en zou kunnen inloggen op websites alsof hij jou was? </p> + +<p>Ondanks de beperkingen geven Web APIs ons toegang tot heel wat functionaliteit die ons in staat stelt vele dingen te doen met webpagina's. Er zijn een aantal evidente onderdelen waar je regelmatig naar zult verwijzen in je code. In het volgende diagram vind je de belangrijkste onderdelen van een webbrowser die betrokken zijn bij de weergave van een webpagina :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Het venster (of window) is de tabpagina van je webbrowser waarin je webpagina is geladen; deze wordt in Javascript voorgesteld door het {{domxref("Window")}} object. Dit object geeft je toegang tot allerlei methodes die bijvoorbeeld de afmetingen van het venster kunnen weergeven (zie {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}). Je kan het document dat in het venster is geladen, manipuleren. Je kan ook data opslaan die de ingeladen website genereert. Daarvoor kan je een lokale database aan de cliënt-zijde gebruiken maar er bestaan ook andere bergingsmechanismen. Je kan een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">event handler</a> aan het venster vastmaken en nog veel meer.</li> + <li>De navigator vertegenwoordigt de staat en de identiteit van de browser (i.e. de user-agent) zoals die in het web bestaat. In Javascript wordt de navigator voorgesteld door het {{domxref("Navigator")}} object. Je kan dit object gebruiken om allerlei informatie op te halen. Dit kunnen geolocatiegegevens zijn, de voorkeurstaal van de gebruiker, een media stream vanuit de webcam van de gebruiker enz.</li> + <li>Het document (in browsers weergegeven door het DOM) is de eigenlijke pagina die in het venster wordt geladen. We kennen het in Javascript als het {{domxref("Document")}} object. Je kan dit object gebruiken om informatie te verkrijgen over de HTML en CSS waaruit de pagina is opgebouwd en om die informatie te manipuleren. Het beschikt over methodes waarmee je naar een element in het DOM kan verwijzen en de inhoud van dat element veranderen. Je kan er ook een nieuwe stijl op toepassen, nieuwe elementen creëren en die aan het element toevoegen als zijn kinderen. Je kan het element zelfs helemaal verwijderen.</li> +</ul> + +<p>In dit artikel zullen we vooral aandacht besteden aan de manipulatie van het document, maar we zullen ook nog een paar andere nuttige zaken tonen.</p> + +<h2 id="Het_document_object_model">Het document object model</h2> + +<p>Het document dat in een van de browsertabs van je webbrowser is geladen, wordt weergegeven door het document object model. Dit model heeft een boomstructuur en wordt door de browser zelf gecrëerd. Deze voorstellingswijze maakt de HTML zeer toegankelijk voor programmeertalen. De browser zelf gebruikt het DOM om allerlei regels rond vormgeving en andere informatie op de HTML toe te passen terwijl het de pagina weergeeft. Ontwikkelaars zoals jij kunnen Javascriptcode schrijven die het DOM manipuleert nadat de pagina al is opgeladen in de browser.</p> + +<p>We hebben een eenvoudig voorbeeld gemaakt op <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">bekijk het ook live</a>). Probeer dit voorbeeld in je browser te openen. Het is een zeer simpele pagina die een{{htmlelement("section")}} element bevat waarin je een afbeelding en paragraaf kan vinden. In de paragraaf zit ook nog een link. De html-broncode ziet er zo uit :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html></pre> + +<p>Het DOM daarentegen ziet er zo uit:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Opmerking</strong>: Dit DOM boomdiagram werd gegenereerd met Ian Hickson's <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a>.</p> +</div> + +<p>Zoals je kan zien krijgen elk element en elk stukje tekst in het document een plek in de boomstructuur. Zo’n plek noemen we een knooppunt (in het Engels een node). Je zal ook verschillende termen tegenkomen die worden gebruikt om te beschrijven met welk type knooppunt we te maken hebben en termen die hun posititie in de boom en hun relatie met elkaar beschrijven.</p> + +<p>Je zal merken dat ik zowel Engelse als Nederlandse termen gebruik. Een vertaling kan zeer verhelderend zijn maar een woord als "afstammelingsknooppunt" vind ik veel te lang om nog werkbaar te zijn en als je het googelt, heb je nul resulaten. Ik eet dus een beetje van twee walletjes.</p> + +<ul> + <li><strong>Element node</strong> (elementknooppunt): Een element zoals het in het DOM bestaat.</li> + <li><strong>Root node</strong> (bronknooppunt): Het knooppunt dat bovenaan in de boom zit. Als het over HTML gaat, is dit altijd het <code>HTML</code>-knooppunt. (Andere opmaaktalen zoals SVG en custom XML zullen andere root nodes hebben.)</li> + <li><strong>Child node</strong> (kindknooppunt): Een knooppunt dat in een andere knooppunt is genest en er <em>direct</em> onder zit. <code>IMG</code> is bijvoorbeeld een kind van <code>SECTION</code> in het voorbeeld hierboven.</li> + <li><strong>Descendant node</strong> (afstammelingsknooppunt): Een knooppunt dat <em>ergens</em> in een andere node zit. <code>IMG</code> is bijvoorbeeld geen kind van <code>BODY</code> omdat het twee niveaus lager in de boom zit, maar het is wel een nakomeling van <code>BODY</code>.</li> + <li><strong>Parent node</strong> (ouderknooppunt): een knooppunt dat een ander knooppunt bevat. <code>BODY</code> is bijvoorbeeld het ouderknoopunt van <code>SECTION</code> in het voorbeeld hierboven.</li> + <li><strong>Sibling nodes</strong> (broerknooppunten): Knooppunten die zich op hetzelfde niveau in de DOM-boom bevinden. <code>IMG</code> en <code>P</code> zijn bijvoorbeeld elkaars broers in het voorbeeld hierboven.</li> + <li><strong>Text node</strong> (tekstknooppunt): Een knooppunt dat een tekst bevat (i.e. een string).</li> +</ul> + +<p>Het is nuttig om je deze terminologie eigen te maken vooraleer je met het DOM begint te werken omdat een aantal andere termen die je zult tegenkomen op vergelijkbare wijze zijn opgebouwd. Je bent ze misschien zelf al tegengekomen als je CSS hebt geleerd (bijv. descendant selector, child selector).</p> + +<h2 id="Actief_Leren_Eenvoudige_DOM-Manipulatie">Actief Leren: Eenvoudige DOM-Manipulatie</h2> + +<p>Onze eerste les over DOM-manipulatie beginnen we met een praktisch voorbeeld.</p> + +<ol> + <li>Maak een lokale kopie van de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html pagina</a> en het <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">beeld</a> dat erbij hoort.</li> + <li>Voeg net onder <code></body></code> een <code><script></script></code> element toe. (Let op, dus onder de tweede tag die het body-element afsluit!).</li> + <li>Om een element in het DOM te manipuleren, moet je het eerst selecteren en een verwijzing ernaar opslaan in een variabele. Om dat te doen, voeg je de volgende regel aan je script toe: + <pre class="brush: js">var link = document.querySelector('a');</pre> + </li> + <li>Nu we een verwijzing naar het element hebben opgeslagen in een variabele, kunnen we beginnen met een aantal eigenschappen en methodes die beschikbaar zijn gemaakt voor de manipulatie van het DOM. (Deze worden gedefiniëerd in interfaces zoals het {{domxref("HTMLAnchorElement")}} voor een {{htmlelement("a")}} element, zijn algemenere ouder-interface, het {{domxref("HTMLElement")}}, en {{domxref("Node")}} die alle knooppunten in het DOM vertegenwoordigt. Laat ons eerst en vooral de tekst in de hyperlink veranderen door de waarde van de {{domxref("Node.textContent")}}aan te passen. Voeg de volgende regel toe aan de vorige: + <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> + </li> + <li>We moeten ook de URL veranderen waar de hyperlink naar verwijst zodat die ons niet naar de verkeerde pagina brengt als we erop klikken. Voeg daarvoor de volgende regel toe: : + <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> + </li> +</ol> + +<div> +<p>Opmerking : Zoals met zoveel in Javascript, zijn er vele manieren om een element te selecteren en om een verwijzing ernaar op te slaan in een variable. {{domxref("Document.querySelector()")}} is de aanbevolen moderne manier. Dat komt goed uit want deze methode laat je elementen selecteren met CSS-selectoren. De regel hierboven komt overeen met het eerste {{htmlelement("a")}} element dat in het document opduikt. Als je meer dan één element wil manipuleren, kan je {{domxref("Document.querySelectorAll()")}} gebruiken. Deze methode selecteert elk element in het document dat overeenkomt met de selector en slaat die op in een array.</p> + +<p>Er zijn ook oudere methodes beschikbaar om verwijzingen naar een element te grijpen, zoals:</p> + +<ul> + <li>{{domxref("Document.getElementById()")}}: selecteert een element via de waarde van het id-attribuut, bijvoorbeeld : <code><p id="myId">My paragraph</p></code>. Het ID wordt als parameter aan de functie doorgeven, <code>i.e.var elementRef = document.getElementById('myId')</code>.</li> + <li>{{domxref("Document.getElementsByTagName()")}}: brengt een array op die alle elementen van het gevraagde type bevat die zich in de pagina bevinden, bijvoorbeeld <code><p></code>s, <code><a></code>s, enz. Het type wordt ook als een parameter aan de functie doorgegeven, i.e. <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> +</ul> + +<p>Deze twee methoden werken in oudere browsers die moderne methoden zoals <code>querySelector()</code> niet zullen begrijpen maar ze zijn niet zo praktisch. Kijk maar eens rond en zie welke anderen je nog kan vinden.</p> +</div> + +<h3 id="Nieuwe_Knooppunten_(Nodes)_Creëren_en_Plaatsen">Nieuwe Knooppunten (Nodes) Creëren en Plaatsen</h3> + +<p>Hierboven heb je eens kunnen proeven van wat je kan doen, maar laat ons nu verder gaan en kijken hoe we nieuwe elementen kunnen creëren.</p> + +<ol> + <li>We gebruiken opnieuw ons laatste voorbeeld en maken een referentie naar ons {{htmlelement("section")}} element. Daarvoor voegen we de volgende code toe onderaan het script waar we mee bezig waren (doe ook hetzelfde met de volgende regels): + <pre class="brush: js">var sect = document.querySelector('section');</pre> + </li> + <li>Nu gaan we een nieuwe paragraaf creëren met {{domxref("Document.createElement()")}} en we gaan er wat tekst in steken op dezelfde manier die we ervoor hebben gebruikt: + <pre class="brush: js">var para = document.createElement('p'); +para.textContent = 'We hope you enjoyed the ride.';</pre> + </li> + <li>Nu kan je de nieuwe paragraaf aan het einde van de sectie vastmaken met {{domxref("Node.appendChild()")}}: + <pre class="brush: js">sect.appendChild(para);</pre> + </li> + <li>Als laatste stap van dit gedeelte, voegen we een tekstknooppunt aan de paragraaf toe waar de hyperlink in zit. Daarvoor creëren we eerst de textnode met {{domxref("Document.createTextNode()")}}: + <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + </li> + <li>Nu grijpen we een referentie naar de paragraaf waar de hyperlink in zit en maken het tekstknooppunt eraan vast : + <pre class="brush: js">var linkPara = document.querySelector('p'); +linkPara.appendChild(text);</pre> + </li> +</ol> + +<p>Dat is het meeste van wat je nodig hebt om knooppunten aan het DOM toe te voegen. Je zal deze methoden vaak gebruiken als je dynamische interfaces maakt (we zullen later een paar voorbeelden bekijken.</p> + +<h3 id="Elementen_Verplaatsen_en_Verwijderen">Elementen Verplaatsen en Verwijderen</h3> + +<p>Het zal regelmatig nodig zijn om knooppunten te verplaatsen of zelfs helemaal uit het DOM te verwijderen. En dat is natuurlijk mogelijk.</p> + +<p>Stel dat we de paragraaf met de hyperlink naar het einde van de sectie willen verplaatsen, dan doen we gewoon dit:</p> + +<pre class="brush: js">sect.appendChild(linkPara);</pre> + +<p>Dit verplaatst de paragraaf naar het einde van het <section> element. Je zou denken dat het een tweede kopie van de paragraaf zou maken, maar dat is niet het geval. linkPara is een referentie naar de enige kopie van die paragraaf. Als je een kopie zou willen maken en die ook nog toevoegen, zou je in de plaats daarvan {{domxref("Node.cloneNode()")}} moeten gebruiken.</p> + +<p>Een knooppunt is ook heel makkelijk te verwijderen, ten minste als je een verwijzing naar het knooppunt en zijn ouder hebt. In ons voorbeeld kunnen we gewoon {{domxref("Node.removeChild()")}} gebruiken:</p> + +<pre>sect.removeChild(linkPara);</pre> + +<p>Het wordt iets complexer als je een knooppunt wil verwijderen dat is gebaseerd op een verwijzing naar zichzelf, wat vrij vaak voorkomt. Er bestaat geen methode die een knooppunt vertelt zichzelf te verwijderen en dus moet je het volgende doen:</p> + +<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> + +<p>Probeer nu deze regels uit in je de code van het voorbeeld en bekijk het resultaat.</p> + +<h3 id="Stijl_Manipuleren">Stijl Manipuleren</h3> + +<p>Het is mogelijk om de CSS van je webpagina op verschillende manieren te manipuleren met Javascript.</p> + +<p>Om te beginnen kan je met {{domxref("Document.stylesheets")}} een lijst opvragen van alle stijlbladen die aan je document vasthangen. Deze methode brengt ons een array van {{domxref("CSSStyleSheet")}} objecten op. Je kan dan naar wens stijlelementen toevoegen en verwijderen. We gaan echter niet dieper in op deze methodes omdat ze een beetje archaïsch zijn en nogal lastig in het gebruik. Er bestaan veel gemakkelijker methoden.</p> + +<p>De eerste manier is om inline-stijlen onmiddellijk aan de elementen toe te voegen die je dynamisch wil vormgeven. Dit wordt met {{domxref("HTMLElement.style")}} gedaan, die inline stijlinformatie over elk element in het document bevat. Je kan de eigenschappen van dit object bepalen en zo direct de stijl van je elementen bijwerken.</p> + +<ol> + <li>Voeg de volgende regels toe aan het voorbeeld waar we mee bezig zijn: + <pre class="brush: js">para.style.color = 'white'; +para.style.backgroundColor = 'black'; +para.style.padding = '10px'; +para.style.width = '250px'; +para.style.textAlign = 'center';</pre> + </li> + <li>Vernieuw de pagina en je zal zien dat de verschillende stijlen zijn toegepast op de paragraaf. Als je de paragraaf in je browser's <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector</a> bekijkt, zal je zien dat deze stijlregels inderdaad inline in je document worden toegevoegd: + <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + </li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Let op hoe de Javascript versie van CSS-eigenschapen in lower camel case (*) wordt geschreven terwijl de CSS-versies een koppelteken krijgen (bijv. <code>backgroundColor</code> versus <code>background-color</code>). Let erop deze niet met elkaar te verwarren, anders zullen ze niet werken.<br> + (*) De woorden worden aan elkaar geschreven en vanaf het tweede woord begint elk woord met een hoofdletter.</p> +</div> + +<p>Er is nog een algemeen aanvaarde manier om je stijlen dynamisch in je document te manipuleren en die gaan we nu bekijken:</p> + +<ol> + <li>Verwijder de vorige vijf regels die je aan je JavaScript hebt toegevoegd.</li> + <li>Voeg de volgende regels toe aan je HTML {{htmlelement("head")}}: + <pre><style> +.highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; +} +</style></pre> + </li> + <li>Nu gaan we een zeer nuttig methode gebruiken voor algemene HTML-manipulatie : {{domxref("Element.setAttribute()")}}. Deze methode krijgt twee argumenten: het attribuut dat je aan het element wil vasthangen en de waarde die je het attribuut wenst te geven. In dit geval geven we onze paragraaf een klasse die de waarde ‘highlight’ krijgt. + <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> + </li> + <li>Vernieuw je pagina en je zult geen verandering zien; de CSS wordt nog steeds op de paragraaf toegepast. Deze keer gebeurt dat echter omdat we de paragraaf een klasse geven die wordt geselecteerd door onze CSS-regel, niet door het gebruik van een inline CSS-stijl.</li> +</ol> + +<p>Welke methode je kiest hangt van jou af; beide hebben hun voordelen en nadelen. De eerste methode vereist minder gedoe en is goed voor eenvoudig gebruik. De tweede is meer voor de puristen onder ons. (CSS en Javascript worden niet met elkaar vermengd want er zijn geen inline-regels. Inline-stijl wordt als een slechte gewoonte beschouwd). Als je grotere en complexere apps begint te bouwen, zal je waarschijnlijk de tweede methode gaan gebruiken, maar het is echt helemaal jouw beslissing.</p> + +<p>Tot nu toe hebben we nog niet echt iets nuttigs gedaan! Het is zinloos om Javascript te gebruiken voor de creatie van statische inhoud – je kan die toch net zo goed in je HTML schrijven zonder Javascript te gebruiken. Het is ingewikkelder dan HTML en als je de inhoud met Javascript maakt, zijn er ook nog andere problemen mee verbonden (de Javascript-code is bijvoorbeeld onleesbaar voor zoekmachines).</p> + +<p>In de volgende secties zullen we paar praktische manieren zien waarop we DOM APIs kunnen gebruiken.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">afgewerkte versie van het dom-example.html</a> op GitHub vinden. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">bekijk het ook live</a>).</p> +</div> + +<h2 id="Actief_Leren_Nuttige_informatie_uit_het_window_object_halen.">Actief Leren: Nuttige informatie uit het window object halen.</h2> + +<p>Tot nu toe hebben enkel de kenmerken van {{domxref("Node")}} en {{domxref("Document")}} bekeken om documenten te manipuleren, maar er is geen reden waarom je geen data uit andere bronnen zou kunnen halen en die in je UI gebruiken. Denk eens even terug aan onze eenvoudige <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> demo uit het vorige artikel. We hadden locatiedata gevonden en die gebruikt om een map van jouw streek te maken. Je moet er gewoon voor zorgen dat je data het juiste formaat heeft. Javascript maakt het gemakkelijker dan vele andere talen om dat te doen want het gebruikt zwakke types; nummers zullen bijvoorbeeld gemakkelijk in strings kunnen worden omgezet als je ze in je scherm wil afdrukken.</p> + +<p>In dit voorbeeld zullen we een probleem oplossen dat vaak voorkomt : ervoor zorgen dat je applicatie even groot is als het window waarin het wordt bekeken, wat dan ook de grootte van dat venster mag zijn. Dit is vaak nuttig in situaties zoals spelletjes, waarin je zoveel mogelijk gebruik van de schermgrootte wil kunnen maken om het spel erin te spelen.</p> + +<p>Om te beginnen maken we een lokale kopie van twee demo-bestanden: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> en <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Open ze en bekijk ze eens. Je zal zien een {{htmlelement("div")}} element zien dat een klein deel van het scherm beslaat. Op de achtergrond van het scherm wordt een tegel toegepast. Dit gaan we gebruiken om het UI-gebied van onze app weer te geven.</p> + +<ol> + <li>Grijp eerst en vooral een referentie naar de div en dan naar de breedte en hoogte van het viewport (het venster waar we je document in zien zitten). Die sla je op in variabelen. Deze twee waarden worden handig opgeslagen in twee eigenschappen: {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}. Voeg de volgende regels toe aan je {{htmlelement("script")}}: + <pre class="brush: js">var div = document.querySelector('div'); +var WIDTH = window.innerWidth; +var HEIGHT = window.innerHeight;</pre> + </li> + <li>Daarna gaan we de breedte en de hoogte van de div dynamisch aanpassen zodat ze gelijk worden aan die van de viewport. Voeg de volgende lijnen toe aan de vorige: : + <pre class="brush: js">div.style.width = WIDTH + 'px'; +div.style.height = HEIGHT + 'px';</pre> + </li> + <li>Sla alles op en vernieuw je browser. Nu zou de div even groot als je viewport moeten zijn wat ook de afmetingen van je scherm zijn. Als je nu de afmetingen opnieuw probeert te veranderen om je venster groter te maken, zal je zien dat de div dezelfde grootte behoudt. We bepalen de afmetingen slechts eenmaal.</li> + <li>We kunnen ook een gebeurtenis of event gebruiken zodat de afmetingen van de div samen met die van het venster veranderen. Het {{domxref("Window")}} object beschikt over een event dat ‘resize’ heet en dat telkens wordt getriggered als de grootte van het venster wordt gewijzigd. De {{domxref("Window.onresize")}} event handler staat ons toe dit event aan onze code vast te koppelen. Zo wordt die uitgevoerd telkens als de afmetingen van het window veranderen. Voeg de volgende lijnen toe onderaan je code: + <pre class="brush: js">window.onresize = function() { + WIDTH = window.innerWidth; + HEIGHT = window.innerHeight; + div.style.width = WIDTH + 'px'; + div.style.height = HEIGHT + 'px'; +}</pre> + </li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je vastraakt, kan je altijd nog ons <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">voltooide window resize voorbeeld</a> bekijken. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">bekijk het ook live</a>).</p> +</div> + +<h2 id="Actief_Leren_een_dynamische_boodschappenlijst">Actief Leren : een dynamische boodschappenlijst</h2> + +<p>Om het artikel af te ronden, willen we je een kleine uitdaging aanbieden: we willen een eenvoudige boodschappenlijst maken waar je dynamisch artikelen aan kan toevoegen door een invoerveld en een knop te gebruiken. Als je een artikel in het veld invult en op de knop drukt:</p> + +<ul> + <li>Moet het artikel in de lijst verschijnen.</li> + <li>Moet elk artikel een knop krijgen waarop je kan drukken om het artikel van de lijst te verwijderen.</li> + <li>Moet het invoerveld leeg zijn en de focus moet erop liggen, klaar om er een ander artikel in in te vullen.</li> +</ul> + +<p>De voltooide demo zal er ongeveer zo uitzien:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> + +<p>Om de oefening te maken, volg je de stappen hieronder en zorg je ervoor dat de lijst zich gedraagt zoals hierboven is beschreven.</p> + +<ol> + <li>Om te beginen download je dit bestand: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Je zal zien dat er minimum aan CSS in zit, een lijst met een label, een invoerveld, een knop, een lege lijst en een {{htmlelement("script")}}-element. Je zal al je code aan het script toevoegen.</li> + <li>Creëer drie variabelen die een referentie naar de {{htmlelement("ul")}}, {{htmlelement("input")}}, en {{htmlelement("button")}} elementen bevatten.</li> + <li>Creëer een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">functie</a> die zal worden uitgevoerd als er op de knop wordt geklikt.</li> + <li>In de functie sla je eerst de <a href="/en-US/docs/Web/API/HTMLInputElement#Properties">waarde</a> die het invoerveld nu heeft, op in een variabele.</li> + <li>Daarna maak je het invoerveld leeg door zijn waarde gelijk te maken aan een lege string: <code>''</code>.</li> + <li>Creëer drie nieuwe elementen {{htmlelement('li')}}, {{htmlelement('span')}}, en {{htmlelement('button')}}. Sla ze op in variabelen.</li> + <li>Bevestig het span-element en de knop aan het lijstonderdeel (li dus) en maak ze de kinderen van li.</li> + <li>Zet de tekstinhoud van het span-element gelijk aan de waarde van het invoerveld dat je eerder al hebt opgeslagen en de tekst van de knop gelijk aan 'Verwijderen'.</li> + <li>Bevestig het lijstonderdeel aan de lijst en maak het een kind van de lijst.</li> + <li>Bevestig een event handler aan de verwijderknop, die het volledige lijstonderdeel zal verwijderen als erop wordt geklikt. (Herinner je je nog hoe we al een node/knooppunt hebben verwijderd? Deze keer wil je echter niet het kind van zijn ouder verwijderen, je wil het kind van de grootouder verwijderen!)</li> + <li>Ten slotte gebruik je de <code><a href="/en-US/docs/Web/API/HTMLElement/focus">focus()</a></code>-methode om de focus op het invoerveld te leggen zodat je het volgende artikel kan invullen.</li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je echt vast raakt, kijk dan eens naar onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">voltooide boodschappenlijst</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">bekijk hem ook live</a>.)</p> +</div> + +<h2 id="Samenvating">Samenvating</h2> + +<p>We hebben het einde van ons artikel over DOM-manipulatie bereikt. Je kent nu de belangrijke onderdelen van een webbrowser waarmee documenten worden gecontrolleerd en andere aspecten die relevant zijn voor onze beleving van een webpagina. Maar vooral begrijp je nu wat het Document Object Model is en hoe je het kan manipuleren om nuttige functionaliteit te creëren</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Er zijn nog veel meer eigenschappen die je kan gebruiken om je documenten te manipuleren. Bekijk de volgende onderwerpen en zie wat je nog kan ontdekken.</p> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> +</ul> + +<p>(Werp ook eens een blik op onze <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API index</a> voor de volledige lijst van Web APIs die worden gedocumenteerd op MDN!)</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> diff --git a/files/nl/learn/javascript/first_steps/a_first_splash/index.html b/files/nl/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..7151f9785b --- /dev/null +++ b/files/nl/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,700 @@ +--- +title: Een eerste duik in JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Nu heb je iets geleerd over de theorie van JavaScript en wat je ermee kunt doen, we geven je nu een spoedcursus in de basisfuncties van JavaScript via een volledig praktische zelfstudie. Hier bouw je stap voor stap een eenvoudig spel "Raad het nummer".</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voorwaarden:</th> + <td>Elementaire computerkennis, een basiskennis van HTML en CSS, een goed begrip van wat JavaScript is.</td> + </tr> + <tr> + <th scope="row">Doelstelling:</th> + <td>Om het eerste beetje ervaring te krijgen met het schrijven van JavaScript, en op zijn minst een basiskennis te verwerven van wat het schrijven van een JavaScript-programma inhoudt.</td> + </tr> + </tbody> +</table> + +<p>Er wordt van je niet verwacht dat je de code meteen volledig begrijpt. We willen je eerst kennis laten maken met de concepten op hoog niveau en je een idee geven van hoe JavaScript (en andere programmeertalen) werken. In volgende artikelen zal je al deze functies nog veel gedetailleerder gaan bekijken!</p> + +<div class="note"> +<p>Opmerking: Veel van de codefuncties die je in JavaScript ziet, zijn hetzelfde als in andere programmeertaal - functies, loops, enz. De codesyntax ziet er anders uit, maar de concepten zijn nog steeds grotendeels hetzelfde.</p> +</div> + +<h2 id="Denken_als_een_programmeur">Denken als een programmeur</h2> + +<p>Een van de moeilijkste dingen om te leren tijdens het programmeren, is niet de manier van opschrijven (syntax) die je moet leren, die je moet leren, maar hoe je deze kunt toepassen om problemen in de echte wereld op te lossen. Je moet gaan denken als een programmeur - meestal gaat het om beschrijvingen van wat je programma moet doen en uitzoeken welke codefuncties nodig zijn om die dingen te bereiken en hoe ze samen kunnen werken.</p> + +<p>Dit vereist een combinatie van hard werken, ervaring met de syntax van de programmeertaal, oefenen - en een beetje creativiteit. Hoe meer je codeert, hoe beter je erin zult worden. We kunnen niet beloven dat je "programmeurshersenen" in 5 minuten zult ontwikkelen, maar we zullen je voldoende gelegenheid geven om tijdens de cursus te denken als een programmeur.</p> + +<p>Laten we met dat in gedachten eens kijken naar het voorbeeld dat we in dit artikel gaan opbouwen, en het algemene proces bekijken om het te ontleden in tastbare taken.</p> + +<h2 id="Voorbeeld_-_Raad_het_nummerspel">Voorbeeld - Raad het nummerspel</h2> + +<p>In dit artikel laten we je zien hoe je het eenvoudige spel opbouwt dat je hieronder kunt zien:</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Raad het nummerspel</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Raad het nummerspel</h1> + <p>We hebben een willekeurig getal tussen 1 en 100 gekozen. Kijk of je het in 10 beurten of minder kunt raden. We zullen je vertellen of je gok te hoog of te laag was.</p> + <div class="form"> <label for="guessField">Voer je gok in: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Doe een gok" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // Je JavaScript start hier + var randomNumber = Math.floor(Math.random() * 100) + 1; + var guesses = document.querySelector('.guesses'); + var lastResult = document.querySelector('.lastResult'); + var lowOrHi = document.querySelector('.lowOrHi'); + var guessSubmit = document.querySelector('.guessSubmit'); + var guessField = document.querySelector('.guessField'); + var guessCount = 1; + var resetButton; + + function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Vorige gok: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = 'Fout!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='Laatste gok was te laag!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Laatste gok was te hoog!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start nieuw spel'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); + } + + function resetGame() { + guessCount = 1; + var resetParas = document.querySelectorAll('.resultParas p'); + for(var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent=''; + } + + resetButton.parentNode.removeChild(resetButton); + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value=''; + guessField.focus(); + lastResult.style.backgroundColor='white'; + randomNumber=Math.floor(Math.random() * 100) + 1; + } +</script> + +</html></pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p> + +<p>Probeer het te spelen - maak jezelf vertrouwd met het spel voordat je verder gaat.</p> + +<p>Stel je voor dat iemand je de volgende opdracht heeft gegeven voor het maken van dit spel:</p> + +<blockquote> +<p>Ik wil dat je een eenvoudig raad het nummer type spel maakt. Het moet een willekeurig getal tussen 1 en 100 kiezen en vervolgens de speler uitdagen om het getal in 10 beurten te raden. Na elke beurt moet aan de speler worden verteld of deze gelijk of ongelijk heeft, of de gok te laag of te hoog was. Het moet de speler ook vertellen welke nummers hij eerder geraden had. Het spel wordt beëindigd als de speler het cijfer correct raadt of als het aantal beurten op is. Wanneer het spel is afgelopen, moet de speler een optie krijgen om opnieuw te spelen.</p> +</blockquote> + +<p>Bij het bekijken van deze beschrijving is het eerste dat we kunnen doen is het beginnen met het opsplitsen in eenvoudige, bruikbare taken, in zo veel mogelijk programmeur-denkwijze als mogelijk:</p> + +<ol> + <li>Genereer een willekeurig getal tussen 1 en 100.</li> + <li>Noteer het gekozen waar de speler mee speelt. Start op 1.</li> + <li>Geef de speler een manier om te raden wat het nummer is.</li> + <li>Nadat een gok is ingediend, noteer je deze eerst ergens zodat de gebruiker zijn eerdere gerade gokbeurten kan zien.</li> + <li>Controleer vervolgens of dit het juiste nummer is.</li> + <li>Als het antwoord goed is: + <ol> + <li>Toon gefeliciteerd bericht.</li> + <li>Stop de mogelijkheid speler om meer getallen in te kunnen voeren (dit zou het spel in de war kunnen maken).</li> + <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> + </ol> + </li> + <li>Als het antwoord verkeerd is en de speler heeft nog beurten over: + <ol> + <li>Vertel de speler dat deze ongelijk heeft.</li> + <li>Laat ze een nieuwe gok in te voeren.</li> + <li>Hoog het aantal gedane beurten op met 1.</li> + </ol> + </li> + <li>Als het antwoord verkeerd is en de speler geen beurten meer heeft: + <ol> + <li>Vertel de speler dat het spel klaar is.</li> + <li>Stop de speler om meer getallen in te kunnen voeren (dit zou het spel in de war maken).</li> + <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> + </ol> + </li> + <li>Nadat het spel opnieuw is gestart, controleer je of de spellogica en UI volledig opnieuw zijn gestart en gaat het aantal beurten terug naar 1.</li> +</ol> + +<p>Laten we nu verder gaan en bekijken hoe we deze stappen kunnen omzetten in code, het spel opbouwen en de JavaScript-functies gaandeweg verkennen.</p> + +<h3 id="Eerste_opzet">Eerste opzet</h3> + +<p>Om deze beschrijving te beginnen, willen we graag dat je een lokale kopie maakt van het <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">nummer-guessing-game-start.html</a> bestand (zie het hier <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">live</a>). Open het in zowel je teksteditor als in je webbrowser. Op dit moment zie je een eenvoudige kop, alinea met instructies en een formulier voor het invoeren van een gok, maar het formulier zal op dit moment niets doen.</p> + +<p>De plaats waar we al onze code zullen toevoegen, bevindt zich in het element {{htmlelement ("script")}} onder aan de HTML:</p> + +<pre class="brush: html"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 id="Variabelen_toevoegen_om_onze_gegevens_op_te_slaan">Variabelen toevoegen om onze gegevens op te slaan</h3> + +<p>Laten we beginnen. Voeg eerst de volgende regels toe in het {{htmlelement("script")}} element:</p> + +<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1; + +var guesses = document.querySelector('.guesses'); +var lastResult = document.querySelector('.lastResult'); +var lowOrHi = document.querySelector('.lowOrHi'); + +var guessSubmit = document.querySelector('.guessSubmit'); +var guessField = document.querySelector('.guessField'); + +var guessCount = 1; +var resetButton;</pre> + +<p>Dit gedeelte van de code stelt de variabelen in die we nodig hebben om de gegevens op te slaan die ons programma zal gebruiken. Variabelen zijn in feite bakjes voor waarden (zoals getallen of tekenreeksen). Je maakt een variabele met het sleutelwoord var gevolgd door de naam van je variabele. Je kunt een waarde toewijzen aan je variabele met een gelijkteken (=) gevolgd door de waarde die je eraan wilt geven.</p> + +<p>In ons voorbeeld:</p> + +<ul> + <li>De eerste variable — <code>randomNumber</code> — krijgt een willekeurig getal tussen 1 en 100 toegewezen, berekend met een wiskundig algoritme.</li> + <li>De volgende drie variabelen worden elk gemaakt om een verwijzing naar de resultatenparagrafen (resultaatonderdelen) in onze HTML op te slaan en worden gebruikt om waarden in de alinea's later in de code in te voegen: + <pre class="brush: html"><p class="guesses"></p> +<p class="lastResult"></p> +<p class="lowOrHi"></p></pre> + </li> + <li>De volgende twee variabelen slaan verwijzingen op naar de formuliertekstinvoer en verzendknop en worden gebruikt om het invoeren van de gok later in te stellen. + <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li>Onze laatste twee variabelen bevatten het aantal gokbeurten van 1 (gebruikt om bij te houden hoeveel gokbeurten de speler heeft gehad) en een verwijzing naar een resetknop (begin op nieuw knop) die nog niet bestaat (maar later zal verschijnen).</li> +</ul> + +<div class="note"> +<p><strong>Opmerking</strong>: Je leert later veel meer over variabelen in de cursus, te beginnen met het <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">volgende artikel</a>.</p> +</div> + +<h3 id="Functies">Functies</h3> + +<p>Voeg vervolgens het onderstaande toe onder je vorige JavaScript:</p> + +<pre class="brush: js">function checkGuess() { + alert('Ik ben een tijdelijke aanduiding'); +}</pre> + +<p>Functies zijn herbruikbare blokken met code die je één keer kunt schrijven en die keer op keer kunt hergebruiken, zodat je de code niet steeds opnieuw hoeft te schrijven. Dit is echt handig. Er zijn een aantal manieren om functies te definiëren, maar voor nu concentreren we ons op één eenvoudig type. Hier hebben we een functie gedefinieerd door het trefwoord <code> function</code> te gebruiken, gevolgd door een naam, met haakjes erachter geplaatst. Daarna plaatsen we twee accolades (<code> {} </code>). En binnen de accolades wordt alle code weergegeven die we willen uitvoeren wanneer we de functie aanroepen. </p> + +<p>De code wordt uitgevoerd door de naam van de functie in te typen gevolgd door de haakjes.</p> + +<p>Probeer je code op te slaan en vernieuw je browservenster</p> + +<p>Ga naar de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">"developer tools JavaScript console"</a>, en voer de volgende regel in:</p> + +<pre class="brush: js"><code> +checkGuess();</code></pre> + +<p>Je zou een waarschuwing moeten zien verschijnen die zegt: "Ik ben een tijdelijke aanduiding"; we hebben een functie in onze code aangemaakt die een waarschuwing creëert wanneer we deze noemen.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je zult later in de cursus veel meer leren over functies.</p> +</div> + +<h3 id="Operators_(bewerkers)">Operators (bewerkers)</h3> + +<p>Met JavaScript-operators kunnen we testen uitvoeren, wiskunde doen, samen met andere strings en dergelijke dingen doen.</p> + +<p>Laten we onze code opslaan en de pagina vernieuwen die wordt weergegeven in onze browser. Open de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"> JavaScript-console voor ontwikkelaarstools </a> als je deze nog niet hebt geopend, zodat je de onderstaande voorbeelden kunt typen - typ in elk van de "Voorbeeld" kolommen precies zoals getoond, druk op Return / Enter na elk, en zie welke resultaten ze teruggeven. Als je geen eenvoudige toegang hebt tot de browserontwikkelaarstools, dan kan je altijd onderstaande eenvoudig ingebouwde console gebruiken:</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><code> +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + inputDiv.focus(); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Resultaat: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></code></pre> +</div> + +<p><code>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</code></p> + +<p>Laten we eerst kijken naar rekenkundige operatoren, bijvoorbeeld:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator (bewerker)</th> + <th scope="col">Naam</th> + <th scope="col">Voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>+</td> + <td>Optelling</td> + <td>6 + 9</td> + </tr> + <tr> + <td>-</td> + <td>Aftrekken</td> + <td>20 - 15</td> + </tr> + <tr> + <td>*</td> + <td>Vermenigvuldigen</td> + <td>3 * 7</td> + </tr> + <tr> + <td>/</td> + <td>Delen</td> + <td>10 / 5</td> + </tr> + </tbody> +</table> + +<p>Je kunt ook de operator + gebruiken om tekstreeksen samen te voegen (concatenation in het programmeren). Probeer de volgende regels uit te voeren:</p> + +<pre class="brush: js"><code> +var naam = 'Bingo'; +naam; +var hallo = ' zegt hallo!'; +hallo; +var begroeting = naam + hallo; +begroeting;</code></pre> + +<p>Er zijn ook enkele shortcut-operators (kortere notatie) beschikbaar, augmented assignment-operatoren genaamd. Als je bijvoorbeeld eenvoudig een nieuwe tekstreeks aan een bestaande wilt toevoegen en het resultaat terug geeft, kan je dit doen:</p> + +<pre class="brush: js"><code> +naam += ' zegt hallo!';</code></pre> + +<p>This is equivalent to</p> + +<pre class="brush: js"><code> +naam = naam + ' zegt hallo!';</code></pre> + +<p>Wanneer we waar / niet waar testen uitvoeren (bijvoorbeeld binnen conditionals - zie {{anch ("Conditionals", "below")}}, gebruiken we vergelijkingsoperatoren, bijvoorbeeld:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Naam</th> + <th scope="col">Voorbeeld</th> + </tr> + <tr> + <td>===</td> + <td>Strikte gelijkheid (is het precies hetzelfde?)</td> + <td>5 === 2 + 4</td> + </tr> + <tr> + <td>!==</td> + <td>Niet-gelijkheid (is het niet hetzelfde?)</td> + <td>'Chris' !== 'Ch' + 'ris'</td> + </tr> + <tr> + <td><</td> + <td>Minder dan</td> + <td>10 < 6</td> + </tr> + <tr> + <td>></td> + <td>Groter dan</td> + <td>10 > 20</td> + </tr> + </thead> +</table> + +<h3 id="Conditionals_(condities)">Conditionals (condities)</h3> + +<p>Terug naar onze <code>checkGuess()</code> -functie, ik denk dat het veilig is om te zeggen dat we niet willen dat het alleen maar een plaatshouderbericht uitspuugt. We willen dat het controleert of de gok van een speler correct is of niet, en dat het op de juiste manier reageert.</p> + +<p>Vervang nu de huidige functie <code>checkGuess()</code> door deze versie:</p> + +<pre class="brush: js"><code> +function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Vorige gok: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + setGameOver(); + } else { + lastResult.textContent = 'Fout!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = 'Laatste gok was te laag!'; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Laatste gok was te hoog!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</code></pre> + +<p>Dit is veel code - pfff! Laten we door elke sectie gaan en uitleggen wat het doet.</p> + +<ul> + <li>De eerste regel (regel 2 hierboven) declareert een variabele met de naam <code>userGuess</code> en stelt de waarde in als huidige waarde die is ingevoerd in het tekstveld. We voeren deze waarde ook uit via de ingebouwde JavaScript methode <code>Number()</code>, om er zeker van te zijn dat de waarde absoluut een getal is.</li> + <li>Vervolgens komen we ons eerste voorwaardelijke codeblok tegen (regels 3-5 hierboven). Met een voorwaardelijk codeblok kan je code selectief uitvoeren, afhankelijk van of een bepaalde voorwaarde waar is of niet. Het lijkt een beetje op een functie, maar dat is het niet. De eenvoudigste vorm van voorwaardelijk blok begint met het sleutelwoord <code>if</code> (als), dan wat haakjes <code>()</code>, dan wat accolades <code>{}</code>. Binnen de haakjes nemen we een test op. Als de test <code>true</code> (waar) retourneert, voeren we de code binnen de accolades uit. Zo niet, dan doen we dat niet en gaan we verder met het volgende stukje code. In dit geval test de test of de variabele <code>guessCount</code> gelijk is aan <code>1</code> (dus of dit de eerste beurt van de speler is of niet): + <pre class="brush: js"><code> +guessCount === 1</code></pre> + Als dat zo is, maken we de tekstinhoud van de paragraaf gelijk aan "<code>Vorige gok</code>:". Zo niet, dan doen we dat niet.</li> + <li>Regel 6 voegt de huidige waarde van <code>UserGuess</code> aan het einde van de guesses-paragraaf toe plus een lege ruimte, zodat er elke keer een spatie tussen elke weergegeven gok verschijnt.</li> + <li>Het volgende blok (regels 8-24 hierboven) voeren een paar controles uit: + <ul> + <li>De eerste <code>if(){}</code> controleert of de gok van de gebruiker gelijk is aan het <code>randomNumber</code> zie is gezet bovenaan onze JavaScript-code. Als dat zo is, heeft de speler correct geraden en is het spel gewonnen, dus laten we de speler een gefeliciteerd bericht zien met een mooie groene kleur, daarna wissen we de inhoud van het Lage /Hoge gok vakje en voeren een functie uit met de naam <code>setGameOver()</code>, die we later zullen bespreken.</li> + <li>Nu hebben we een nieuwe test aan aan het einde van de laatste conditie vast gemaakt met behulp van een <code>else if(){}</code>-structuur. Dit stukje code controleerd of de gok van de laatste beurt ook van de gebruiker is. Als dat zo is, doet het programma hetzelfde als in het vorige blok, maar in plaats van het gefeliciteerd bericht, wordt er een game-over-bericht geplaatst.</li> + <li>Het laatste blok dat aan het einde van deze code is gekoppeld (het <code>else {}</code>) bevat code die alleen wordt uitgevoerd als geen van de twee andere tests <code>true</code> terug geven (dat wil zeggen dat de speler het niet goed heeft geraden, maar er zijn nog meer gokbeurten over). In dit geval vertellen we de speler dat deze ongelijk heeft. Vervolgens voeren we een andere voorwaardelijke test uit om te controleren of de gok hoger of lager was dan het antwoord. Afhankelijk van dit resultaat vertellen we in een bericht of de gok hoger of lager was.</li> + </ul> + </li> + <li>De laatste drie regels in de functie (regel 26-28 hierboven) zorgen ervoor dat we klaar zijn voor de volgende gok. We voegen 1 toe aan de <code>guessCount</code>-variabele, zodat de speler zijn beurt opgebruikt (<code>++</code> is een incrementatiebewerking - dus een toename met 1) en de waarde wordt leeggemaakt in het formuliertekstveld en opnieuw gefocusseerd (de cursor wordt er opnieuw ingezet), zodat de volgende gok kan worden ingevoerd .</li> +</ul> + +<h3 id="Events">Events</h3> + +<p>Op dit moment hebben we een goed geïmplementeerde <code>checkGuess()</code>-functie, maar die doet niets omdat we hem nog niet hebben aangeroepen. In het ideale geval willen we het aanroepen als de knop "Doe een gok" wordt ingedrukt, en om dit te doen, moeten we een event (gebeurtenis) gebruiken. Events zijn acties die plaatsvinden in de browser, zoals een knop waarop geklikt wordt, of een pagina die wordt geladen, of een video die wordt afgespeeld, in reactie daarop kunnen we blokken met code uitvoeren. De constructies die luisteren naar de gebeurtenis die plaatsvindt, worden <strong>event listeners</strong> genoemd en de blokken code die worden uitgevoerd als reactie op het vuren van een event worden <strong>event handlers</strong> genoemd</p> + +<p>Voeg de volgende regel toe aan je <code>checkGuess()</code> functie:</p> + +<pre class="brush: js"><code> +guessSubmit.addEventListener('click', checkGuess);</code></pre> + +<p>Hier voegen we een event listener toe aan de <code>guessSubmit</code>-knop. Dit is een methode die twee invoerwaarden (argumenten genaamd) nodig heeft - het type event waarnaar we luisteren (in dit geval click (klik)) als een tekenreeks en de code die we willen uitvoeren wanneer de gebeurtenis plaatsvindt (in dit geval de checkGuess() functie - merk op dat we de haakjes niet hoeven te gebruiken bij het schrijven binnen {{domxref ("EventTarget.addEventListener", "addEventListener ()")}}).</p> + +<p>Probeer je code nu uit door op te slaan en te de browser te vernieuwen, je uitwerking zou nu moeten werken, tot op zekere hoogte. Het enige probleem is nu, als je het juiste antwoord raadt of gokken mist, het spel stuk zal gaan, omdat we nog niet de functie <code>setGameOver()</code> hebben aangemaakt en die zou moeten draaien zodra het spel voorbij is. Laten we nu onze ontbrekende code toevoegen en de voorbeeldfunctionaliteit voltooien.</p> + +<h3 id="De_spelfunctionaliteit_afmaken">De spelfunctionaliteit afmaken</h3> + +<p>Laten we de functie <code>setGameOver()</code> aan de onderkant van onze code toevoegen en er vervolgens doorheen lopen. Voeg dit nu toe, onder de rest van je JavaScript:</p> + +<pre class="brush: js"><code> +function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start nieuw spel'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</code></pre> + +<ul> + <li>De eerste twee regels schakelen de formuliertekstinvoer en -knop uit door hun uitgeschakeleigenschap in te stellen op <code>true</code>. Dit is nodig, want als we dat niet deden, zou de gebruiker meer gokken kunnen doen nadat het spel voorbij is, wat de boel zou verpesten.</li> + <li>De volgende drie regels maken een nieuw {{htmlelement("button")}} element, en zet de tekst op "Start nieuw spel", en zet de knop onderaan ons al bestaande HTML.</li> + <li>De laatste regel zet een event listener op onze nieuwe knop zodat, als erop de geklikt wordt, de functie genaamt <code>resetGame()</code> wordt uitgevoerd.</li> +</ul> + +<p>Nu moeten we de functie nog maken! Voeg de volgende code toe, nogmaals aan de onderkant van je JavaScript:</p> + +<pre class="brush: js"><code> +function resetGame() { + guessCount = 1; + + var resetParas = document.querySelectorAll('.resultParas p'); + for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</code></pre> + +<p>Dit opnieuw een vrij lang blok code en stelt alles volledig opnieuw in zoals het was aan het begin van het spel, dus de speler kan nog een keer proberen.</p> + +<p>Het:</p> + +<ul> + <li>Zet <code>guessCount</code> terug naar 1.</li> + <li>Leegt alle informatie paragraven.</li> + <li>Verwijderd de reset knop van de code.</li> + <li>Zet de formulier elementen aan, en leegt het tekstveld en zet de cursor erin, klaar zodat een nieuwe gok ingevoerd kan worden.</li> + <li>Verwijderd de achtergrondkleur van de <code>lastResult</code> paragraaf.</li> + <li>Maakt een nieuw willekeurig nummer, zodat je niet direct het nieuwe nummer kan raden!</li> +</ul> + +<p><strong>Op dit punt zou je een volledig werkend (eenvoudig) spelletje moeten hebben - gefeliciteerd!</strong></p> + +<p>Het enige dat we nog moeten doen in dit artikel is praten over een paar andere belangrijke codefuncties die je al hebt gezien, hoewel je je dit misschien niet hebt gerealiseerd.</p> + +<h3 id="Loops">Loops</h3> + +<p>Een deel van de bovenstaande code die we beter moeten bekijken, is de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>-lus. Loops zijn een heel belangrijk concept bij het programmeren, waardoor je steeds een stuk code kunt blijven herhalen totdat aan een bepaalde voorwaarde is voldaan.</p> + +<p>Om te beginnen, ga opnieuw terug naar je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript-console voor ontwikkelaarstools</a>, en voer het volgende in:</p> + +<pre class="brush: js"><code> +for (var i = 1 ; i < 21 ; i++) { console.log(i) }</code></pre> + +<p>Wat gebeurt er? De nummers 1 tot 20 zijn afgedrukt in je console. Dit komt door de loop. Een for loop heeft drie invoer waarden (argumenten):</p> + +<ol> + <li><strong>Een startwaarde:</strong> in dit geval beginnen we een telling op 1, maar dit kan elk nummer zijn dat je leuk vindt. Je kunt <code>i</code> vervangen door elke naam die je ook leuk vindt, maar <code>i</code> wordt gebruikt als een variabele, omdat deze kort en gemakkelijk te onthouden is.</li> + <li><strong>Een eindwaarde</strong>: Hier hebben we <code>i <21</code> gespecificeerd - de lus zal doorgaan totdat <code>i</code> niet langer minder dan 21 is. Wanneer <code>i</code> 21 bereik, zal de lus niet langer lopen.</li> + <li><strong>Een incrementor (vermeerderaar): </strong>We hebben <code>i++</code> opgegeven, wat "tel 1 op bij i" betekent. De lus wordt één keer uitgevoerd voor elke waarde van <code>i</code>, totdat <code>i</code> een waarde van 21 bereik (zoals hierboven besproken). In dit geval printen we eenvoudig de waarde van <code>i</code> naar de console op elke iteratie met behulp van {{domxref ("Console.log", "console.log ()")}}.</li> +</ol> + +<p>Laten we nu kijken naar de lus in ons nummer gokspel - het volgende kan gevonden worden in de functie <code>resetGame()</code>:</p> + +<pre class="brush: js"><code> +var resetParas = document.querySelectorAll('.resultParas p'); +for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</code></pre> + +<p>Deze code maakt een variabele die een lijst bevat van alle paragraven in <code><div class="resultParas"></code> door gebruik te maken van de {{domxref("Document.querySelectorAll", "querySelectorAll()")}} methode, dan wordt het door elke keer herhaald, waarbij elke keer de tekstinhoud wordt verwijderd.</p> + +<h3 id="Een_kleine_discussie_over_objecten">Een kleine discussie over objecten</h3> + +<p>Laten we nog een laatste verbetering toevoegen voordat we aan deze discussie beginnen. Voeg de volgende regel toe net onder de <code>var resetButton;</code> regel in de buurt van de bovenkant van je JavaScript en sla je bestand weer op:</p> + +<pre class="brush: js"><code> +guessField.focus();</code></pre> + +<p>Deze regel gebruikt de {{domxref("HTMLElement.focus", "focus()")}} methode om automatisch de text cursur (het knipperende streepje) in het {{htmlelement("input")}} tekst veld te zetten zodra de pagina laad, met de bedoeling dat de gebruiker direct kan beginnen met het typen van de eerste gok, en niet eerst in het formulier veld hoeft te klikken. Het is een kleine toevoeging, maar het vergroot het gebruiksgemak — de gebruiker een goede visuele idee geven van wat ze moeten doen om het spel te spelen.</p> + +<p>Laten we wat hier gebeurt iets meer op detail analyseren. In JavaScript is alles een object. Een object is een verzameling van functionaliteit die bij elkaar hoort in een groep. Je kunt je eigen objecten maken, maar dat is iets te geavanceerd voor dit moment, maar zullen er later in de cursus op terug komen.Voor nu zullen we alleen in gaan op de standaard ingebouwde objecten van je browser, die ervoor zorgen dat je een heel aantal nuttige dingen kunt doen.</p> + +<p>In dit geval, maken we eerst een <code>guessField</code> variabele die een verwijzing bevat naar het tekstformulierveld in onze HTML — de volgende regel vindt je bij onze variabelen aan de bovenkant van onze code: </p> + +<pre class="brush: js"><code> +var guessField = document.querySelector('.guessField');</code></pre> + +<p>Om deze verwijzing te krijgen, maken we gebruik van het {{domxref("document.querySelector", "querySelector()")}} object. <code>querySelector()</code> neemt een stukje informatie — een <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> die selecteerd het element waarnaar je wilt verwijzen.</p> + +<p>Omdat <code>guessField</code> nu een verwijzing bevat naar een {{htmlelement("input")}} element op de pagina, heeft het toegang tot een heel aantal eigenschappen (in het programmeren noemen we dit properties en het zijn eigenlijk variabelen opgeslagen in de objecten, waarbij sommige de waarden niet aangepast kunnen worden, maar een statische inhoud bevatten) en methodes (eigenlijk functies opgeslagen in de objecten). Een van de beschikbare methoden bij input elementen is <code>focus()</code>, dus we kunnen nu deze gebruiken om de cursor te zetten in het tekst invoerveld:</p> + +<pre class="brush: js"><code> +guessField.focus();</code></pre> + +<p>Variabelen die geen verwijzing bevatten naar formulier elementen, die hebben geen <code>focus()</code> methode beschikbaar. Bijvoorbeeld de <code>guesses</code> variabele bevat een verwijzing naar een {{htmlelement("p")}} element, en <code>guessCount</code> bevat een nummer.</p> + +<h3 id="Spelen_met_browser_objecten">Spelen met browser objecten</h3> + +<p>Laten we een beetje gaan spelen met enkele browser objecten.</p> + +<ol> + <li>Open eerst je JavaScript programma in een browser.</li> + <li>Open vervolgens je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browserontwikkelaarstools</a> en zorg ervoor dat het JavaScript-console-tabblad geopend is. </li> + <li>Typ <code>guessfield</code> in en het console zal je laten zien dat de variabele een element {{htmlelement ("input")}} bevat. Je zult ook opmerken dat de console objectnamen die zich in de uitvoeringsomgeving bevinden automatisch toevoegt, inclusief je variabelen!</li> + <li>Typ nu het volgende: + <pre class="brush: js"><code> +guessField.value = 'Hallo';</code></pre> + De eigenschap <code>value</code> vertegenwoordigt de huidige waarde die is ingevoerd in het tekstveld. Je zult zien dat er iets door het invoeren van deze opdracht is veranderd, weet je wat dat is?</li> + <li>Probeer nu <code>guesses</code> in te typen en op Enter te drukken. De console zal je laten zien dat de variabele een element {{htmlelement ("p")}} bevat.</li> + <li>Probeer nu de volgende regel in te voeren: + <pre class="brush: js"><code> +guesses.value</code></pre> + De browser geeft <strong>undefined</strong> terug, omdat deze waarde niet bestaat in paragrafen.</li> + <li>Als je de tekst in een paragraaf (alinea) wilt wijzigen, heb je in de eigenschap {{domxref ("Node.textContent", "textContent")}} nodig. Probeer dit: + <pre class="brush: js"><code> +guesses.textContent = 'Waar is mijn alinea?';</code></pre> + <code> </code></li> + <li>Nu voor wat leuke dingen. Probeer de onderstaande regels één voor één in te voeren: + <pre class="brush: js"><code> +guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</code></pre> + Elk element op een pagina heeft een stijleigenschap, die zelf een object bevat waarvan de eigenschappen alle inline CSS-stijlen bevatten die op dat element zijn toegepast. Dit stelt ons in staat om dynamisch nieuwe CSS-stijlen in te stellen op elementen met behulp van JavaScript.</li> +</ol> + +<h2 id="Klaar_voor_nu_...">Klaar voor nu ...</h2> + +<p>Zo dus dit was het voor wat betreft het opbouwen van het voorbeeld - je hebt het einde bereikt, goed gedaan! Probeer je definitieve code uit, of <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">speel met onze voltooide versie hier</a>. Als je het voorbeeld niet werkend krijgt, vergelijk dan jouw code met die van onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">broncode</a>.</p> + +<p><code>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</code></p> diff --git a/files/nl/learn/javascript/first_steps/index.html b/files/nl/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..fa76ddf15c --- /dev/null +++ b/files/nl/learn/javascript/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript First Steps +slug: Learn/JavaScript/First_steps +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><br> +In onze eerste JavaScript module beantwoorden we eerst we aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat er verder wordt gegaan met de eerste praktijkervaring met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, nummers en arrays.</p> + +<h2 id="Voorwaarden">Voorwaarden</h2> + +<p>Voordat u deze module start, hebt u geen voorafgaande JavaScript-kennis nodig, maar moet u enige bekendheid met HTML en CSS hebben. U wordt geadviseerd om de volgende modules door te nemen voordat u met JavaScript begint:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Aan de slag met het web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basis JavaScript introductie</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie in HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie in CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Opmerking</strong>: Als u op een computer / tablet / ander apparaat werkt waar u niet de mogelijkheid hebt om uw eigen bestanden te maken, kunt u (de meeste van) de codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt> + <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt> + <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt> + <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt> + <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with most basic building blocks of JavaScript — Variables.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt> + <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> + <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> + <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> +</dl> diff --git a/files/nl/learn/javascript/index.html b/files/nl/learn/javascript/index.html new file mode 100644 index 0000000000..7e0f1c0d64 --- /dev/null +++ b/files/nl/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is een programmeertaal waarmee je complexe zaken kunt implementeren in websites. Telkens wanneer een webpagina meer doet dan statische informatie weergeven — meldingen op een bepaald tijdstip weergeven, inhoud vernieuwen op regelmatige basis, interactieve kaarten, geanimeerde 2D/3D prenten, video jukeboxes, etc. — kan je zo goed als zeker zijn dat er JavaScript mee gemoeid is.</p> + +<h2 id="Leerproces">Leerproces</h2> + +<p>Javascript is moeilijker om te leren dan gerelateerde technologieën zoals <a href="/en-US/docs/Learn/HTML">HTML</a> en <a href="/en-US/docs/Learn/CSS">CSS</a>. Voordat je begint met het leren van Javascript, is het aan te raden om als eerste vertrouwd te raken met eerder genoemde technologieën. Start met de volgende modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Het hebben van ervaring met andere programmeertalen kan ook helpen.</p> + +<p>Nadat je vertrouwd bent met de basis van JavaScript, ben je er klaar voor om meer te leren over geavanceerde onderwerpen, zoals:</p> + +<ul> + <li>JavaScript diepgaand, zoals onze <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">Web APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>Hieronder volgen een aantal modules om door te werken, in aangeraaden volgorde.</p> + +<dl> + <dt><a href="/nl/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In onze eerste JavaScript module beantwoorden we een aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat je verder gaat met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, getallen en <em>arrays</em>(reeksen).</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript bouwstenen</a></dt> + <dd>In deze module gaan we verder met het behandelen van de fundamentele kenmerken van JavaScript. Daarbij kijken we naar veel voorkomende blokken code zoals <em>conditional statements</em>( als dit, dan doe dat), <em>loops</em>, functies en <em>events</em>(gebeurtenissen). Je hebt dit al eerder in de reeks voorbij zien komen, maar hier wordt het uitgebreid besproken.<em> </em></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introductie van JavaScript objecten</a></dt> + <dd>In JavaScript bestaan de meeste dingen uit objecten. Van kerneigenschappen als strings en arrays tot de browser API's die op JavaScript gebouwd zijn. Je kunt zelfs je eigen objecten creëren om functies en variabelen die bij elkaar horen in pakketjes te voegen. JavaScript is van nature objectgeoriënteerd en dit is belangrijk om te begrijpen als je verder wilt met het schrijven van efficiënte code. Deze module is gemaakt om je daarin verder te helpen. We leren hier object theorie en syntax in detail, creëren zelf objecten en er wordt uitleg gegeven wat JSON data is en hoe je er mee kunt werken.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>Als je client-side JavaScript voor websites of applicaties schrijft, duurt het niet lang voordat je API's gaat gebruiken. API's zijn interfaces die gebruikt worden om verschillende aspecten van de browser en het besturingssysteem van de site te manipuleren. Soms worden ze zelfs gebruikt om data van andere websites of services te manipuleren. In deze module onderzoeken we wat API's zijn en hoe je de meest voorkomende API's kunt gebruiken die je vaak tegenkomt in je ontwikkelwerk.</dd> +</dl> + +<h2 id="Veelvoorkomende_JavaScript_problemen_oplossen">Veelvoorkomende JavaScript problemen oplossen</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Gebruik JavaScript om veelvoorkomende problemen op te lossen.</a> Hier zijn links te vinden naar verschillende onderwerpen waarin uitgelegd wordt hoe je JavaScript kunt gebruiken om veelvoorkomende problemen bij het maken van een webpagina op te lossen.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript op MDN</a></dt> + <dd>Het algemene toegangspunt van de kerndocumentatie over JavaScript op MDN — Hier vind je uitgebreide referentie documenten over alle aspecten van de JavaScript taal en een aantal geavanceerde tutorials voor JavaScripters met ervaring.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding wiskunde</a></dt> + <dd>Een excellente serie van video tutorials om de wiskunde te leren die je nodig hebt om een effectieve programmeur te worden, door <a href="https://twitter.com/bit101">Keith Peters.</a></dd> +</dl> diff --git a/files/nl/mdn/community/conversations/index.html b/files/nl/mdn/community/conversations/index.html new file mode 100644 index 0000000000..e1319c3259 --- /dev/null +++ b/files/nl/mdn/community/conversations/index.html @@ -0,0 +1,60 @@ +--- +title: MDN-gemeenschapsgesprekken +slug: MDN/Community/Conversations +tags: + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Conversations +--- +<div>{{MDNSidebar}}</div><p class="summary">Het ‘werk’ van MDN gebeurt op de MDN-website, maar de ‘gemeenschap’ bestaat ook door middel van (asynchrone) discussie en (synchrone) online chat en bijeenkomsten.</p> + +<h2 id="Asynchrone_discussies">Asynchrone discussies</h2> + +<p>Voor het delen van informatie en het hebben van lopende discussies heeft MDN <a href="https://discourse.mozilla.org/c/mdn">zijn eigen categorie (‘MDN’) op het Discourse-forum van Mozilla</a>. Deze categorie kan worden gebruikt voor alle onderwerpen die zijn gerelateerd aan MDN, zoals de creatie, vertaling en het onderhoud van documentatie-inhoud, de ontwikkeling van het MDN-platform en zaken als plannen, doelen stellen en het bewaken van de voortgang.</p> + +<ul> + <li>Bekijk de pagina <a href="https://discourse.mozilla-community.org/t/signing-up-and-logging-in/16017">Registreren en aanmelden</a> om te zien hoe u kunt deelnemen aan Discourse van Mozilla; als u een LDAP-account van Mozilla hebt, kunt u die gebruiken in plaats van u met uw e-mailadres aan te melden.</li> + <li>Bekijk de pagina <a href="https://discourse.mozilla-community.org/t/subscribing-to-categories-and-topics/16024">Abonneren op categorieën en onderwerpen</a> om te leren hoe u zich op de MDN-categorie kunt abonneren.</li> + <li>(Optioneel) Als u het prettiger vindt om met Discourse te werken via e-mail, bekijk dan de pagina <a href="https://discourse.mozilla-community.org/t/mailman-mode/15279">Een mailinglijst voor uzelf instellen</a>. U kunt een discussie op Discourse starten door een e-mail te sturen naar <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. Als u Discourse gebruikt via e-mail, kunt u reageren op een bericht door te reageren op de notificatie-e-mail die u ontvangt. Als u opmerkingen tussen de regels in een antwoord wilt toevoegen, plaats dan twee enters voor en na uw inline chunks, zodat Discourse ze op de juiste manier kan parsen.</li> +</ul> + +<h3 id="Historische_archieven">Historische archieven</h3> + +<p>Voor juni 2017 vonden MDN-gerelateerde discussies plaats in mailinglijsten die toegankelijk werden gemaakt en werden gearchiveerd met Google-groepen. Als u in deze afgelopen discussies wil zoeken, kunt u kijken naar de Google-groepen die met de oude mailinglijsten corresponderen. (Ja, we weten dat deze namen overlappen en verwarrend zijn. Historisch ongeluk. Sorry hiervoor.)</p> + +<dl> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdc">mozilla.dev.mdc</a> alias <strong>dev-mdc</strong></dt> + <dd>Deze lijst was voor discussies over documentatie-inhoud op MDN.</dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.dev.mdn">mozilla.dev.mdn </a>alias <strong>dev-mdn</strong></dt> + <dd>Deze lijst was voor ontwikkelwerk van het onderliggende platform van MDN, genaamd <a href="/nl/docs/Project:MDN/Kuma">Kuma</a>.</dd> + <dt><a href="https://groups.google.com/forum/#!forum/mozilla.mdn">mozilla.mdn </a>alias <strong>mdn@</strong></dt> + <dd>Dit forum was voor discussies over planning en prioritering op een hoger niveau, voor de MDN-website en andere gerelateerde initiatieven.</dd> +</dl> + +<p> </p> + +<h2 id="Chat_in_IRC">Chat in IRC</h2> + +<p> </p> + +<p>Internet Relay Chat (IRC) is de methode waaraan we de voorkeur geven voor dagelijkse chat en real-time discussies tussen gemeenschapsleden. We gebruiken een aantal kanalen op de server irc.mozilla.org voor discussies die aan MDN zijn gerelateerd.</p> + +<dl> + <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a></dt> + <dd>Dit kanaal is ons voornaamste kanaal voor het bespreken van de inhoud van MDN. We praten over schrijven, het organiseren van inhoud, enzovoort. We hebben hier ook onze ‘koffieautomaatgesprekken’ – het is een manier waarop de gemeenschap contact kan houden en kan samenkomen. Dit is ook de plek om over andere aspecten van MDN te praten (anders dan de ontwikkeling van het platform), zoals Demo Studio, profielen, enzovoort.</dd> + <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></dt> + <dd>In dit kanaal komen de leden van ons ontwikkelteam – de mensen die de code schrijven waarmee MDN werkt – samen en bespreken ze hun dagelijkse werk. U bent welkom om deel te nemen en mee te doen met het ontwikkelen of vragen te stellen over problemen met de software die u ziet.</dd> +</dl> + +<p>Deze kanalen zijn waarschijnlijk het meest actief tijdens doordeweekse dagen in Noord-Amerika.</p> + +<p>Het kan zijn dat u <a href="https://wiki.mozilla.org/IRC">meer over IRC wilt leren</a> en een installeerbare IRC-client zoals <a href="https://addons.mozilla.org/firefox/addon/chatzilla/">ChatZilla</a> wilt gebruiken. Het is geïmplementeerd als een add-on voor Firefox, waardoor het makkelijk is te installeren en gebruiken. Als u niet bekend bent met IRC, is deelnemen door gebruik van een webgebaseerde IRC-client zoals <a href="https://chat.mibbit.com/">Mibbit</a> een makkelijke manier. Hier vindt u directe koppelingen naar de kanalen <a href="http://chat.mibbit.com/?server=irc.mozilla.org%3A%2B6697&channel=%23mdn">#mdn</a> en <a href="http://chat.mibbit.com/?server=irc.mozilla.org%3A%2B6697&channel=%23mdndev">#mdndev</a> op Mibbit.</p> + +<h2 id="Neem_deel_aan_onze_bijeenkomsten_(en_andere_evenementen)">Neem deel aan onze bijeenkomsten (en andere evenementen)</h2> + +<p>Het MDN-team houdt regelmatig een aantal bijeenkomsten dat open is voor de MDN-gemeenschap. Bekijk de pagina <a href="https://wiki.mozilla.org/MDN/Meetings">MDN-bijeenkomsten</a> op de wiki van Mozilla voor details over het rooster, de agenda’s en notulen, en informatie over hoe u kunt deelnemen.</p> + +<p>Bekijk de <a href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com">evenementenkalender van MDN</a> voor deze en andere bijeenkomsten, lokale bijeenkomsten en andere evenementen. De terugkerende bijeenkomsten worden samengevat op de wiki-pagina <a href="https://wiki.mozilla.org/MDN/Meetings">MDN-bijeenkomsten.</a></p> + +<p>Als u een bijeenkomst ziet die plaatsvindt in het kanaal ‘mdn’ op uw Vidyo-videoconferentiesysteem, kunt u <a class="external external-icon" href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg" rel="noopener">het gesprek bijwonen via internet</a>.</p> diff --git a/files/nl/mdn/community/index.html b/files/nl/mdn/community/index.html new file mode 100644 index 0000000000..7856783b88 --- /dev/null +++ b/files/nl/mdn/community/index.html @@ -0,0 +1,55 @@ +--- +title: Deelnemen aan de MDN-gemeenschap +slug: MDN/Community +tags: + - Community + - Gemeenschap + - Handleiding + - Landing + - MDN Meta +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<div class="summary"> +<p>MDN Web Docs is meer dan een wiki: het is een gemeenschap van ontwikkelaars die samenwerken om MDN een uitstekende bron te maken voor ontwikkelaars die open-source technologieën gebruiken.</p> +</div> + +<p>We zouden graag zien dat u aan MDN bijdraagt, maar we zien nog liever dat u aan de MDN-gemeenschap deelneemt. U kunt als volgt verbonden raken, in drie eenvoudige stappen:</p> + +<ol> + <li><a href="/docs/MDN/Contribute/Howto/Create_an_MDN_account">Maak een MDN-account aan</a>.</li> + <li><a href="/docs/MDN/Community/Conversations">Neem deel aan conversaties</a>.</li> + <li><a href="/docs/MDN/Community/Whats_happening">Volg wat er gebeurt</a>.</li> +</ol> + +<h2 id="Hoe_de_gemeenschap_werkt">Hoe de gemeenschap werkt</h2> + +<p>De volgende artikelen beschrijven een aantal mogelijkheden in de gemeenschap van MDN.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/nl/docs/MDN/Community/Rollen">Rollen binnen de gemeenschap</a></dt> + <dd class="landingPageList">Er is een aantal rollen binnen de MDN-gemeenschap dat bepaalde verantwoordelijkheden met zich meedraagt.</dd> + <dt class="landingPageList"><a href="/nl/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt> + <dd class="landingPageList">Dit is een handleiding voor het organiseren van een documentatiesprint. Deze bevat advies en tips van mensen die docsprints hebben georganiseerd, met de bedoeling om u er ook een te helpen organiseren.</dd> + <dt class="landingPageList"><a href="/nl/docs/MDN/Community/Whats_happening">Blijf op de hoogte </a></dt> + <dd class="landingPageList">MDN wordt u aangeboden door de <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla Developer Network Community</a>. Hier vindt u wat manieren waarop we informatie delen over wat we doen.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/nl/docs/MDN/Community/Conversations">MDN gemeenschapsdiscussies</a></dt> + <dd class="landingPageList">Het ‘werk’ van MDN vindt plaats op de website van MDN, maar de ‘gemeenschap’ bestaat ook uit (asynchrone) discussies en (synchrone) onlinechat en -meetings.</dd> + <dt class="landingPageList"><a href="/nl/docs/MDN/Community/Working_in_community">Werken in de gemeenschap</a></dt> + <dd class="landingPageList">Een groot deel van het op grote schaal bijdragen aan MDN documentatie is weten hoe u als onderdeel van de MDN-gemeenschap kunt werken. Dit artikel biedt tips om de communicatie tussen en naar andere schrijvers en ontwikkelteams zo efficiënt mogelijk te laten verlopen.</dd> +</dl> +</div> +</div> diff --git a/files/nl/mdn/community/rollen/admins/index.html b/files/nl/mdn/community/rollen/admins/index.html new file mode 100644 index 0000000000..0c98cc234a --- /dev/null +++ b/files/nl/mdn/community/rollen/admins/index.html @@ -0,0 +1,61 @@ +--- +title: MDN-beheerdersrol +slug: MDN/Community/Rollen/Admins +tags: + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Roles/Admins +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Van alle rollen op MDN heeft de rol van <strong>beheerder</strong> het hoogste permissieniveau. Beheerders kunnen alle functies op het platform van de website gebruiken, en hebben zelf beperkte toegang tot datastructuren achter de schermen. Dit artikel beschrijft wat beheerders kunnen doen en hoe u met een beheerder kunt praten om hulp te krijgen bij een van die dingen.</span></p> + +<h2 id="Huidige_MDN-beheerders">Huidige MDN-beheerders</h2> + +<p>Op dit moment zijn de volgende gebruikers beheerders: {{UserLink("Sheppy")}}, {{UserLink("fscholz")}}, {{UserLink("teoli")}}, {{UserLink("jswisher")}}</p> + +<h2 id="Beheerdersrechten">Beheerdersrechten</h2> + +<p>Beheerders hebben een aantal speciale bevoegdheden, zoals:</p> + +<h3 id="Pagina's_verplaatsen">Pagina's verplaatsen</h3> + +<p>Alle beheerders hebben de bevoegdheid om pagina's en paginatrees te verplaatsen.</p> + +<h3 id="Pagina's_verwijderen">Pagina's verwijderen</h3> + +<p>Alle beheerders hebben de bevoegdheid om alle pagina's op de MDN-wiki te verwijderen. Als u echter een pagina verwijderd wil hebben, voeg dan simpelweg het label "junk" toe aan de pagina. Bewerk of wis de inhoud niet (dit maakt het moeilijk om te beoordelen of de pagina echt verwijderd moet worden). Als er een bijzonder groot probleem is (zwaar aanstootgevende inhoud, bijvoorbeeld), neem dan ook direct contact op met een beheerder.</p> + +<p> </p> + +<p>Beheerders hebben ook de bevoegdheid om het verwijderen van een pagina ongedaan te maken (tenminste, voordat ze opgeruimd worden, wat een tijdje na verwijdering gebeurt). Als u vindt dat een pagina onterecht is verwijderd, neem dan contact op met een beheerder.</p> + +<h3 id="Permissies_geven_en_intrekken">Permissies geven en intrekken</h3> + +<p>Beheerders kunnen de permissies van gebruikers wijzigen. Hier zit een proces achter, bekijk <a href="/nl/docs/MDN/Contribute/Tools/Template_editing">Hulpmiddelen met beperkte toegang</a> voor meer informatie.</p> + +<h3 id="Gebruikers_bannen_en_bans_opheffen">Gebruikers bannen en bans opheffen</h3> + +<p>Soms gebeurt het dat gebruikers genoeg problemen veroorzaken dat ze moeten worden uitgesloten van het bewerken van inhoud op MDN (tijdelijk of permanent). Beheerders (maar ook onderwerpbestuurders en lokalisatieteamleiders) hebben de bevoegdheid om gebruikers te bannen en om bestaande bans op te heffen.</p> + +<h3 id="Zones_aanmaken_en_bewerken">Zones aanmaken en bewerken</h3> + +<p>MDN-beheerders kunnen nieuwe zones aanmaken, bestaande pagina's veranderen in zones en informatie en de CSS van een zone bewerken. Bekijk voor meer informatie over zones de <a href="/nl/docs/MDN/User_guide/Zone_administration">zonebeheergids</a>.</p> + +<h3 id="Gebruikersinformatie_bewerken">Gebruikersinformatie bewerken</h3> + +<p>MDN-beheerders hebben de beperkte bevoegdheid om gebruikersinformatie te veranderen waarvoor nog geen gebruikersinterface voor bewerken bestaat. Als uw gebruikersnaam moet worden veranderd, een e-mailadres dat is geassocieerd met een oud 'legacy'-account op MDN, of iets vergelijkbaars, dan kunt u contact opnemen met een beheerder voor hulp. <strong>We kunnen u niet beloven dat we u kunnen helpen; niet aan alle aanvragen kan worden voldaan.</strong></p> + +<h3 id="Agenda-items_toevoegen_of_wijzigen">Agenda-items toevoegen of wijzigen</h3> + +<p>MDN-beheerders kunnen iets toevoegen aan de <a href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html">MDN evementenagenda</a> of hem bijwerken. Als uw schrijfteam een bijeenkomst heeft die u wil hebben vermeld, of als u een probleem ziet met een bestaand evenement, laat het dan weten aan de beheerders zodat we het kunnen oplossen.</p> + +<h2 id="Contact_opnemen_met_een_beheerder">Contact opnemen met een beheerder</h2> + +<p>U kunt contact opnemen met specifieke beheerders via hun profiel bovenaan, of u kunt een e-mail sturen naar <a href="mailto:mdn-admins@mozilla.org?subject=Admin%20help%20request">mdn-admins@mozilla.org</a> om een bericht te schrijven aan het beheerdersteam.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/nl/docs/MDN/Contribute/Drivers_and_curators">Onderwerpbestuuders en -curators</a></li> + <li><a href="/nl/docs/MDN/Community/Rollen/Localization_driver_role">Lokalisatiebestuurdersrol</a></li> +</ul> diff --git a/files/nl/mdn/community/rollen/index.html b/files/nl/mdn/community/rollen/index.html new file mode 100644 index 0000000000..09bab29744 --- /dev/null +++ b/files/nl/mdn/community/rollen/index.html @@ -0,0 +1,12 @@ +--- +title: Rollen binnen de gemeenschap +slug: MDN/Community/Rollen +tags: + - Gemeenschap + - Landing + - MDN Meta +translation_of: MDN/Community/Roles +--- +<div>{{MDNSidebar}}</div><p>Er is een aantal rollen binnen de MDN-gemeenschap dat specifieke verantwoordelijkheden heeft.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/nl/mdn/community/rollen/localization_driver_role/index.html b/files/nl/mdn/community/rollen/localization_driver_role/index.html new file mode 100644 index 0000000000..091340009a --- /dev/null +++ b/files/nl/mdn/community/rollen/localization_driver_role/index.html @@ -0,0 +1,75 @@ +--- +title: Lokalisatiebestuurdersrol +slug: MDN/Community/Rollen/Localization_driver_role +tags: + - Gemeenschap + - Gids + - MDN Meta + - l10n +translation_of: MDN/Community/Roles/Localization_driver_role +--- +<div>{{MDNSidebar}}</div><p>Een MDN-lokalisatiebestuurder coördineert en leidt documentatie-activiteiten op MDN voor een specifieke taal of specifiek taalgebied. Ze blijven op de hoogte van de documentatiestructuur binnen MDN, van de interesses van vertalers, en van Mozilla. Ze hoeven zelf geen vertaalwerk met betrekking tot hun eigen taalgebied te doen en worden aangemoedigd om groep medewerkers te verzamelen met interesse in vertalen, en taken binnen deze groep te coördineren. Bekijk de pagina <a href="/nl/docs/MDN/Contribute/Localize/Localization_projects">Lokalisatieprojecten</a> voor een lijst van actieve taalgebieden en hun huidige l10n-bestuurders.</p> + +<h2 id="Waarom_een_lokalisatiebestuurder_zijn">Waarom een lokalisatiebestuurder zijn?</h2> + +<p>Als l10n-bestuurder hebt u de mogelijkheid om u zich diep onder te dompelen in de gemeenschap en om een grote invloed te hebben op hoe Mozilla wordt gezien in uw taalkundige gemeenschap. U zou deze expertise kunnen gebruiken bij uw huidige werk, of bij het verkrijgen van een andere baan.</p> + +<p>Daarnaast kunt u als l10n-bestuurder een drijfveer zijn om de kwaliteit van het web te verbeteren.</p> + +<h2 id="Een_l10n-bestuurder_worden">Een l10n-bestuurder worden</h2> + +<p>Om een l10n-bestuurder te worden voor een taalgebied dat er nog geen heeft, dient u eerst te voldoen aan bepaalde kwalificaties:</p> + +<ul> + <li>Expertise in de taal van het taalgebied.</li> + <li>Actieve medewerker in het taalgebied (tenminste een maand).</li> + <li>Het vermogen om te communiceren met een diverse, geografisch gespreide gemeenschap.</li> +</ul> + +<p>De beste manier om een l10n-bestuurder te worden is door u zo te gedragen: de meeste taken van een l10n-bestuurder vereisen geen speciale rechten of toestemming.</p> + +<p>Als u voldoet aan de voorwaarden, kunt u een bericht plaatsen op het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a> met daarin dat u graag de bestuurder wil worden van een bepaald taalgebied, met daarbij een uitleg over wat er moet worden gedaan voor dit taalgebied en een overzicht van uw kwalificaties. Als u voldoet aan de kwalificaties zullen we u helpen te zorgen dat u klaar bent voor en getraind wordt in de basisbeginselen van hoe u uw nieuwe rechten kunt gebruiken.</p> + +<h3 id="Een_bestaande_l10n-bestuurder_helpen">Een bestaande l10n-bestuurder helpen</h3> + +<p>Er is geen limiet op het aantal l10n-bestuurders per taalgebied. Ze moeten natuurlijk wel kunnen samenwerken. :-) Aarzel dus niet om hen te helpen: help met het controleren van de inhoud op spam, fouten, enzovoort; het redigeren van nieuw-vertaalde artikelen en het bijwerken van vertaalde artikelen zijn andere mogelijke taken.</p> + +<h2 id="Verantwoordelijkheden">Verantwoordelijkheden</h2> + +<p>Als l10n-bestuurder hebt u een aantal belangrijke verantwoordelijkheden, zoals:</p> + +<ul> + <li>Het coördineren van de schrijfgemeenschap die bijdraagt aan vertalingen, om ervoor te zorgen dat het werk wordt uitgevoerd en dat mensen niet per ongeluk iets twee keer vertalen. Werf en betrek nieuwe medewerkers voor het taalgebied, voor de wiki, maar ook voor het vertalen van de UI van de MDN-website.</li> + <li>Het organiseren van vertaalde pagina's. Corrigeer structurele fouten en de hiërarchie van het document. Maak kenbaar aan de vertaalgemeenschap welke pagina's het belangrijkst zijn om te vertalen. Zorg ervoor dat macro's ook worden vertaald.</li> + <li>Deel de voortgang en de status van het documentatiewerk met de MDN-gemeenschap, door deel te nemen aan discussies op het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a>, enzovoort.</li> + <li>Doneer zoveel schrijftijd als voor u mogelijk is; u hoeft het niet allemaal te doen, maar het is handig als u iets kunt doen!</li> +</ul> + +<h2 id="Rechten">Rechten</h2> + +<p>Naast de rechten die beschikbaar zijn voor alle geathenticeerde gebruikers op MDN (zoals het terugdraaien van wijzigingen) hebben l10n-bestuurders deze aanvullende rechten:</p> + +<ul> + <li>Pagina's of paginatrees verplaatsen</li> + <li>Bestandsbijlagen uploaden en beheren</li> + <li>Macro's van KumaScript bewerken</li> +</ul> + +<p>We zijn van plan om nieuwe rechten toe te voegen in de toekomst, zoals toegang tot een lijst van medewerkers of de mogelijkheid tot het verbannen van spammers.</p> + +<h2 id="De_rol_verlaten">De rol verlaten</h2> + +<p> </p> + +<p>Als u l10n-bestuurder wordt, hoeft u niet voor altijd in deze rol te blijven. Uw interesses, prioriteiten en beschikbare tijd kunnen veranderen, en dat is oké. Als u voorziet dat u niet kunt doorgaan als l10n-bestuurder (of als u zich realiseert dat u al bent gestopt), neem dan de volgende stappen:</p> + +<ul> + <li>Neem contact op met <a href="https://developer.mozilla.org/en-US/profiles/sheppy">Eric Shepherd</a>, de documentatieleider van MDN, om hem te laten weten dat u uw rol als l10n-bestuurder neerlegt.</li> + <li>Vraag, indien mogelijk, een andere actieve medewerker binnen uw onderwerp om de l10n-bestuurdersrol op zich te nemen. Als deze persoon hiermee akkoord gaat, laat dat dan weten aan de documentatieleider van MDN.</li> +</ul> + +<p>Als u twee maanden niet actief bent geweest op MDN (of op het MDN discussieforum) kan het zijn dat er contact met u wordt opgenomen om te bevestigen dat u wil doorgaan met l10n-bestuurder zijn. l10n-bestuurders die drie maanden inactief zijn, of niet binnen een redelijke tijd reageren wanneer er contact met hen wordt opgenomen, kunnen uit hun rol worden gezet.</p> + +<p> </p> + +<p> </p> diff --git a/files/nl/mdn/community/rollen/mentorrol/index.html b/files/nl/mdn/community/rollen/mentorrol/index.html new file mode 100644 index 0000000000..1f99414cd9 --- /dev/null +++ b/files/nl/mdn/community/rollen/mentorrol/index.html @@ -0,0 +1,62 @@ +--- +title: Mentorrol +slug: MDN/Community/Rollen/Mentorrol +tags: + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Roles/Mentor_role +--- +<div>{{MDNSidebar}}</div><p>Een MDN-mentor is een persoon die is toegewijd aan het helpen van nieuwe medewerkers binnen een bepaald onderwerp en het leiden van het documentatiewerk op MDN binnen dat onderwerp. Mentors blijven geïnformeerd over de prioriteiten en de contributie-activiteiten binnen hun onderwerp. Ze hoeven zelf geen documentatiewerk te doen met betrekking tot hun onderwerp, en zijn toegewijd aan het verzamelen van een groep medewerkers die geïnteresseerd is in het onderwerp, het delegeren van taken binnen de groep en het ondersteunen van de nieuwe medewerkers.</p> + +<h2 id="Een_mentor_worden">Een mentor worden</h2> + +<p>Om een mentor te worden voor een onderwerp, dient u aan bepaalde kwalificaties te voldoen:</p> + +<ul> + <li>Expertise binnen het onderwerp</li> + <li>Actieve medewerker voor het onderwerp (tenminste een maand)</li> + <li>Actief in het <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC">#mdn</a> IRC-kanaal en het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a></li> +</ul> + +<p>Als u voldoet aan deze vereisten kunt u een bericht plaatsen op het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a>, waarin u aangeeft dat u een mentor zou willen worden voor een bepaald onderwerp, met daarbij een uitleg over welk onderwerp u mentor zou willen worden en een overzicht van uw kwalificaties. Als u voldoet aan de kwalificaties zullen we u helpen te zorgen dat u klaar bent voor en getraind wordt in de basisbeginselen van hoe u uw nieuwe rechten kunt gebruiken.</p> + +<div class="note"> +<p><strong>Tip:</strong> Als u een mentor wilt worden, zorg dan dat u zich hiernaar gedraagt! Als u er goed in bent, kunt u zeker van zijn dat we u zullen smeken in deze rol te blijven!</p> +</div> + +<h3 id="Zijn_mentors_anders_dan_onderwerpbestuurders">Zijn mentors anders dan onderwerpbestuurders?</h3> + +<p>Beiden rollen lijken erg op elkaar en hebben vergelijkbare rechten en verantwoordelijkheden. Het verschil zit hem voornamelijk in hun toewijding. Voor een bepaald onderwerp leiden de onderwerpbestuurders de documentatie en hun inhoud, waar mentors de gemeenschap en medewerkers om dat onderwerp heen ondersteunen. De twee rollen vullen elkaar aan en gaan vaak hand in hand.</p> + +<h2 id="Verantwoordelijkheden">Verantwoordelijkheden</h2> + +<p>De mentorrol brengt een aantal belangrijke verantwoordelijkheden met zich mee, zoals:</p> + +<ul> + <li>Nieuwe medewerkers helpen en hun vragen beantwoorden.</li> + <li>Het coördineren van de gemeenschap die bijdraagt aan de documentatie van het onderwerp, om te zorgen dat het werk wordt gedaan en dat mensen niet per ongeluk iets twee keer documenteren.</li> + <li>De voortgang en de status van het documentatiewerk delen met de MDN-gemeenschap, door deel te nemen in discussies op het <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a>, enzovoort.</li> + <li>Nieuwe medewerkers betrekken en ondersteunen om een sterk team van geweldige medewerkers te bouwen.</li> +</ul> + +<h2 id="Rechten">Rechten</h2> + +<p>Naast de rechten die beschikbaar zijn voor alle geauthenticeerde gebruikers, hebben mentors deze aanvullende rechten:</p> + +<ul> + <li>Pagina's of paginatrees verplaatsen</li> + <li>Bestandsbijlagen uploaden en beheren</li> + <li>Macro's van KumaScript bewerken</li> +</ul> + +<h2 id="De_rol_verlaten">De rol verlaten</h2> + +<p>Als u mentor wordt, hoeft u niet voor altijd in deze rol te blijven. Uw interesses, prioriteiten en beschikbare tijd kunnen veranderen, en dat is oké. Als u voorziet dat u niet kunt doorgaan als mentor (of als u zich realiseert dat u al bent gestopt), neem dan de volgende stappen:</p> + +<ul> + <li>Neem contact op met <a href="https://developer.mozilla.org/en-US/profiles/sheppy">Eric Shepherd</a>, de documentatieleider van MDN, om hem te laten weten dat u uw rol als mentor neerlegt.</li> + <li>Vraag, indien mogelijk, een andere actieve medewerker binnen uw onderwerp om de mentorrol op zich te nemen. Als deze persoon hiermee akkoord gaat, laat dat dan weten aan de documentatieleider van MDN.</li> +</ul> + +<p>Als u twee maanden niet actief bent geweest op MDN (of op het MDN discussieforum) kan het zijn dat er contact met u wordt opgenomen om te bevestigen dat u wil doorgaan met mentor zijn. Mentors die drie maanden inactief zijn, of niet binnen een redelijke tijd reageren wanneer er contact met hen wordt opgenomen, kunnen uit hun rol worden gezet.</p> diff --git a/files/nl/mdn/community/rollen/topic_driver_role/index.html b/files/nl/mdn/community/rollen/topic_driver_role/index.html new file mode 100644 index 0000000000..567eece8c6 --- /dev/null +++ b/files/nl/mdn/community/rollen/topic_driver_role/index.html @@ -0,0 +1,82 @@ +--- +title: Onderwerpbestuurdersrol +slug: MDN/Community/Rollen/Topic_driver_role +tags: + - Gemeenschap + - Gids + - MDN Meta + - Rollen +translation_of: MDN/Community/Roles/Topic_driver_role +--- +<div>{{MDNSidebar}}</div><p>Een MDN-onderwerpbestuurder coördineert en leidt activiteiten met betrekking tot documentatie op MDN voor een bepaald onderwerp. Ze blijven op de hoogte van nieuwe ontwikkelingen binnen hun onderwerp, of het nu gaat om Mozilla, normalisatie-instellingen of andere technologiebedrijven. Ze hoeven niet al het documentatiewerk met betrekking tot hun onderwerp zelf te doen en worden aangemoedigd om een groep van medewerkers te verzamelen die geïnteresseerd is in het topic, en taken te delegeren binnen die groep. Bekijk de pagina <a href="/nl/docs/Project:MDN/Contributing/Topic_drivers">Onderwerpbestuurders</a> voor een lijst van onderwerpen en huidige onderwerpbestuurders.</p> + +<h2 id="Waarom_een_onderwerpbestuurder_zijn">Waarom een onderwerpbestuurder zijn?</h2> + +<p>Als een onderwerpbestuurder hebt u de mogelijkheid om u zich diep onder te dompelen in de gemeenschap en om een grote invloed te hebben op hoe het onderwerp wordt gepresenteerd op MDN. U zou deze expertise kunnen gebruiken bij uw huidige werk, of bij het verkrijgen van een andere baan.</p> + +<p>Daarnaast kunt u als onderwerpbestuurder een drijfveer zijn om de kwaliteit van het web te verbeteren.</p> + +<h2 id="Een_onderwerpbestuurder_worden">Een onderwerpbestuurder worden</h2> + +<p>Om een onderwerpbestuurder te worden voor een onderwerp dat er nog geen heeft, dient u aan bepaalde kwalificaties te voldoen:</p> + +<ul> + <li>Expertise binnen het onderwerp.</li> + <li>Actieve medewerker voor het onderwerp (tenminste een maand).</li> + <li>Het vermogen om te communiceren met een diverse, geografisch gespreide gemeenschap.</li> +</ul> + +<p>Als u voldoet aan de voorwaarden, kunt u een bericht plaatsen op het <a class="external external-icon" href="https://discourse.mozilla-community.org/c/mdn" rel="noopener">MDN discussieforum</a> met daarin dat u graag de bestuurder wil worden van een bepaald onderwerp, met daarbij een uitleg over welk onderwerp u bestuurder zou willen worden en een overzicht van uw kwalificaties. Als u voldoet aan de kwalificaties zullen we u helpen te zorgen dat u klaar bent voor en getraind wordt in de basisbeginselen van hoe u uw nieuwe rechten kunt gebruiken.</p> + +<div class="note"> +<p><strong>Tip:</strong> Als u een onderwerpbestuurder wil worden, zorg dan dat u zich hiernaar gedraagt! Als u er goed in bent, kunt u zeker van zijn dat we u zullen smeken in deze rol te blijven!</p> +</div> + +<h3 id="Een_bestaande_onderwerpbestuurder_helpen">Een bestaande onderwerpbestuurder helpen</h3> + +<p>U kunt nog steeds van belang zijn voor onderwerpen die al onderwerpbestuurders hebben! De meeste onderwerpen zijn zo groot en breed dat het hebben van veel mensen die bijdragen aan de documentatie en voorbeeldcode ontzettend nuttig is. Verschillende perspectieven op een onderwerp zorgt er zelfs dat er veel meer van het onderwerp wordt gedekt.</p> + +<ul> + <li>Voeg nieuwe voorbeelden toe en verbeter voorbeelden die zwak zijn.</li> + <li>Werk artikelen bij op basis van veranderingen in specificaties of implementatiedetails.</li> + <li>Help met het coördineren van discussies op de maillijst.</li> + <li>Help met het controleren van de inhoud op spam, fouten, enzovoort.</li> +</ul> + +<h3 id="Zijn_onderwerpbestuurders_anders_dan_mentors">Zijn onderwerpbestuurders anders dan mentors?</h3> + +<p>Beiden rollen lijken erg op elkaar en hebben vergelijkbare rechten en verantwoordelijkheden. Het verschil zit hem voornamelijk in hun toewijding. Voor een bepaald onderwerp leiden de onderwerpbestuurders de documentatie en hun inhoud, waar mentors de gemeenschap en medewerkers om dat onderwerp heen ondersteunen. De twee rollen vullen elkaar aan en gaan vaak hand in hand.</p> + +<h2 id="Verantwoordelijkheden">Verantwoordelijkheden</h2> + +<p>De rol van onderwerpbestuurder brengt een aantal belangrijke verantwoordelijkheden met zich mee, zoals:</p> + +<ul> + <li>Het volgen van specificaties en implementaties van de technologie om te weten wanneer de documentatie moet worden bijgewerkt.</li> + <li>Het coördineren van de gemeenschap die bijdraagt aan de documentatie van het onderwerp, om te zorgen dat het werk wordt gedaan en dat mensen niet per ongeluk iets twee keer documenteren.</li> + <li>De voortgang en de status van het documentatiewerk delen met de MDN-gemeenschap, door deel te nemen in discussies op het <a class="external external-icon" href="https://discourse.mozilla-community.org/c/mdn" rel="noopener">MDN discussieforum</a>, enzovoort.</li> + <li>Doneer zoveel schrijftijd als voor u mogelijk is; u hoeft het niet allemaal te doen, maar het is handig als u iets kunt doen!</li> +</ul> + +<h2 id="Rechten">Rechten</h2> + +<p>Naast de rechten die beschikbaar zijn voor alle geathenticeerde gebruikers op MDN (zoals het terugdraaien van wijzigingen) hebben onderwerpbestuurders deze aanvullende rechten:</p> + +<ul> + <li>Pagina's of paginatrees verplaatsen</li> + <li>Bestandsbijlagen uploaden en beheren</li> + <li>Macro's van KumaScript bewerken</li> +</ul> + +<h2 id="De_rol_verlaten">De rol verlaten</h2> + +<p>Als u onderwerpbestuurder wordt, hoeft u niet voor altijd in deze rol te blijven. Uw interesses, prioriteiten en beschikbare tijd kunnen veranderen, en dat is oké. Als u voorziet dat u niet kunt doorgaan als onderwerpbestuurder (of als u zich realiseert dat u al bent gestopt), neem dan de volgende stappen:</p> + +<ul> + <li>Neem contact op met <a href="https://developer.mozilla.org/en-US/profiles/sheppy">Eric Shepherd</a>, de documentatieleider van MDN, om hem te laten weten dat u uw rol als onderwerpbestuurder neerlegt.</li> + <li>Vraag, indien mogelijk, een andere actieve medewerker binnen uw onderwerp om de onderwerpbestuurdersrol op zich te nemen. Als deze persoon hiermee akkoord gaat, laat dat dan weten aan de documentatieleider van MDN.</li> +</ul> + +<p>Als u twee maanden niet actief bent geweest op MDN (of op het MDN discussieforum) kan het zijn dat er contact met u wordt opgenomen om te bevestigen dat u wil doorgaan met onderwerpbestuurder zijn. Onderwerpbestuurders die drie maanden inactief zijn, of niet binnen een redelijke tijd reageren wanneer er contact met hen wordt opgenomen, kunnen uit hun rol worden gezet.</p> + +<p> </p> diff --git a/files/nl/mdn/community/samenwerken_in_een_community/index.html b/files/nl/mdn/community/samenwerken_in_een_community/index.html new file mode 100644 index 0000000000..a2256cf365 --- /dev/null +++ b/files/nl/mdn/community/samenwerken_in_een_community/index.html @@ -0,0 +1,102 @@ +--- +title: Samenwerken in een community +slug: MDN/Community/Samenwerken_in_een_community +translation_of: MDN/Community/Working_in_community +--- +<div>{{MDNSidebar}}</div> + +<p>Een groot onderdeel van de bijdrages van MDN documentaties op grote schaal, is het samenwerken en de communicatie in een community. Dit artikel geeft tips om interacties tussen schrijvers en ontwikkelteams beter te maken.</p> + +<h2 id="Algemene_gedragscodes">Algemene gedragscodes</h2> + +<p>Hier zijn een paar algemene gedragscodes wanneer men werkt in de Mozilla Community.</p> + +<ul> + <li>Wees respectvol! Zelfs in onenigheid, we hebben allemaal dezelfde missie: Het beter maken van het Web.</li> + <li>Vragen, niet eisen. Mensen zullen je veel sneller helpen wanneer je netjes en respectvol vraagt dan bij eisen. Terwijl het documentatiewerk belangrijk is, en dit weet ons ontwikkelteam, is het menselijk om onaardig te worden wanneer men niet met respect wordt behandeld.</li> + <li>Balance your need for information with the urgency of the documentation and the time the others in your discussion have to devote to helping you. Don't keep pushing for more and more details if it's not absolutely necessary right away, to the point of driving the others involved in the conversation crazy.</li> + <li>Keep in mind that your request takes valuable time from the people you're contacting, so be sure to use their time well.</li> + <li>Be considerate of cultural differences. Mozilla is a multinational and multicultural team, so when talking to someone whose culture is, or may be, different from your own, be sure to keep that in mind while communicating.</li> + <li>Start a new conversation instead of highjacking an existing conversation. Don't inject your questions into an unrelated conversation just because the people you need to talk to are paying attention to it. While convenient for you, this can irritate the people you're trying to talk to, and result in a less than ideal outcome.</li> + <li>Avoid {{interwiki("wikipedia", "bikeshedding")}}. Don't let your enthusiasm become annoying pedantry. It makes conversations cumbersome and unfocused.</li> +</ul> + +<h2 id="Be_tactful">Be tactful</h2> + +<p>Always be tactful and respectful when communicating with others.</p> + +<h3 id="Politely_pointing_out_mistakes">Politely pointing out mistakes</h3> + +<p>If your purpose in contacting someone is to ask them to do something differently, or to point out a mistake they've been making (especially if they repeatedly do it), start your message with a positive comment. This softens the blow, so to speak, and it demonstrates that you're trying to be helpful, rather than setting you up as the bad guy.</p> + +<p>For example, if a new contributor has been creating lots of pages without tags, and you'd like to point out this problem, your message to them might look like this (the stuff you'd need to change for each case us underlined):</p> + +<blockquote> +<p>Hi, <u>MrBigglesworth</u>, I've been noticing your contributions to <u>the Wormhole API documentation</u>, and it's fantastic to have your help! I particularly like <u>the way you balanced your level of detail with readability</u>. That said, though, you could make these articles even better and more helpful if you <u>added the correct tags to the pages</u> as you go.</p> + +<p><u>See the MDN tagging guide (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) for details.</u></p> + +<p>Thanks again, and I look forward to your future contributions!</p> +</blockquote> + +<h2 id="Sharing_knowledge">Sharing knowledge</h2> + +<p>As you participate in the MDN project, it's useful to know what's going on, and to interact with other members of our community. By talking with others in our community, you can get—and share—ideas, status updates, and more. We also have tools and informational resources that can help you know what's being done, by whom.</p> + +<h3 id="Communication_channels">Communication channels</h3> + +<p>There are several ways you can engage with community members (either developers or writers), each of which has some of its own particular rules of etiquette.</p> + +<h4 id="Bugzilla">Bugzilla</h4> + +<p>When writing documentation to cover changes implemented as a result of a bug in Bugzilla, you'll often interact with people involved in those bugs. Be sure to keep the <a href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html" title="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">Bugzilla Etiquette</a> guide in mind at all times!</p> + +<h4 id="Email">Email</h4> + +<p>Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.</p> + +<div class="note"> +<p><strong>Note:</strong> As a general rule, if someone has posted their email address on documents about the technology you're documenting, has given you their email address personally, or generally has a well-known email address, email is an acceptable "first contact" approach. If you have to dig for it, you probably should try to get permission in IRC or a mailing list first, unless you've exhausted all other attempts at getting in touch.</p> +</div> + +<h3 id="Content_status_tools">Content status tools</h3> + +<p>We have several useful tools that provide information about the status of documentation content.</p> + +<dl> + <dt><a href="/dashboards/revisions">Revision dashboard</a></dt> + <dd>The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Documentation status overview</a></dt> + <dd>Our <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">documentation status overview</a> page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.</dd> + <dt><a href="/en-US/docs/MDN/Plans">Documentation project plans</a></dt> + <dd>We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.</dd> + <dt><a href="https://trello.com/b/HAhl54zz/status">MDN Trello board</a></dt> + <dd>The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read <a href="/en-US/docs/MDN/Contribute/Community/Trello">this page</a>.</dd> +</dl> + +<h2 id="The_development_community">The development community</h2> + +<p>Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!</p> + +<p>In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.</p> + +<p>On a related note, a great way to find the right person to talk to is to look at the <a href="https://wiki.mozilla.org/Modules">module owners lists</a>.</p> + +<h2 id="The_writing_community">The writing community</h2> + +<p>The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.</p> + +<p>See the article <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Join the community</a> for more information about the MDN community.</p> + +<p>The most frequent place you'll directly interact with other writers is in the {{IRCLink("mdn")}} channel on IRC. This channel is specifically reserved for discussing documentation. For IRC-specific etiquette tips, see the Mozilla Support article "<a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/" title="https://quality.mozilla.org/docs/misc/getting-started-with-irc/">Getting Started with IRC</a>." You'll also have discussions with us on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>. In general, IRC tends to be used for quick, more in-person-like discussions, while the mailing list is typically used for longer-duration conversation.</p> + +<p>By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually things go very smoothly.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Deelnemen aan MDN</a></li> + <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">MDN community</a></li> + <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">Hoe een email te verzenden en te beantwoorden</a></li> + <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">Hoe word ik een Mozillian</a></li> +</ul> diff --git a/files/nl/mdn/community/whats_happening/index.html b/files/nl/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..d3daf3b9df --- /dev/null +++ b/files/nl/mdn/community/whats_happening/index.html @@ -0,0 +1,40 @@ +--- +title: Blijf op de hoogte +slug: MDN/Community/Whats_happening +tags: + - Beginner + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Whats_happening +--- +<div>{{MDNSidebar}}</div><p>MDN wordt mede mogelijk gemaakt door de <a href="https://wiki.mozilla.org/MDN">MDN-gemeenschap</a>. Hier is een aantal manieren waarop we informatie delen over wat we doen.</p> + +<h2 id="Blogs">Blogs</h2> + +<dl> + <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> + <dd>Nieuws over en uitgebreide dekking van web- en Mozillatechnologieën en functies.</dd> + <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> + <dd>Het promoten van activiteiten en discussies omtrent de gemeenschap die betrokken is bij MDN van Mozilla.</dd> +</dl> + +<h2 id="Streams_of_ephemera">Streams of ephemera</h2> + +<ul> + <li><a href="http://twitter.com/MozDevNet">@MozDevNet</a>: Interessante pagina's, tutorials, gidsen, oproepen voor inzendingen, belangrijke updates, en ander nieuws over het Mozilla Developer Network.</li> + <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks">@MozHacks</a>: Tweets over nieuwe webtechnologieën, geweldige HTML5-apps en functies in Firefox.</li> + <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> +</ul> + +<h2 id="Statusboards_en_dashboards">Statusboards en dashboards</h2> + +<p>Bekijk de <a href="/nl/docs/MDN/Doc_status">documentatiestatuspagina's</a> om te zien wat er gebeurt over de volledige breedte van de MDN-inhoud. U kunt zien welke artikelen moeten worden geschreven of bijgewerkt, welke onderwerpen de meeste hulp nodig hebben, en nog veel meer.</p> + +<h2 id="MDN-bijeenkomsten">MDN-bijeenkomsten</h2> + +<p>Er is een aantal vaste bijeenkomsten voor het bijhouden en delen van voortgang binnen verschillende MDN-gerelateerde projecten en processen. Ze staan beschreven op de <a href="https://wiki.mozilla.org/MDN/Meetings">wikipagina voor MDN-bijeenkomsten</a>.</p> + +<p>Om een idee te krijgen van wat er gebeurt, is de MDN gemeenschapsbijeenkomst de beste bijeenkomst om bij te wonen. Deze bijeenkomst vindt elke twee weken plaats op woensdag, 10:00 US Pacific time (UTC-0800 Oktober-Maart, UTC-0700 in Maart-Oktober), in het #mdn IRC-kanaal. Bekijk de <a href="https://wiki.mozilla.org/MDN/Meetings">wikipagina voor MDN-bijeenkomsten</a> voor agenda's en notulen van de vorige bijeenkomsten.</p> + +<p>De agenda voor <a class="external text" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com" rel="nofollow">openbare MDN-evenementen</a> bevat gemeenschapsbijeenkomsten van MDN, doc sprints en andere MDN-gerelateerde evenementen. Als u een bijeenkomst ziet die plaatsvindt in het "mdn"-kanaal op uw Vidyo videoconferentiesysteem kunt u <a href="https://v.mozilla.com/flex.html?roomdirect.html&key=gMM1xZxpQgqiQFNkUR3eBuHgxg">het gesprek bijwonen via internet</a>.</p> diff --git a/files/nl/mdn/contribute/feedback/index.html b/files/nl/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..fed6432474 --- /dev/null +++ b/files/nl/mdn/contribute/feedback/index.html @@ -0,0 +1,67 @@ +--- +title: Feedback versturen over MDN +slug: MDN/Contribute/Feedback +tags: + - Documentație + - Gids + - MDN + - MDN Meta +translation_of: MDN/Contribute/Feedback +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Welkom bij MDN! <span class="seoSummary">Als u suggesties voor, of problemen hebt met het gebruik van MDN, bent u op de juiste plek. Het feit dat u bent geïnteresseerd in het geven van feedback maakt u nog belangrijker voor de Mozilla-gemeenschap, en we danken u bij voorbaat voor uw interesse.</span></p> + +<p><span class="seoSummary">Er zijn verschillende manieren om uw inzicht te bieden; dit artikel zal u helpen om dit te doen.</span></p> + +<h2 id="De_documentatie_bijwerken">De documentatie bijwerken</h2> + +<p>In de eerste plaats zou u zich altijd vrij moeten voelen om de documentatie te corrigeren, als u hierin een probleem hebt gevonden.</p> + +<ol> + <li><a href="/nl/docs/MDN/Contribute/Howto/Aanmaken_MDN_account">Meld u aan</a> door middel van <a href="https://github.com/">Github</a>.</li> + <li>Klik op de blauwe <strong>Bewerken</strong>-knop die op elke pagina staat, om de <a href="/nl/docs/MDN/Contribute/Editor">editor</a> te openen.</li> + <li>Klik op de <strong>Publiceren</strong>-knop als u klaar bent met het aanbrengen van wijzigingen.</li> +</ol> + +<p>De documentatie hier staat in een wiki, en wordt beheerd door een team van vrijwilligers en betaalde medewerkers, dus wees niet bang—uw grammatica hoeft niet perfect te zijn. We verbeteren het als u een fout heeft gemaakt; niets aan de hand!</p> + +<p>Ga voor meer informatie over het bijdragen aan MDN-documentatie naar:</p> + +<ul> + <li><a href="/nl/docs/MDN/Getting_started" title="/en-US/docs/Project:Getting_started">Beginnen op MDN</a> voor ideeën over wat u kunt doen.</li> + <li><a href="/nl/docs/MDN/Contribute">Bijdragen aan MDN</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Editor" title="/en-US/docs/Project:MDN_editing_interface">De MDN editorgids</a></li> +</ul> + +<h2 id="Deelnemen_aan_het_gesprek">Deelnemen aan het gesprek</h2> + +<p>Praat met ons! Er is een aantal manieren om in contact te komen met andere mensen die aan de inhoud van MDN werken.</p> + +<h3 id="Synchrone_chat">(Synchrone) chat</h3> + +<p> + </p><h3 id="Asynchrone_discussies">(Asynchrone) discussies</h3> + + +<p>Discussies over de langere termijn worden gehouden op ons <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussieforum</a>. U kunt berichten op het forum plaatsen door een e-mail te sturen naar <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. Als u deelneemt aan het forum kunt u er ook voor kiezen om notificaties te laten sturen via e-mail.</p> + +<h2 id="Problemen_melden">Problemen melden</h2> + +<h3 id="Documentatieproblemen">Documentatieproblemen</h3> + +<p>Als u een probleem ziet in de documentatie en u kunt het om bepaalde redenen niet zelf oplossen, dan kunt u <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&projects=mdn/sprints/2&labels=user-report">het probleem melden</a>! U kunt dit formulier gebruiken voor alle documentatieproblemen, zoals:</p> + +<ul> + <li>een simpele correctie</li> + <li>een aanvraag voor een compleet nieuw stuk inhoud</li> + <li>het melden van ongepaste inhoud (zoals spam en misplaatste vertalingen)</li> +</ul> + +<p>Zoals eerder genoemd nodigen we u uit om zelf de wijzigingen aan te brengen, maar deze manier is ook beschikbaar voor u.</p> + +<h3 id="Siteproblemen">Siteproblemen</h3> + +<p>Als u op problemen met de MDN-website stuit, of als u ideeën hebt voor nieuwe functies, kunt u <a href="https://bugzilla.mozilla.org/form.mdn">een ticket openen voor het ontwikkelteam van MDN</a>.</p> diff --git a/files/nl/mdn/contribute/getting_started/index.html b/files/nl/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..4b7f307efb --- /dev/null +++ b/files/nl/mdn/contribute/getting_started/index.html @@ -0,0 +1,131 @@ +--- +title: Beginnen op MDN +slug: MDN/Contribute/Getting_started +tags: + - Beginner + - Gids + - Introductie + - MDN Meta +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>We zijn een open gemeenschap van ontwikkelaars en schrijvers die middelen bouwen voor een beter internet, ongeacht merk, browser of platform. Iedereen kan bijdragen en iedere persoon die dat doet maakt ons sterker. Samen kunnen we innovatie op het web blijven voortzetten om het algemeen belang te dienen. Het begint hier, met u.</p> + +<p>Elk onderdeel van MDN (van de code die de website laat werken tot de documenten, codevoorbeelden en demo’s) wordt gemaakt door een gemeenschap van ontwikkelaars en schrijvers. Iedereen heeft iets te bieden, en hopelijk doet u met ons mee!</p> + +<h2 id="3_eenvoudige_stappen_naar_MDN">3 eenvoudige stappen naar MDN</h2> + +<p><span class="seoSummary">MDN is een wiki, waarin <strong>iedereen</strong> inhoud kan toevoegen en bewerken. U hoeft geen programmeur te zijn of veel van technologieën te weten. Er zijn genoeg dingen te doen, van eenvoudige taken zoals proeflezen en het corrigeren van typefouten tot de complexere, zoals het schrijven van API-documentatie. Deze handleiding helpt u op weg en begeleidt u bij het vinden van manieren waarop <em>u</em> de inhoud van MDN kunt helpen verbeteren.</span></p> + +<p>Bijdragen is eenvoudig en veilig. Zelfs als u een fout maakt, kan dit makkelijk worden hersteld; als u niet precies weet hoe dingen eruit moeten zien, of als uw grammatica niet helemaal goed is, maak u dan geen zorgen! We hebben een team van mensen wiens taak het is ervoor te zorgen dat de inhoud van MDN zo goed mogelijk is. Er zijn mensen die ervoor zorgen dat uw werk netjes en goed wordt geschreven. Deel wat u weet en volg uw sterke punten, en heb vertrouwen in de rest van de gemeenschap die helpt uw werk nog beter te maken.</p> + +<h3 id="Stap_1_maak_een_account_aan_op_MDN">Stap 1: maak een account aan op MDN</h3> + +<p>Om met uw bijdragen aan MDN te beginnen, dient u een account op MDN te hebben. Voor details, zie <a href="https://developer.mozilla.org/docs/MDN/Contribute/Howto/Create_an_MDN_account">Een MDN-account aanmaken</a>. U hebt een <a href="https://github.com/join">account op GitHub </a>nodig voordat u een account kunt aanmaken op MDN, omdat we GitHub op dit moment gebruiken voor authenticatie.</p> + +<p>Als het maken van nieuwe pagina’s onder uw taken valt, bekijk dan {{SectionOnPage("/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Bevoegdheden voor het maken van pagina’s verkrijgen")}} voor belangrijke informatie over het verkrijgen van bevoegdheden voor het toevoegen van nieuwe pagina’s; om veiligheidsredenen hebben nieuwe accounts deze mogelijkheid niet.</p> + +<h3 id="Stap_2_kies_een_taak">Stap 2: kies een taak</h3> + +<p>Lees, nadat u bent aangemeld, de beschrijvingen van de verschillende taaktypen in {{anch("Mogelijke taaktypen", "de onderstaande lijst")}}, en besluit welke u het meest aantrekkelijk vindt. U kunt elke taak kiezen die u wilt en met uw bijdrage beginnen.</p> + +<h3 id="Stap_3_voer_de_taak_uit">Stap 3: voer de taak uit</h3> + +<p>Zodra u hebt besloten wat voor soort taak u wilt doen, zoekt u een specifieke pagina, codevoorbeeld, etc. om aan te werken, en doet u het gewoon!</p> + +<p>Maak u geen zorgen over een perfecte uitvoering; andere MDN-medewerkers zijn hier om te helpen fouten die erin sluipen te corrigeren. Als u tijdens uw taak vragen hebt, zie dan de pagina <a href="/docs/MDN/Community">Gemeenschap</a> voor informatie over mailinglijsten en chatkanalen waarin u antwoorden kunt krijgen.</p> + +<div class="note"> +<p>Als u met bewerken op MDN wilt experimenteren voordat u ‘echt’ iets gaat doen, hebben we een <strong><a href="/docs/Sandbox">Sandbox</a></strong>-pagina voor u om in te spelen. Beperk uw experimenten tot deze pagina. Breng geen onnodige wijzigingen in inhoudspagina’s aan om alleen te zien wat er gebeurt; dat veroorzaakt rommel die anderen moeten opruimen of, erger nog, lezers verwart die alleen iets proberen te leren of iets opzoeken.</p> +</div> + +<p>Wanneer u klaar bent, bent u vrij om een ander item kiezen, of kijk hieronder voor <a href="#Andere_dingen_die_u_op_MDN_kunt_doen">andere dingen die u op MDN kunt doen</a>.</p> + +<h2 id="Mogelijke_taaktypen">Mogelijke taaktypen</h2> + +<p>Afhankelijk van uw vaardigheden en interesses zijn er meerdere wegen die u kunt bewandelen om aan MDN bij te dragen. Hoewel sommige taken ontmoedigend kunnen zijn, hebben we tal van eenvoudige activiteiten beschikbaar. Veel ervan kosten slechts vijf minuten (of minder!) van uw tijd. Hieronder vindt u, naast de taak en een korte beschrijving ervan, de geschatte tijd die elk type taak doorgaans in beslag neemt.</p> + +<h3 id="Optie_1_ik_hou_van_woorden">Optie 1: ik hou van woorden</h3> + +<p>U kunt ons helpen bestaande documenten te beoordelen of te bewerken, en de juiste labels erop toepassen.</p> + +<ul> + <li><a href="/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">De samenvatting voor een pagina instellen</a> (5-15 minuten)</li> + <li><a href="/docs/MDN/Contribute/Howto/Do_an_editorial_review">Redactionele beoordelingen geven</a> (5–30 minuten)</li> + <li><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Een nieuwe vermelding schrijven in de Woordenlijst</a> (15 minuten-1 uur)</li> + <li><a href="/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Een artikel schrijven om mensen te helpen informeren over het web</a> (1-3 uur)</li> +</ul> + +<div class="note">Als u artikelen wilt beoordelen of nieuwe wilt schrijven, vragen we u de <a href="/docs/MDN/Contribute/Guidelines/Style_guide">Stijlgids</a> te raadplegen. Dit zal u helpen ervoor te zorgen dat artikelen consistent zijn.</div> + +<h3 id="Optie_2_ik_hou_van_code">Optie 2: ik hou van code</h3> + +<p>We hebben meer codevoorbeelden nodig! U kunt ook helpen met het bouwen van ons websiteplatform, <a href="/docs/MDN/Kuma">Kuma</a>!</p> + +<ul> + <li><a href="/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Code converteren om ‘live’ te worden</a> (30 minuten)</li> + <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">De Getting Involved Guide lezen</a> (30 minutes)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Een Kuma-buildomgeving instellen</a> (1 uur)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Uw codepatch naar de Kuma-codebase sturen</a> (1 uur)</li> +</ul> + +<h3 id="Optie_3_ik_hou_zowel_van_woorden_als_van_code">Optie 3: ik hou zowel van woorden als van code</h3> + +<p>We hebben de taken waarvoor zowel technische als taalvaardigheden nodig zijn, zoals het schrijven van nieuwe artikelen, het beoordelen voor technische juistheid, of het aanpassen van documenten.</p> + +<ul> + <li><a href="/docs/MDN/About/Promote">MDN promoten op uw eigen website</a> (5 minuten)</li> + <li><a href="/docs/MDN/Contribute/Howto/Do_a_technical_review">Technische beoordelingen geven</a> (30 minuten)</li> + <li><a href="/docs/Contribute_to_docs_that_are_currently_needed">Een artikel schrijven over een onderwerp dat momenteel nodig is</a> (1 uur of meer)</li> + <li><a href="/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Een interactieve oefening maken om mensen te helpen informeren over het web</a> (1 uur of meer)</li> + <li><a href="/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Een documentatiebug verhelpen</a> in de <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN-categorie in Bugs Ahoy</a> (1 uur of meer)</li> +</ul> + +<h3 id="Optie_4_ik_wil_MDN_in_mijn_taal">Optie 4: ik wil MDN in mijn taal</h3> + +<p>Al het lokalisatie- en vertaalwerk op MDN wordt door onze geweldige gemeenschap van vrijwilligers gedaan.</p> + +<ul> + <li><a href="/docs/MDN/Contribute/Localize/Translating_pages">Pagina’s vertalen</a> (2 uur) (Zie <a href="/nl/docs/MDN/Doc_status/l10nPriority">topprioriteiten</a>)</li> + <li>Contact maken met andere vertalers die in <a href="/docs/MDN/Contribute/Localize/Localization_projects">Lokalisatieprojecten</a> zijn vermeld (30 minuten)</li> +</ul> + +<h3 id="Optie_5_ik_vond_wat_verkeerde_informatie_maar_weet_niet_hoe_ik_het_in_orde_kan_maken">Optie 5: ik vond wat verkeerde informatie maar weet niet hoe ik het in orde kan maken</h3> + +<p>U kunt problemen melden door <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">een documentatiebug te melden</a>. (5 minuten)</p> + +<p>Gebruik deze veldwaarden:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Bugzilla-veld</strong></td> + <td><strong>Waarde</strong></td> + </tr> + <tr> + <td><code>product</code></td> + <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Developer Documentation</a></td> + </tr> + <tr> + <td><code>component</code></td> + <td>[kies een omgeving die juist is voor het onderwerp, of ‘General’ als u het niet zeker weet of de juiste niet ziet]</td> + </tr> + <tr> + <td><code>URL</code></td> + <td>De pagina waarop u het probleem vond</td> + </tr> + <tr> + <td><code>Description</code></td> + <td>Zo veel als u over het probleem weet of tijd hebt om het te beschrijven en waar de juiste informatie is te vinden. Dit kan zowel mensen (‘praat met die en die’) als webkoppelingen bevatten.</td> + </tr> + </tbody> +</table> + +<h2 id="Andere_dingen_die_u_op_MDN_kunt_doen">Andere dingen die u op MDN kunt doen</h2> + +<ul> + <li><a href="/docs/MDN/Community">Neem deel aan de MDN-gemeenschap</a>.</li> + <li><a href="/profile">Vul uw profiel in</a>, zodat anderen meer over u te weten kunnen komen.</li> + <li>Lees meer over <a href="/docs/MDN/Contribute">bijdragen aan MDN</a>.</li> +</ul> diff --git a/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html b/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html new file mode 100644 index 0000000000..cc50327400 --- /dev/null +++ b/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html @@ -0,0 +1,48 @@ +--- +title: Een account op MDN aanmaken +slug: MDN/Contribute/Howto/Aanmaken_MDN_account +tags: + - Aanmelden + - Beginner + - Documentație + - Gids + - GitHub + - Profiel +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div><p>Om wijzigingen aan te brengen in de inhoud van MDN is een MDN-profiel nodig. Voor het lezen van en zoeken in de MDN-documentatie hebt u geen profiel nodig. Deze gids helpt u om uw MDN-profiel aan te maken.</p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p><strong>Waarom heeft MDN mijn e-mailadres nodig?</strong></p> + +<p>Het e-mailadres wordt gebruik om uw account te herstellen. Indien nodig kan het beheer van MDN contact met u opnemen over uw account of uw activiteit op de site.</p> + +<p>Daarnaast kunt u zich aanmelden voor notificaties (bijvoorbeeld <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Watch_a_page">wanneer bepaalde pagina's worden aangepast</a>) en berichten (bijvoorbeeld als u zich hebt aangemeld voor het beta-testteam en u nieuwe e-mails wilt ontvangen over nieuwe functies die moeten worden getest).</p> + +<p>Het e-mailadres wordt nooit getoond op MDN en wordt alleen gebruikt overeenkomstig ons <a href="https://www.mozilla.org/privacy/websites/">privacybeleid</a>.</p> + +<p> </p> + +<div class="note">U ontvangt <em><strong>geen</strong></em> berichten of notificaties van MDN als u inlogt op MDN via GitHub en u daar een "noreply"-e-mailadres gebruikt.</div> +</div> +</div> + +<ol> + <li>Op MDN bevindt zich bovenaan elke pagina een knop <strong>Aanmelden met</strong>. Door de muisaanwijzer erboven te houden (of door hem aan te raken op een mobiel toestel) verschijnt er een lijst met authenticatiemethoden die worden ondersteund door MDN.</li> + <li>Selecteer een methode om in te loggen. Op dit moment is alleen GitHub beschikbaar. Als u GitHub selecteert, zal een link naar uw profiel op GitHub worden weergegeven op uw openbare profielpagina op MDN.</li> + <li>Volg de aanwijzingen van GitHub om uw account te verbinden met MDN.</li> + <li>Als de authenticatiedienst u laat terugkeren naar MDN, wordt u gevraagd om een gebruikersnaam en een e-mailadres in te voeren. <em>De gebruikersnaam wordt openbaar getoond om u te prijzen voor uw werk. Gebruik geen e-mailadres als gebruikersnaam.</em></li> + <li>Klik <strong>Creëer mijn MDN-profiel</strong>.</li> + <li>Als het e-mailadres dat u hebt ingevoerd bij stap 4 niet hetzelfde is als het e-mailadres dat u gebruikt bij de authenticatiedienst, controleer dan uw e-mail en klik op de link in de bevestigings-e-mail die we u sturen.</li> +</ol> + +<p>Dat is alles! U hebt nu een MDN account en kunt onmiddellijk beginnen met het bewerken van pagina's!</p> + +<p>U kunt bovenaan elke pagina van MDN klikken op uw naam om uw openbaar profiel te zien. Daar vandaan kunt u op <strong>Bewerken</strong> klikken om uw profiel te veranderen of iets toe te voegen aan uw profiel..</p> + +<p> </p> + +<div class="note"> +<p>Nieuwe gebruikersnamen mogen geen spaties of het karakter "@" bevatten. Denk eraan dat uw gebruikersnaam openbaar wordt getoond om u te prijzen voor uw werk.</p> +</div> diff --git a/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html b/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html new file mode 100644 index 0000000000..38785c1f26 --- /dev/null +++ b/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html @@ -0,0 +1,57 @@ +--- +title: Een redactionele beoordeling geven +slug: MDN/Contribute/Howto/Een_redactionele_beoordeling_geven +tags: + - Documentație + - Gids + - Hoe kan ik + - MDN-Meta + - Redactionele beoordeling +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p class="summary"><strong>Redactionele beoordelingen</strong> bestaan uit het corrigeren van typefouten en spelling, grammatica, gebruik of tekstuele fouten in een artikel. U hoeft geen taalexpert te zijn om waardevolle bijdragen te doen aan de technische documentatie van MDN, maar artikelen hebben nog steeds controlewerk en moeten worden proefgelezen. Dit wordt in een redactionele beoordeling gedaan.</p> + +<p><span class="seoSummary">Dit artikel beschrijft hoe u een redactionele beoordeling kunt geven, wat ervoor zorgt dat de inhoud op MDN accuraat is.</span></p> + +<dl> + <dt>Wat houdt de taak in?</dt> + <dd>Controlewerk (‘copy-editing’) en proeflezen (‘proof-reading’) van artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.</dd> + <dt>Waar dient dit te worden gedaan?</dt> + <dd>Binnen bepaalde artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.</dd> + <dt>Wat dient u te weten om de taak te vervullen?</dt> + <dd>U dient goede vaardigheden op het gebied van Nederlandse grammatica en spelling te hebben. Een redactionele beoordeling zorgt ervoor dat de grammatica, spelling en het woordgebruik juist en logisch zijn, en dat de <a href="/nl/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN-schrijfstijlgids</a> wordt gevolgd.</dd> + <dt>Wat zijn de stappen om dit te doen?</dt> + <dd> + <ol> + <li>Kies een artikel voor beoordeling: + <ol> + <li>Ga naar de lijst van <a href="/nl/docs/needs-review/editorial">artikelen die een redactionele beoordeling nodig hebben</a>. Deze vermeldt alle pagina’s waarvoor een redactionele beoordeling is aangevraagd.</li> + <li>Klik op het artikel om de pagina te laden.<br> + <strong>Merk op: </strong>Deze lijst wordt automatisch maar niet regelmatig gegenereerd, waardoor er artikelen in de lijst verschijnen die geen redactionele beoordeling meer nodig hebben. Als het artikel dat u hebt geselecteerd <em>geen</em> vak weergeeft waarin 'Dit artikel heeft een redactionele beoordeling nodig' staat, sla het artikel dan over en kies een andere.</li> + <li>Klik op de artikelkoppeling om de pagina te laden.</li> + </ol> + </li> + <li>Lees het artikel en let goed op typefouten, spelling, grammatica of gebruiksfouten. Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet geschikt voor u is.</li> + <li>Als er geen fouten zijn, hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het veld voor ‘snelle beoordeling’ in de linkerzijbalk van de pagina:<br> + <img alt="Schermafbeelding van het zijbalkveld voor het beoordelingsverzoek" src="https://mdn.mozillademos.org/files/15668/redactionele_beoordeling.png" style="height: 146px; width: 318px;"></li> + <li>Deselecteer het vakje <strong>Redactioneel</strong> en klik op <strong>Opslaan</strong>.</li> + <li>Als u fouten vindt die dienen te worden gecorrigeerd: + <ol> + <li>Klik boven in de pagina op de knop <strong>Bewerken</strong>; dit brengt u naar de <a href="/nl/docs/MDN/Contribute/Editor">MDN-editor</a>.</li> + <li>Corrigeer eventuele typefouten en spelling, grammatica of gebruiksfouten die u tegenkomt. U hoeft niet alles te corrigeren om nuttig te zijn, maar zorg ervoor dat het verzoek voor redactionele beoordeling actief blijft als u niet helemaal zeker weet of u een volledige controle van het hele artikel hebt gedaan.</li> + <li>Voer onder in het artikel een <strong>Revisieopmerking</strong> in; zoiets als ‘<em>Redactionele beoordeling: typefouten, grammatica en spelling gecorrigeerd</em>’. Dit laat andere medewerkers en website-editors weten wat u hebt gewijzigd en waarom.</li> + <li>Deselecteer het vakje <strong>Redactioneel</strong> onder <strong>Beoordeling nodig?</strong> Dit bevindt zich net onder de sectie Revisieopmerking van de pagina.</li> + <li>Klik op de knop <strong>Publiceren</strong>.</li> + </ol> + </li> + </ol> + + <div class="note"> + <p>Mogelijk zijn uw wijzigingen niet meteen zichtbaar na het opslaan; er kan een vertraging zijn bij het verwerken en opslaan van de pagina.</p> + </div> + </dd> +</dl> diff --git a/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html b/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html new file mode 100644 index 0000000000..119e15a9d2 --- /dev/null +++ b/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html @@ -0,0 +1,56 @@ +--- +title: Een technische beoordeling geven +slug: MDN/Contribute/Howto/Een_technische_beoordeling_maken +tags: + - Beoordeling + - Documentație + - Gids + - MDN Meta +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p class="summary"><strong>Een technische beoordeling</strong> bestaat uit het beoordelen van de technische nauwkeurigheid en volledigheid van een artikel, en het corrigeren hiervan als het nodig is. Als een schrijver van een artikel iemand anders wil vragen om de technische inhoud van een artikel te controleren, klikt diegene op het vakje met de naam 'Technische beoordeling' tijdens het bewerken. Vaak neemt een schrijver contact op met een specifieke technicus om de tekst te laten beoordelen, maar iedereen met technische kennis kan dit doen.</p> + +<p><span class="seoSummary">Dit artikel beschrijft hoe een technische beoordeling kan worden gedaan, die helpt te zorgen dat de inhoud op MDN nauwkeurig is.</span></p> + +<dl> + <dt>Wat is de taak?</dt> + <dd>Het beoordelen en corrigeren van artikelen op technische nauwkeurigheid en volledigheid.</dd> + <dt>Waar moet dit worden gedaan?</dt> + <dd>In specifieke artikelen die zijn gemarkeerd als het behoeven van een <a href="/nl/docs/needs-review/technical">technische beoordeling</a>.</dd> + <dt>Wat moet u weten om de taak te kunnen uitvoeren?</dt> + <dd> + <ul> + <li>Vakkundige kennis over het onderwerp van het artikel dat u beoordeelt. Als het lezen van het artikel u geen nieuwe kennis bijbrengt, kunt u zichzelf beschouwen als een expert.</li> + <li>Hoe u een wiki-artikel op MDN kunt bewerken.</li> + </ul> + </dd> + <dt>Stappenplan</dt> + <dd> + <ol> + <li>Kies een artikel om te beoordelen: + <ol> + <li>Ga naar de lijst met pagina's die een <a href="/nl/docs/needs-review/technical">technische beoordeling</a> nodig hebben. Op deze lijst staan alle pagina's waar technische beoordelingen voor zijn aangevraagd.</li> + <li>Kies een pagina met een onderwerp waar u bekend mee bent.</li> + <li>Klik op het artikel om de pagina te laden.</li> + </ol> + </li> + <li>Lees het artikel, waarbij u goed let op de technische details: Is het artikel correct? Mist er iets? Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet bij u past.</li> + <li>Als er geen fouten zijn hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het vak 'snelle beoordeling' aan de linkerkant van de pagina. Dit gele vak geeft alle beoordelingen weer die in behandeling zijn. Hier kunt u een beoordeling als voltooid markeren. Als er om een technische beoordeling is gevraagd, ziet dat er als volgt uit:<br> + <img alt="Screenshot van een vak aan de linkerkant van de pagina, waarin de beoordelingen staan die moeten worden uitgevoerd en waar markeringen kunnen worden gewijzigd." src="https://mdn.mozillademos.org/files/15667/technische_beoordeling.png" style="height: 145px; width: 317px;"></li> + <li>Verwijder de selectie van het vakje <strong>Technisch</strong> en klik op <strong>Opslaan</strong>.</li> + <li>Als u fouten vindt die moeten worden gecorrigeerd is het ook mogelijk om de status van de beoordelingsaanvraag te wijzigen in de editor. U kunt dat als volgt doen: + <ol> + <li>Klik op de knop <strong>Bewerken</strong> bovenaan de pagina om de pagina te bewerken. Hiermee gaat u naar de <a href="/nl/docs/MDN/Contribute/Editor">editor van MDN</a>.</li> + <li>Herstel alle informatie die niet correct is, en/of voeg belangrijke informatie toe die mist.</li> + <li>Vul een <strong>revisieopmerking</strong> onderaan het artikel. Dit is een kort bericht dat beschrijft wat u hebt gedaan, zoals '<em>Technische beoordeling voltooid.</em>' Als u informatie hebt gecorrigeerd, kunt u dat noemen in uw opmerking, bijvoorbeeld '<em>Technische beoordeling en parameterbeschrijvingen hersteld.'</em> Hierdoor weten andere medewerkers en websitebewerkers wat u hebt gewijzigd en waarom. U kunt ook noemen of er specifieke stukken waren waarvoor u zich niet deskundig genoeg voelde om het te beoordelen.</li> + <li>Verwijder de selectie van het vakje <strong>Technisch</strong> onder <strong>Beoordeling nodig?</strong> onder het gedeelte van de pagina waarin u een revisieopmerking kunt schrijven.</li> + <li>Klik op de knop <strong>Publiceren</strong>.</li> + </ol> + </li> + </ol> + + <p>Gefeliciteerd! U hebt uw eerste technische beoordeling gedaan! Bedankt voor uw hulp!</p> + </dd> +</dl> diff --git a/files/nl/mdn/contribute/howto/index.html b/files/nl/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..9dde7488b1 --- /dev/null +++ b/files/nl/mdn/contribute/howto/index.html @@ -0,0 +1,14 @@ +--- +title: Doe-het-zelfgidsen +slug: MDN/Contribute/Howto +tags: + - Landing + - MDN + - MDN Meta +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Deze artikelen verstrekken gidsen die u stap voor stap helpen met het bereiken van specifieke doelen tijdens het bijdragen aan MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/mdn/contribute/howto/tag/index.html b/files/nl/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..d8a523d18f --- /dev/null +++ b/files/nl/mdn/contribute/howto/tag/index.html @@ -0,0 +1,432 @@ +--- +title: How to properly tag pages +slug: MDN/Contribute/Howto/Tag +translation_of: MDN/Contribute/Howto/Tag +--- +<div>{{MDNSidebar}}</div><p>One important feature of MDN that helps users find content is the <strong>article tag</strong>. Each page can be tagged with zero or more tags <span style="line-height: 1.572;">(preferably at least one)</span><span style="line-height: 1.572;"> to help categorize the content. <span class="seoSummary">There are many ways tags are used to help organize information on MDN; this page will help you learn how to best tag pages to help information be organized, sorted, and located by readers.</span></span></p> +<p>For a guide to the user interface for editing tags on pages, see the <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> in our editor guide.</p> +<p>Note that proper use of tags is important; we are increasingly using automation to generate lists of content, landing pages, and cross-linking of articles. Failure to properly tag articles as indicated below can prevent articles from being listed correctly.</p> +<h2 id="Ways_tags_are_used_on_MDN">Ways tags are used on MDN</h2> +<p>There are several ways tags get used on MDN:</p> +<dl> + <dt> + Categorization</dt> + <dd> + What type of document is it? Is it a reference? A tutorial? A landing page? These can be used when filtering searches, so they're really important!</dd> + <dt> + Topic identification</dt> + <dd> + What topic does the article cover? Is it about an API? The DOM? Graphics? These, too, are important, because they can be used as filters on searches.</dd> + <dt> + Technology status</dt> + <dd> + What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?</dd> + <dt> + Skill level</dt> + <dd> + For tutorials and guides, how advanced is the material covered by the article?</dd> + <dt> + Document metadata</dt> + <dd> + The writing community often needs a way to track information about pages in need of specific kinds of work. This is done using tags.</dd> +</dl> +<h2 id="Tag_type_guide">Tag type guide</h2> +<p>Here's a quick guide to the types of tags and possible values for them.</p> +<h3 id="Category">Category</h3> +<p>Tagging an article with one of these categories will help automatically constructed landing pages, table of contents pages, and the like be more accurately built. These terms will also be used by our new search system, eventually, to let the user locate reference or guide information by their choice.</p> +<p>The following category names are standard tagging terms used on MDN.</p> +<dl> + <dt> + <code>{{Tag("Intro")}}</code></dt> + <dd> + The article provides introductory material about a topic. In theory there should be only one of these per technology area.</dd> + <dt> + <code>{{Tag("Featured")}}</code></dt> + <dd> + The article is a high-importance article that should be featured in a special way on landing pages; this must be used sparingly. Only three or fewer of these should exist in any documentation area.</dd> + <dt> + <code>{{Tag("Reference")}}</code></dt> + <dd> + The article contains reference material about an API, element, attribute, property, or the like.</dd> + <dt> + <code>{{Tag("Landing")}}</code></dt> + <dd> + The page is a landing page.</dd> + <dt> + <code>{{Tag("Guide")}}</code></dt> + <dd> + The article is a how-to or guide page.</dd> + <dt> + <code>{{Tag("Example")}}</code></dt> + <dd> + The article is a code sample page, or has code samples. This shouldn't be used for very one-liner "syntax examples" but actual snippets of useful code, or for full usable samples.</dd> +</dl> +<h3 id="Topic">Topic</h3> +<p>By identifying the article's topic area, you can also help to generate better search results as well as landing pages and other navigational aids.</p> +<p>While there's some room for flexibility here as new topic areas are identified, we try to keep these to the names of APIs or technologies. Some useful examples:</p> +<ul> + <li><code>{{Tag("HTML")}}</code></li> + <li><code>{{Tag("CSS")}}</code></li> + <li><code>{{Tag("JavaScript")}}</code> (notice the capital "S"!)</li> + <li><code>{{Tag("Document")}}</code></li> + <li><code>{{Tag("DOM")}}</code></li> + <li><code>{{Tag("API")}}</code> for each interface, method and property.</li> + <li><code>{{Tag("Method")}}</code> for each method of an API</li> + <li><code>{{Tag("Property")}}</code> for each property of an API</li> + <li><code>{{Tag("Graphics")}}</code></li> + <li><code>{{Tag("Firefox OS")}}</code></li> + <li><code>{{Tag("Gecko")}}</code></li> + <li><code>{{Tag("XUL")}}</code></li> + <li><code>{{Tag("XPCOM")}}</code></li> + <li><code>{{Tag("SVG")}}</code></li> + <li><code>{{Tag("WebGL")}}</code></li> + <li><code>{{Tag("Element")}}</code></li> + <li><code>{{Tag("Node")}}</code></li> + <li><code>{{Tag("Tools")}}</code></li> + <li><code>{{Tag("Web")}}</code></li> +</ul> +<p>In general, the name of an interface that has a number of related pages, such as <a href="/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a> (which has many pages for its various properties and methods) makes a good topic identification tag, as does the name of an overall technology or technology type. A page about WebGL might be tagged with <code>Graphics</code> and <code>WebGL</code>, for example, while a page about the {{HTMLElement("canvas")}} element might be tagged <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, and <code>Graphics</code>.</p> +<h3 id="Technology_status">Technology status</h3> +<p>To help the reader understand how viable a technology is, we use tags to label pages as to what the status of the technology's specification is. This isn't as detailed as actually explaining what the spec is and where in the specification process the technology is (that's what the Specifications table is for), but it will help the reader judge, at a glance, whether using the technology described in the article is a good idea or not.</p> +<p>Here are possible values for these tags:</p> +<dl> + <dt> + <code>{{Tag("Non-standard")}}</code></dt> + <dd> + Indicates that the technology or API described on the page is not part of a standard, but is considered stable in the browser or browsers that do implement it. If you don't use this tag, the assumption is made that the article covers something that's standard. The compatibility table on the page should clarify which browser(s) support this technology or API.</dd> + <dt> + <code>{{Tag("Deprecated")}}</code></dt> + <dd> + The technology or API covered on the page has been marked as deprecated in the specification, and is expected to eventually be removed, but is generally still available in current versions of browsers.</dd> + <dt> + <code>{{Tag("Obsolete")}}</code></dt> + <dd> + The technology or API has been deemed obsolete and has been removed (or is actively in the process of being removed) from all or most current browsers.</dd> + <dt> + <code>{{Tag("Experimental")}}</code></dt> + <dd> + The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard.</dd> + <dt> + <code>{{Tag("Needs Privileges")}}</code></dt> + <dd> + The API requires privileged access to the device on which the code is running.</dd> + <dt> + <code>{{Tag("Certified Only")}}</code></dt> + <dd> + The API only works in certified code.</dd> +</dl> +<p>Regardless of the use of these tags, you should be sure to include a <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">compatibility table</a> in your article!</p> +<h3 id="Skill_level">Skill level</h3> +<p>The skill level tag type is only used for guides and tutorials (that is, pages tagged <code>Guide</code>). It's used to help users whittle down tutorials based on their familiarity level with a technology, for example. There are three values for this:</p> +<dl> + <dt> + <code>{{Tag("Beginner")}}</code></dt> + <dd> + Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.</dd> + <dt> + <code>{{Tag("Intermediate")}}</code></dt> + <dd> + Articles for users that have gotten started with the technology but aren't experts.</dd> + <dt> + <code>{{Tag("Advanced")}}</code></dt> + <dd> + Articles about stretching the capabilities of a technology and of the reader.</dd> +</dl> +<h3 id="Document_metadata">Document metadata</h3> +<p>The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:</p> +<dl> + <dt> + <code>{{Tag("junk")}}</code></dt> + <dd> + The article needs to be deleted.</dd> + <dt> + <code>{{Tag("NeedsContent")}}</code></dt> + <dd> + The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.</dd> + <dt> + <code>{{Tag("NeedsExample")}}</code></dt> + <dd> + The article needs one or more examples created to help illustrate the article's point. These examples should use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt> + <code>{{Tag("NeedsLiveSamples")}}</code></dt> + <dd> + The article has one or more examples that need to be updated to use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd> + <dt> + <code>{{Tag("NeedsUpdate")}}</code></dt> + <dd> + The content is out of date and needs to be updated.</dd> + <dt> + <code>{{Tag("l10n:exclude")}}</code></dt> + <dd> + The content is not really worth localizing and will not appear on localization status pages.</dd> + <dt> + <code>{{Tag("l10n:priority")}}</code></dt> + <dd> + The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.</dd> +</dl> +<h3 id="Web_Literacy_Map">Web Literacy Map</h3> +<p>The <a href="https://webmaker.org" rel="external">WebMaker</a> project, through the <a href="https://webmaker.org/literacy" rel="external">Web Literacy Map</a>, has defined a set of tags to qualify the various competencies and skills recommended to get better at reading, writing and participating on the Web. We use them on MDN to help our users to find the best resources to suit their needs:</p> +<dl> + <dt> + {{Tag("Navigation")}}</dt> + <dd> + The articles provides information on how to browse the web.</dd> + <dt> + {{Tag("WebMechanics")}}</dt> + <dd> + The article provides information on how the web is organized and how it's working.</dd> + <dt> + {{Tag("Search")}}</dt> + <dd> + The article provides information on how to locate information, people and resources via the web.</dd> + <dt> + {{Tag("Credibility")}}</dt> + <dd> + The article provides information on how to critically evaluate information found on the web.</dd> + <dt> + {{Tag("Security")}}</dt> + <dd> + The article provides information on how to keep systems, identities, and content safe.</dd> + <dt> + {{Tag("Composing")}}</dt> + <dd> + The article provides information on how to create and curate content for the web.</dd> + <dt> + {{Tag("Remixing")}}</dt> + <dd> + The article provides information on how to modify existing web ressources to create something new.</dd> + <dt> + {{Tag("DesignAccessibility")}}</dt> + <dd> + The article provides information on how to create universally effective communications through web ressources.</dd> + <dt> + {{Tag("CodingScripting")}}</dt> + <dd> + The article provides information on how to code and/or create interactive experiences on the web.</dd> + <dt> + {{Tag("infrastructure")}}</dt> + <dd> + The article provides information which help understanding the Internet technical stack.</dd> + <dt> + {{Tag("Sharing")}}</dt> + <dd> + The article provides information on how to create resources with others.</dd> + <dt> + {{Tag("Collaborating")}}</dt> + <dd> + The article provides information on how to work with each other.</dd> + <dt> + {{Tag("Community")}}</dt> + <dd> + The article provides information on how to get involved in web communities and understanding their practices.</dd> + <dt> + {{Tag("Privacy")}}</dt> + <dd> + The article provides information on how to examine the consequences of sharing data online.</dd> + <dt> + {{Tag("OpenPracticies")}}</dt> + <dd> + The article provides information on how to help keep the web universally accessible.</dd> +</dl> +<h2 id="Putting_it_all_together">Putting it all together</h2> +<p>So, with these different types of tags, you assemble them together to get the full set of tags for a page. A few examples:</p> +<dl> + <dt> + A tutorial about WebGL for beginners</dt> + <dd> + Appropriate tags would be: <code>WebGL</code>, <code>Graphics</code>, <code>Guide</code>, <code>Beginner</code></dd> + <dt> + Reference page for the {{HTMLElement("canvas")}} element</dt> + <dd> + This should be tagged with <code>Canvas</code>, <code>HTML</code>, <code>Element</code>, <code>Graphics</code> <code>Reference</code></dd> + <dt> + A landing page for Firefox OS developer tools</dt> + <dd> + This should be tagged with <code>Tools</code>, <code>Firefox OS</code>, <code>Landing</code></dd> +</dl> +<h2 id="Tagging_and_search_filters">Tagging and search filters</h2> +<p>The upcoming search filter implementation, which will let users restrict the results of their searches based on criteria they specify, will rely on proper tagging of pages on MDN. Here's a table of the various search filters and which tags they look for.</p> +<div class="note"> + <p><strong>Note:</strong> If multiple tags are listed under "Tag name," that means any one or more of those tags need to be present for the article to match.</p> +</div> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Filter group</th> + <th scope="col">Search filter name</th> + <th scope="col">Tag name</th> + </tr> + </thead> + <tbody> + <tr> + <th>Topic</th> + <td>Open Web Apps</td> + <td>{{Tag("Apps")}}</td> + </tr> + <tr> + <th> </th> + <td>HTML</td> + <td>{{Tag("HTML")}}</td> + </tr> + <tr> + <th> </th> + <td>CSS</td> + <td>{{Tag("CSS")}}</td> + </tr> + <tr> + <th> </th> + <td>JavaScript</td> + <td>{{Tag("JavaScript")}}</td> + </tr> + <tr> + <th> </th> + <td>APIs and DOM</td> + <td>{{Tag("API")}}</td> + </tr> + <tr> + <th> </th> + <td>Canvas</td> + <td>{{Tag("Canvas")}}</td> + </tr> + <tr> + <th> </th> + <td>SVG</td> + <td>{{Tag("SVG")}}</td> + </tr> + <tr> + <th> </th> + <td>MathML</td> + <td>{{Tag("MathML")}}</td> + </tr> + <tr> + <th> </th> + <td>WebGL</td> + <td>{{Tag("WebGL")}}</td> + </tr> + <tr> + <th> </th> + <td>XUL</td> + <td>{{Tag("XUL")}}</td> + </tr> + <tr> + <th> </th> + <td>Marketplace</td> + <td>{{Tag("Marketplace")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox</td> + <td>{{Tag("Firefox")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox for Android</td> + <td>{{Tag("Firefox Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox for Desktop</td> + <td>{{Tag("Firefox Desktop")}}</td> + </tr> + <tr> + <th> </th> + <td>Firefox OS</td> + <td>{{Tag("Firefox OS")}}</td> + </tr> + <tr> + <th> </th> + <td>Mobile</td> + <td>{{Tag("Mobile")}}</td> + </tr> + <tr> + <th> </th> + <td>Web Development</td> + <td>{{Tag("Web Development")}}</td> + </tr> + <tr> + <th> </th> + <td>Add-ons & Extensions</td> + <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td> + </tr> + <tr> + <th> </th> + <td>Games</td> + <td>{{Tag("Games")}}</td> + </tr> + <tr> + <th>Skill level</th> + <td>I'm an Expert</td> + <td>{{Tag("Advanced")}}</td> + </tr> + <tr> + <th> </th> + <td>Intermediate</td> + <td>{{Tag("Intermediate")}}</td> + </tr> + <tr> + <th> </th> + <td>I'm Learning</td> + <td>{{Tag("Beginner")}}</td> + </tr> + <tr> + <th>Document type</th> + <td>Docs</td> + <td><em>This will restrict the search to docs content, leaving out Hacks and other MDN content.</em></td> + </tr> + <tr> + <th> </th> + <td>Demos</td> + <td><em>This will include Demo Studio content in the search results.</em></td> + </tr> + <tr> + <th> </th> + <td>Tools</td> + <td>{{Tag("Tools")}}</td> + </tr> + <tr> + <th> </th> + <td>Code Samples</td> + <td>{{Tag("Example")}}</td> + </tr> + <tr> + <th> </th> + <td>How-To & Tutorial</td> + <td>{{Tag("Guide")}}</td> + </tr> + <tr> + <th> </th> + <td>Developer Profiles</td> + <td><em>This will include developer profiles from the MDN site in the search results.</em></td> + </tr> + <tr> + <th> </th> + <td>External Resources</td> + <td><em>This is something the dev team will need to figure out.</em></td> + </tr> + </tbody> +</table> +<h2 id="Tagging_problems_you_can_fix">Tagging problems you can fix</h2> +<p>There are several types of problems with tags you can help fix:</p> +<dl> + <dt> + No tags</dt> + <dd> + All articles should have at least one tag, and usually more than one. Generally, at a minimum, articles should have at least a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Category" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Categories">category</a>" tag and a "<a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic">topic</a>" tag. Often other tags are appropriate as well, but if you can help us ensure that at least these are present, you'll be a documentation hero!</dd> + <dt> + Tags that don't follow our tagging standards</dt> + <dd> + We have a <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Tagging standards</a> guide that explains how we use tags, including lists of appropriate tags to use on various types of documentation. Ideally, all articles should follow these standards, so if you see a page whose tags don't do so, please fix it!</dd> + <dt> + Incorrect tags</dt> + <dd> + If you're looking at an article about HTML and it's got the "JavaScript" tag on it, that's probably wrong! Similarly, if an article is about Mozilla internals but has the "Web" tag on it, that's probably wrong too. Remove these tags (and, if missing, add the right ones). This type of problem includes misspelled tags. "JavaScript" or "Javascript" for example (the latter actually will match, since tags are case-insensitive, but it's just not right!).</dd> + <dt> + Missing tags</dt> + <dd> + If an article has some tags, but not all of the appropriate ones, feel free to add more. Maybe you're looking at a page in the JavaScript reference, which is correctly tagged with "JavaScript" but has no other tags. Since it's a reference page, this should also have the "Reference" tag. You're invited to add it!</dd> + <dt> + Tag spam</dt> + <dd> + This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the tags for a page, leaving a page with tags like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time". These need to be deleted posthaste!</dd> +</dl> +<p>If you see one (or more) of these problems, you can help by <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">logging into MDN</a>, then clicking the Edit button at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p> diff --git a/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html b/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html new file mode 100644 index 0000000000..ce57acb2f4 --- /dev/null +++ b/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html @@ -0,0 +1,74 @@ +--- +title: JavaScript-pagina’s taggen +slug: MDN/Contribute/Howto/Taggen_JavaScript_pagina +tags: + - Guide + - Howto + - JavaScript + - MDN Meta +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +<div>{{MDNSidebar}}</div><p class="summary"><strong>Taggen</strong> bestaat uit het toevoegen van meta-informatie aan pagina’s, zodat gerelateerde inhoud kan worden gegroepeerd, bijvoorbeeld in het zoekhulpmiddel.</p> + +<dl> + <dt><strong>Waar moet dit worden gedaan?</strong></dt> + <dd>Binnen specifieke <a href="/nl/docs/Web/JavaScript/Doc_status#No_tags">JavaScript-gerelateerde pagina’s zonder labels</a>.</dd> + <dt><strong>Wat dient u te weten om de taak uit te voeren?</strong></dt> + <dd>Basiskennis over programmeren met JavaScript, zoals weten wat een methode of een eigenschap is.</dd> + <dt><strong>Wat zijn de stappen om het te doen?</strong></dt> + <dd> + <ol> + <li>Kies een van de pagina’s in de lijst hierboven.</li> + <li>Klik op de artikelkoppeling om de pagina te laden.</li> + <li>Klik zodra de pagina is geladen op de knop <strong>BEWERKEN</strong> bovenaan het artikel; hierdoor komt u in de MDN-editor.</li> + <li>Op zijn minst dient het label <code>JavaScript</code> te worden toegevoegd. Mogelijke andere labels om toe te voegen zijn: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Label</th> + <th scope="col">Pagina’s om het op te gebruiken</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Method (Methode)</code></td> + <td>methoden</td> + </tr> + <tr> + <td><code>Property (Eigenschap)</code></td> + <td>eigenschappen</td> + </tr> + <tr> + <td><code>prototype (prototype)</code></td> + <td>prototypen</td> + </tr> + <tr> + <td>Object type name (type objectnaam)</td> + <td>methoden van een object; String.vanCharCode dient bijvoorbeeld het label <code>String</code> te bevatten.</td> + </tr> + <tr> + <td><code>ECMAScript6</code> en <code>Experimental (ECMAScript6 en experimenteel)</code></td> + <td>functies toegevoegd in een nieuwe ECMAScript-versie</td> + </tr> + <tr> + <td><code>Deprecated (afgeschaft)</code></td> + <td>afgeschafte functies (waarvan het gebruik wordt afgeraden, maar die nog steeds worden ondersteund)</td> + </tr> + <tr> + <td><code>Obsolete (verouderd)</code></td> + <td>verouderde functies (die niet meer in moderne browsers worden ondersteund)</td> + </tr> + <tr> + <td>others (andere)</td> + <td>Zie <a href="/nl/docs/Project:MDN/Contributing/Tagging_standards">MDN-labelstandaarden</a> voor andere mogelijke labels die kunnen worden toegepast</td> + </tr> + </tbody> + </table> + </li> + <li>Sla het artikel op met een opmerking.</li> + <li>U bent klaar!</li> + </ol> + </dd> +</dl> + +<p> </p> diff --git a/files/nl/mdn/contribute/index.html b/files/nl/mdn/contribute/index.html new file mode 100644 index 0000000000..c9001bd4ed --- /dev/null +++ b/files/nl/mdn/contribute/index.html @@ -0,0 +1,19 @@ +--- +title: Bijdragen aan MDN +slug: MDN/Contribute +tags: + - Gids + - Landing + - MDN + - MDN Meta +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Welkom! Door deze pagina te bezoeken hebt u de eerste stap gezet naar het worden van een medewerker op MDN!</p> + +<p><span class="seoSummary">De gidsen die hier genoemd zijn, gaan over alle aspecten van het bijdragen aan MDN, zoals stijlgidsen, gidsen voor het gebruiken van onze editor en gereedschappen, en nog meer. Zorg ervoor dat u de <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">voorwaarden van Mozilla</a> hebt gelezen en ermee akkoord gaat voordat u begint met het bewerken of aanmaken van pagina's.</span></p> + +<p>Als u nog niet eerder hebt bijgedragen aan MDN, kan het artikel <a href="/nl/docs/MDN/Getting_started">Beginnen op MDN</a> u helpen om een taak te kiezen waarmee u wilt helpen.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/nl/mdn/contribute/localize/index.html b/files/nl/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..6457148500 --- /dev/null +++ b/files/nl/mdn/contribute/localize/index.html @@ -0,0 +1,56 @@ +--- +title: MDN lokaliseren +slug: MDN/Contribute/Localize +tags: + - Documentație + - MDN + - TopicStub + - l10n +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>MDN wordt wereldwijd gebruikt als naslagwerk en leidraad voor webtechnologieën en voor interne onderdelen van Firefox zelf. Onze lokalisatiegemeenschappen zijn een essentieel onderdeel van het Mozillaproject; hun aandeel in het vertalen en lokaliseren van onze documentatie helpt mensen over de hele wereld met het ontwikkelen voor het open web. Dit is de plek om te beginnen als u meer wilt leren over onze lokalisatieteams, wilt deelnemen aan één van de teams of zelfs een nieuwe lokalisatie wilt beginnen.</p> + +<h2 id="Soorten_lokalisatie_op_MDN">Soorten lokalisatie op MDN</h2> + +<p>Lokalisatie op MDN omvat drie aspecten, die verschillende systemen of toegangsrechten vereisen:</p> + +<dl> + <dt>Gebruikersinterface van de MDN-website</dt> + <dd>De strings die op elke MDN-pagina (in ieder geval de meeste pagina's) worden weergeven, om de inhoud van het hoofdartikel te omlijsten en te voorzien in navigatie en gebruikerscontrole. Deze strings worden vertaald in het MDN-project door middel van <a href="/nl/docs/Mozilla/Localization/Localizing_with_Pontoon">Pontoon</a>, dat is ontwikkeld door Mozilla. Als uw taalgebied niet beschikbaar is voor MDN, moet een beheerder dit inschakelen. Bekijk hiervoor het artikel <a href="/nl/docs/MDN/Contribute/Localize/Starting_a_localization">Een nieuwe MDN-lokalisatie starten</a>.</dd> + <dt>Inhoud van MDN</dt> + <dd>Het hoofdgedeelte van MDN-pagina's, die naslagwerk, gidsen of tutorials bevatten. Artikelen kunnen worden vertaal met de <a href="/nl/docs/MDN/Contribute/Localize/Translating_pages">ingebouwde vertaalinterface van MDN</a>. Als uw taalgebied niet beschikbaar is in de lijst van taalgebieden waarnaar kan worden vertaald, bekijk dan het artikel <a href="/nl/docs/MDN/Contribute/Localize/Starting_a_localization">Een nieuwe MDN-lokalisatie starten</a>.</dd> + <dt>Macro-strings</dt> + <dd>Deze strings worden opgebouwd uit <a href="/nl/docs/MDN/Contribute/Structures/Macros">macrosjablonen</a> die bepaalde soorten navigatie, berichten of gegenereerde structuren bouwen. Sjablonen kunnen doordringende en mogelijk vernietigende effecten hebben. Veranderingen voor macro's worden daarom gedaan door middel van <a href="/nl/docs/MDN/Contribute/Tools/Template_editing">pull requests en beoordelingen.</a></dd> +</dl> + +<p>De volgende pagina's geven meer informatie over lokalisatie op MDN:</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Lokalisatiegemeenschappen_op_MDN">Lokalisatiegemeenschappen op MDN</h2> + +<p>Lokalisatie-activiteiten op MDN worden verricht door zowel individuen die afzonderlijk van elkaar werken, als groepen die samenwerken, waarschijnlijk als onderdeel van een grotere lokalisatiegemeenschap binnen Mozilla. Lokalisatieprojecten worden geleid door een l<strong>okalisatiebestuurders.</strong></p> + +<ul> + <li><a href="/nl/docs/MDN/Contribute/Localize/Localization_projects">Lokalisatieprojecten</a></li> + <li><a href="/nl/docs/MDN/Community/Rollen/Localization_driver_role">Lokalisatiebestuurdersrol</a></li> +</ul> + +<h2 id="Lokalisatiegereedschappen">Lokalisatiegereedschappen</h2> + +<p>Er zijn verschillende handige gereedschappen die u kunt gebruiken tijdens het lokaliseren:</p> + +<dl> + <dt><a href="/nl/docs/Mozilla/Localization/Localizing_with_Pontoon" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Pontoon</a></dt> + <dd>Wordt gebruikt voor het vertalen van strings over meerdere projecten van Mozilla, waartoe ook de gebruikersinterface van MDN en Firefox behoren.</dd> + <dt><a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd>Een hulpprogramma dat wordt verstrekt door de Franse gemeenschap van Mozilla. Met dit programma kunt u zoeken op de aanwezigheid van een Engelse string. Het programma zoekt dan de verschillende vertalingen die door heel Mozilla worden gebruikt in een gekozen taalgebied. Dit is handig wanneer u op zoek bent naar de gewenste vertaling voor woorden en zinnen.</dd> +</dl> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="/nl/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Lokalisatie bij Mozilla</a></li> +</ul> diff --git a/files/nl/mdn/contribute/localize/localization_projects/index.html b/files/nl/mdn/contribute/localize/localization_projects/index.html new file mode 100644 index 0000000000..c41dc7fc01 --- /dev/null +++ b/files/nl/mdn/contribute/localize/localization_projects/index.html @@ -0,0 +1,1097 @@ +--- +title: Lokalisatieprojecten +slug: MDN/Contribute/Localize/Localization_projects +tags: + - Gemeenschap + - Lokalisatie + - MDN Meta + - Referentie + - l10n +translation_of: MDN/Contribute/Localize/Localization_projects +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Al het lokalisatie- en vertaalwerk op MDN wordt gedaan door een geweldige gemeenschap van vrijwilligers. Dit artikel toont alle lokalisatieprojecten, sommige vanhun active medewerkers, en andere details.</span></p> + +<p>Als u wil beginnen met vertalen, bekijk dan het artikel <a href="/nl/docs/MDN/Contribute/Localize/Translating_pages">MDN-pagina's vertalen</a>.</p> + +<div class="note"> +<p><strong>Opmerking:</strong> Voel u vrij om uw naam toe te voegen aan deze pagina als u wil dat er contact met u wordt opgenomen door andere medewerkers over inspanningen in een bepaald taalgebied. Zorg ervoor dat uw MDN-profiel een manier toont waarop er contact met u kan worden opgenomen, zoals Twitter, of andere sociale media. Namen op deze pagina zijn samengesteld om mensen te verwijderen die in de afgelopen 12 maanden niet hebben bijgedragen aan MDN.</p> +</div> + +<details><summary> +<h2 id="af_Afrikaans">af: Afrikaans</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/af/dashboards/revisions?locale=af">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:af">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/af/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ar_العربية_Arabisch">ar: العربية [Arabisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ar/dashboards/revisions?locale=ar">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ar">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/ar/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="az_Azərbaycanca_Azerbeidzjaans">az: Azərbaycanca [Azerbeidzjaans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/az/dashboards/revisions?locale=az">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:az">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/az/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="bg_БългарскиBulgaars">bg: Български[Bulgaars]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/bg/dashboards/revisions?locale=bg">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li><a href="https://pontoon.mozilla.org/bg/contributors/">Huidige medewerkers</a></li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:bg">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>How to help</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/bg/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="bm_Bamanankan_Bambara">bm: Bamanankan [Bambara]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/bm/dashboards/revisions?locale=bm">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:bm">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/bm/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="bn-BD_বাংলা_(বাংলাদেশ)_Bengalees_Bangladesh">bn-BD: বাংলা (বাংলাদেশ) [Bengalees, Bangladesh]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/bn-BD/dashboards/revisions?locale=bn-BD">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:bn-BD">Lokalisatieproject op Mozilla</a></li> + <li><a href="https://developer.mozilla.org/bn-BD/docs/Project:MDN/%E0%A6%85%E0%A6%AC%E0%A6%A6%E0%A6%BE%E0%A6%A8/mozillabd-l10n-team">MDN teampagina</a></li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/bn_BD/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="bn-IN_বাংলা_(ভারত)_Bengalees_India">bn-IN: বাংলা (ভারত) [Bengalees, India]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/bn-IN/dashboards/revisions?locale=bn-IN">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:bn-IN">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>How to help</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/bn-IN/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ca_Català_Catalaans">ca: Català [Catalaans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ca/dashboards/revisions?locale=ca">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ca">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ca/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="cs_Čeština_Tsjechisch">cs: Čeština [Tsjechisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/cs/dashboards/revisions?locale=cs">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:cs">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/cs/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="de_Deutsch_Duits">de: Deutsch [Duits]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/de/dashboards/revisions?locale=de">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/de/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers: {{userlink("fscholz")}}{{ref('*')}}, {{userlink("SebastianZ","Sebastian Zartner")}}, {{userlink("Shidigital")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:de">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/de/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ee_Eʋe_Ewe">ee: Eʋe [Ewe]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ee/dashboards/revisions?locale=ee">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li>Lokalisatieproject op Mozilla</li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ee/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="el_Ελληνικά_Grieks">el: Ελληνικά [Grieks]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/el/dashboards/revisions?locale=el">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:el">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/el/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="es_Español_Spaans">es: Español [Spaans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/es/dashboards/revisions?locale=es">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/es/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers: {{userlink("maedca","Manuel Camacho")}}{{ref('*')}}, {{userlink("StripTM")}}, {{userlink("Jorge.villalobos")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:es">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li><a href="https://developer.mozilla.org/es/docs/Project%3AGu%C3%ADa_de_estilo">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/es/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="fa_فارسی_Perzisch">fa: فارسی [Perzisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/fa/dashboards/revisions?locale=fa">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/fa/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers:</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:fa">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/fa/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ff_Pulaar-Fulfulde_Fula">ff: Pulaar-Fulfulde [Fula]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ff/dashboards/revisions?locale=ff">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ff">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ff/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="fi_suomi_Fins">fi: suomi [Fins]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/fi/dashboards/revisions?locale=fi">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:fi">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/fi/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="fr_Français_Frans">fr: Français [Frans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/fr/dashboards/revisions?locale=fr">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li><a href="http://mozfr.org/mailman/listinfo/moz-fr/">Discussies (moz-fr mailiing list)</a></li> + <li>Huidige medewerkers: {{userlink("Jeremie","Jeremie Patonnier")}}{{ref('*')}}, {{userlink("SphinxKnight", "Sphinx")}}{{ref('*')}}, {{userlink("BenoitL","Benoit Leseul")}}, {{userlink("tregagnon","Thierry Régagnon (tregagnon)")}}, {{userlink("Goofy")}}, {{userlink("Delapouite")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:fr">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/fr/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="fy-NL_Frysk_(Nederland)_Fries">fy-NL: Frysk (Nederland) [Fries]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/fy-NL/dashboards/revisions?locale=fy-NL">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:fy-NL">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/fy-NL/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ga-IE_Gaelige_(Ierland)_Gaelisch">ga-IE: Gaelige (Ierland) [Gaelisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ga-IE/dashboards/revisions?locale=ga-IE">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ga-IE">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ga-IE/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ha_Hausa">ha: Hausa</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ha/dashboards/revisions?locale=ha">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ha">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ha/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="he_עברית_Hebreeuws">he: עברית [Hebreeuws]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/he/dashboards/revisions?locale=he">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:he">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/he/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="hi-IN_हिन्दी_(भारत)_Hindi">hi-IN: हिन्दी (भारत) [Hindi]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/hi-IN/dashboards/revisions?locale=hi-IN">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:hi-IN">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/hi-IN/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="hr_Hrvatski_Kroatisch">hr: Hrvatski [Kroatisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/hr/dashboards/revisions?locale=hr">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:hr">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/hr/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="hu_magyar_Hongaars">hu: magyar [Hongaars]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/hu/dashboards/revisions?locale=hu">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:hu">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/hu/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="id_Bahasa_Indonesia_Indonesisch">id: Bahasa Indonesia [Indonesisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/id/dashboards/revisions?locale=id">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:id">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/id/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ig_Igbo">ig: Igbo</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ig/dashboards/revisions?locale=ig">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ig">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ig/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="it_Italiano_Italiaans">it: Italiano [Italiaans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ig/dashboards/revisions?locale=it">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/it/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies: <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=en&rurl=translate.google.com&sl=auto&tl=en&u=http://forum.mozillaitalia.org/&usg=ALkJrhhzVkkb--9tarnQhoYRv6OonR79Tg">Mozilla Italia</a></li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:it">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li><a href="/it/MDN/Contribute/Localize/GuidaItaliano">Helpen op MDN</a></li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/it/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ja_日本語_Japans">ja: 日本語 [Japans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ja/dashboards/revisions?locale=ja">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies: <a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">Mozilla.translations.ja</a></li> + <li>Huidige medewerkers: {{userlink("myakura","myakura (Masataka Yakura)")}}, {{userlink("yyss")}}, {{userlink("Marsf","Marsf (Masahiko Imanaka)")}}, {{userlink("Masayuki")}}, {{userlink("dynamis","dynamis (Tomoya Asai)")}}, {{userlink("mantaroh")}}, {{userlink("hamasaki")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ja">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN: We doen er wat langer over om over te gaan op nieuwe bronnen. <a href="https://developer.mozilla.org/ja/docs/Project:%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88">MDC Japan Project</a> (-2009) bevat nuttige informatie.</li> + <li><a href="/ja/docs/MDN/Contribute/Content/Writing_style_guide">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/ja/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ka_ქართული_Georgisch">ka: ქართული [Georgisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ka/dashboards/revisions?locale=ka">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ka">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ka/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="kab_Taqbaylit_Kabylisch">kab: Taqbaylit [Kabylisch]</h2> +</summary> + +<ul> + <li><a href="https://l10n.mozilla-community.org/webdashboard/?locale=kab">Statusoverzicht van Mozilla-lokalisatie</a></li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:kab">Kabylisch lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/kab/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ko_한국어_Koreaans">ko: 한국어 [Koreaans]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ko/dashboards/revisions?locale=ko">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies: <a href="https://groups.google.com/forum/#!forum/mdckorea">mdckorea</a></li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ko">Lokalisatieproject op Mozilla</a></li> + <li><a href="/ko/docs/Project:Korean_Contributors">MDN teampagina</a></li> + <li>Helpen op MDN</li> + <li><a href="/ko/docs/MDN/Contribute/Content/Style_guide">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/ko/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ln_Lingála_Lingala">ln: Lingála [Lingala]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ln/dashboards/revisions?locale=ln">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li>Lokalisatieproject op Mozilla</li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ln/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="mg_Malagasy_Malagasi">mg: Malagasy [Malagasi]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/mg/dashboards/revisions?locale=mg">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:mg">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/mg/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ml_മലയാളം_Malayalam">ml: മലയാളം [<span class="mw-headline" id="Malayalam_.28ml.2C_ml_IN.29">Malayalam]</span></h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ml/dashboards/revisions?locale=ml">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ml">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ml/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ms_Melayu_Maleis">ms: Melayu [Maleis]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ms/dashboards/revisions?locale=ms">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ms">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ms/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="my_မြန်မာဘာသာ_Birmaans_Myanmar">my: မြန်မာဘာသာ [Birmaans, Myanmar]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/my/dashboards/revisions?locale=my">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:my">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/my/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="nl_Nederlands_Nederlands">nl: Nederlands [Nederlands]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/nl/dashboards/revisions?locale=nl">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:nl">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/nl/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="pl_Polski_Pools">pl: Polski [Pools]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/pl/dashboards/revisions?locale=pl">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/pl/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:pl">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/pl/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="pt-BR_Português_(do_Brasil)_Portugees_Brazilië">pt-BR: Português (do Brasil) [Portugees, Brazilië]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/pt-BR/dashboards/revisions?locale=pt-BR">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:pt-BR">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li><a href="http://mzl.la/Odmaq9">Helpen op MDN</a></li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/pt-BR/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="pt-PT_Português_(Europeu)_Portugees_Portugal">pt-PT: Português (Europeu) [Portugees, Portugal]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/pt-PT/dashboards/revisions?locale=pt-PT">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:pt-PT">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/pt-PT/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ro_română_Roemeens">ro: română [Roemeens]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ro/dashboards/revisions?locale=ro">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ro">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ro/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ru_Русский_Russisch">ru: Русский [Russisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ru/dashboards/revisions?locale=ru">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies</li> + <li>Huidige medewerkers: {{userlink("bychekRU","Victor Bychek")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ru">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li><a href="/ru/docs/Project%3AWriter's_guide">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/ru/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="son_Soŋay_Songhai">son: Soŋay [Songhai]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/son/dashboards/revisions?locale=son">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:son">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/son/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="sr_Српски_Servisch">sr: Српски [Servisch]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/sr/dashboards/revisions?locale=sr">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers:</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:sr">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/sr/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="sq_Shqip_Albanees">sq: Shqip [Albanees]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/sq/dashboards/revisions?locale=sq">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:sq">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/sq/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="sv-SE_Svenska_Zweeds">sv-SE: Svenska [Zweeds]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/sv-SE/dashboards/revisions?locale=sv-SE">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:sv-SE">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/sv-SE/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="sw_Kiswahili_Swahili">sw: Kiswahili [Swahili]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/sw/dashboards/revisions?locale=sw">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:sw">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/sw/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="ta_தமிழ்_Tamil">ta: தமிழ் [Tamil]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ta/dashboards/revisions?locale=ta">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ta">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/ta/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="te_తెలుగు_Telugu">te: తెలుగు [Telugu]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/ta/dashboards/revisions?locale=te">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:te">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/te/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="th_ไทย_Thais">th: ไทย [Thais]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/th/dashboards/revisions?locale=th">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:th">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/th/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="tl_Tagalog">tl: Tagalog</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/tl/dashboards/revisions?locale=tl">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:tl">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/tl/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="tn_Setswana_Tswana">tn: Setswana [Tswana]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/tn/dashboards/revisions?locale=tn">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:tn">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/tn/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="tr_Türkçe_Turks">tr: Türkçe [Turks]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/tr/dashboards/revisions?locale=tr">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:tr">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li><a href="https://pontoon.mozilla.org/tr/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="uk_Українська_Oekraïens">uk: Українська [Oekraïens]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/uk/dashboards/revisions?locale=uk">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers: {{userlink("asmforce", "asmforce (Крутько Віталій)")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:uk">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/uk/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="vi_Tiếng_Việt_Vietnamees">vi: Tiếng Việt [Vietnamees]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/vi/dashboards/revisions?locale=vi">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://pontoon.mozilla.org/vi/mdn/">De MDN-interface vertalen</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventions</li> + <li>Translate the MDN interface</li> +</ul> +</details> + +<details><summary> +<h2 id="wo_Wolof">wo: Wolof</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/wo/dashboards/revisions?locale=wo">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:wo">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/wo/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="xh_isiXhosa_Xhosa">xh: isiXhosa [Xhosa]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/xh/dashboards/revisions?locale=xh">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:xh">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/xh/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="yo_Yorùbá_Yoruba">yo: Yorùbá [Yoruba]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/yo/dashboards/revisions?locale=yo">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:yo">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/yo/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="zh-CN_中文_(简体)_Chinees_vereenvoudigd">zh-CN: 中文 (简体) [Chinees, vereenvoudigd]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/dashboards/revisions?locale=zh-CN">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies: {{page("/zh-CN/docs/MDN/Contribute/Localize/Localization_projects", "notes")}}</li> + <li>Huidige medewerkers: {{page("/zh-CN/docs/MDN/Contribute/Localize/Localization_projects", "leader")}}{{ref('*')}}; see the team page for other contributors.</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:zh-CN">Lokalisatieproject op Mozilla</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/MDN/Contribute/Localize/Localization_projects">MDN teampagina</a></li> + <li>Helpen op MDN</li> + <li><a href="/zh-CN/docs/MDN/Contribute/Content/Style_guide">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/zh-CN/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="zh-TW_中文_(繁體)_Chinees_traditioneel">zh-TW: 中文 (繁體) [Chinees, traditioneel]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/zh-TW/dashboards/revisions?locale=zh-TW">Laatste wijzigingen</a></li> + <li><a href="https://developer.mozilla.org/zh-TW/docs/MDN/Doc_status/Overview">Statusoverzicht</a></li> + <li>Discussies: We hebben meer medewerkers nodig, neem contact met ons op via de MozTW-general mailinglijst！</li> + <li>Huidige medewerkers: {{userlink("irvinfly")}}{{ref('*')}}, {{userlink("BobChao")}}, {{userlink("petercpg")}}</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:zh-TW">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li><a href="/zh-TW/docs/MDN/Contribute/Content/Style_guide">Conventies</a></li> + <li><a href="https://pontoon.mozilla.org/zh-TW/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<details><summary> +<h2 id="zu_isiZulu_Zoeloe">zu: isiZulu [Zoeloe]</h2> +</summary> + +<ul> + <li><a href="https://developer.mozilla.org/zu/dashboards/revisions?locale=zu">Laatste wijzigingen</a></li> + <li>Statusoverzicht</li> + <li>Discussies</li> + <li>Huidige medewerkers</li> + <li><a href="https://wiki.mozilla.org/L10n:Teams:zu">Lokalisatieproject op Mozilla</a></li> + <li>MDN teampagina</li> + <li>Helpen op MDN</li> + <li>Conventies</li> + <li><a href="https://pontoon.mozilla.org/zu/mdn/">De MDN-interface vertalen</a></li> +</ul> +</details> + +<p>The <a href="/nl/docs/MDN/Community/Roles/Localization_driver_role">lokalisatieleider</a> is gemarkeerd met {{ref('*')}}. Dit de persoon die een lokalisatiegemeenschap op MDN leidt, door hen te begeleiden in het lokaliseren van inhoud voor een specifiek taalgebied of onderwerp.</p> + +<h2 id="Andere_taalgebieden">Andere taalgebieden</h2> + +<p>Dit zijn taalgebieden die niet zijn aangemaakt op MDN, maar waar wel interesse in zou kunnen zijn. Zie See <a href="/nl/docs/MDN/Contribute/Localize/Starting_a_localization">Een nieuwe lokalisatie starten</a> als u wilt dat er een nieuw taalgebied wordt aangemaakt.</p> + +<h3 id="gu_ગુજરાતી_Gujarati">gu: ગુજરાતી [Gujarati]</h3> + +<ul> + <li><a href="https://wiki.mozilla.org/L10n:Teams:gu-IN">Lokalisatieproject op Mozilla</a></li> + <li>Geïnteresseerde gebruikers: {{userlink("prafull_satasiya")}}</li> +</ul> + +<h3 id="lo_ພາສາລາວ_Lao">lo: ພາສາລາວ [Lao]</h3> + +<ul> + <li><a href="https://wiki.mozilla.org/L10n:Teams:lo">Lokalisatieproject op Mozilla</a></li> + <li>Geïnteresseerde gebruikers: {{userlink("rcampbelllaos","Robert M Campbell")}}</li> +</ul> + +<h3 id="si_සිංහල_Sinhalese">si: <strong>සිංහල [Sinhalese]</strong></h3> + +<ul> + <li><a href="https://wiki.mozilla.org/L10n:Teams:si">Lokalisatieproject op Mozilla</a></li> + <li>Geïnteresseerde gebruikers: {{userlink("pkavinda")}}</li> +</ul> + +<h3 id="ur_اردو_Urdu">ur: اردو [Urdu]</h3> + +<ul> + <li><a href="https://wiki.mozilla.org/L10n:Teams:ur">Lokalisatieproject op Mozilla</a></li> + <li>Geïnteresseerde gebruikers:</li> +</ul> + +<section id="Quick_Links"> +<ul> + <li><a href="/nl/docs/MDN/Contribute/Localize/Translating_pages">MDN-pagina's vertalen</a></li> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Starting_a_localization">Een nieuwe lokalisatie starten</a></li> + <li><a href="/en-US/docs/Mozilla/Localization">Lokalisatie bij Mozilla</a></li> + <li><a href="/en-US/docs/Mozilla/Localization/Localizing_with_Pontoon">Lokaliseren met Pontoon</a></li> +</ul> +</section> diff --git a/files/nl/mdn/contribute/localize/translating_pages/index.html b/files/nl/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..b68b41ed1a --- /dev/null +++ b/files/nl/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,54 @@ +--- +title: MDN-pagina’s vertalen +slug: MDN/Contribute/Localize/Translating_pages +tags: + - Gids + - Lokalisatie + - MDN-Meta + - Pagina vertaling + - l10n +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div> + +<p>Dit artikel is een basishandleiding voor het vertalen van inhoud op MDN, waaronder zowel het technische gedeelte van het vertaalwerk als tips om op de juiste manier met verschillende soorten inhoud om te gaan.</p> + +<h2 id="Een_nieuwe_vertaling_beginnen">Een nieuwe vertaling beginnen</h2> + +<p>Als u een pagina tegenkomt die u naar uw eigen taal wilt vertalen, volgt u deze stappen:</p> + +<ol> + <li>Klik op het pictogram Talen ({{FontAwesomeIcon("icon-language")}}) om het menu <strong>Talen</strong> te openen, en klik op <strong>Een vertaling toevoegen</strong>. De pagina Talen selecteren verschijnt.</li> + <li>Klik op de taal waarnaar u de pagina wilt vertalen. De weergave Artikel vertalen wordt geopend, waarin de tekst van de oorspronkelijke tekst aan de linkerkant wordt weergegeven.</li> + <li>Onder <strong>Beschrijving vertalen</strong> kunt u de titel en (optioneel) de slug naar de doeltaal vertalen. De slug is het laatste deel van de URL van een pagina (bijvoorbeeld ‘Pagina’s_vertalen’ voor dit artikel). Sommige vertaalcommunity’s vertalen de slug niet en houden deze hetzelfde als in het Engels. Vergelijk met andere artikelen in uw taal om te bepalen wat gebruikelijk is. U kunt op het minteken naast <strong>Beschrijving vertalen</strong> klikken om deze informatie te verbergen zodra u ermee klaar bent, om zo meer ruimte voor de sectie <strong>Inhoud vertalen</strong> te maken.</li> + <li>Onder <strong>Inhoud vertalen</strong> vertaalt u de inhoud van de pagina.</li> + <li>Vul minstens één <strong>label</strong> in voor de pagina.</li> + <li>Klik op <strong>Wijzigingen opslaan</strong> zodra u klaar bent.</li> +</ol> + +<div class="note"><strong>Noot:</strong> de elementen van de gebruikersinterface van de weergave Artikel vertalen worden aanvankelijk in het Engels getoond. Bij latere bezoeken voor het vertalen van een bepaalde pagina wordt de UI in de juiste taal getoond als voor die taal een vertaling van MDN beschikbaar is. De MDN-gebruikersinterface kan worden vertaald via <a href="https://pontoon.mozilla.org/projects/mdn/" title="https://pontoon.mozilla.org/projects/mdn/">Pontoon</a>. Zie <a href="/docs/Mozilla/Localization/Localizing_with_Pontoon" title="/docs/Mozilla/Localization/Localizing_with_Pontoon">Vertalen met Pontoon</a> voor details over het gebruik van dit hulpmiddel.</div> + +<h2 id="Een_vertaalde_pagina_bewerken">Een vertaalde pagina bewerken</h2> + +<ul> + <li>Klik op een vertaalde pagina op de knop <strong>Bewerken</strong> (soms gelabeld in de doeltaal). De weergave Artikel vertalen wordt geopend.</li> +</ul> + +<p>Als de Engelse versie is gewijzigd nadat de vertaling voor het laatst is bijgewerkt, toont de weergave Artikel vertalen een verschil (‘diff’) op bronniveau van de wijzigingen in de Engelse versie. Dit helpt bij het zien van wat er in de vertaling moet worden bijgewerkt.</p> + +<h2 id="Labels_vertalen">Labels vertalen</h2> + +<p>Het is belangrijk dat elke pagina met minstens één label wordt gelabeld, zelfs als dit een vertaling is.</p> + +<p>Sommige labels worden gebruikt voor zoekfilters, of als conventies tussen medewerkers. Deze dienen niet te worden vertaald. Lees de <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">labelstandaarden</a> om te weten welke dit zijn. Het staat u vrij om vertaalde labels te maken om inhoud te groeperen als deze niet door een van de standaardlabels wordt afgedekt.</p> + +<h2 id="Tips_voor_nieuwe_vertalers">Tips voor nieuwe vertalers</h2> + +<p>Als u net bent begonnen met vertalen op MDN, zijn hier enkele suggesties:</p> + +<ul> + <li>Artikelen in de <a href="/en-US/docs/Glossary">Glossary</a> zijn geweldig voor nieuwkomers om te vertalen, omdat ze kort een eenvoudig zijn.</li> + <li>Artikelen die <a href="/en-US/docs/tag/l10n%3Apriority">het label ‘l10n:priority’</a> hebben, worden beschouwd als artikelen met hoge prioriteit voor vertaling. Handleidingen en conceptuele artikelen hebben in het algemeen ook hogere prioriteit dan referentiepagina’s, omdat lezers meer behoefte hebben aan vertalingen bij het leren van nieuwe concepten.</li> + <li>Als u tekst ziet tussen dubbele accolades, zoals <code>\{{wat-tekst("meer tekst")}}</code>, laat deze dan onvertaald in het artikel, en wijzig de interpunctietekens niet. Dit is een <a href="/docs/MDN/Contribute/Structures/Macros">macro</a> die waarschijnlijk een structuur op de pagina maakt, of iets anders nuttigs doet. Mogelijk ziet u onvertaalde tekst die door een macro is gegenereerd; maak u hier geen zorgen over voordat u wat meer ervaring met MDN hebt opgedaan. (Wijzigen van deze tekst vereist <a href="/docs/MDN/Contribute/Tools/Template_editing">speciale bevoegdheden</a>, omdat macro’s erg krachtig kunnen zijn.) Als u nieuwsgierig bent, bekijk dan de <a href="/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">Veelgebruikte macro’s</a> om te zien wat macro’s kunnen doen.</li> + <li>Bekijk de <a href="/docs/MDN/Contribute/Localize/Localization_projects">pagina Vertaalprojecten</a> voor meer info over vertalingen voor uw locale.</li> +</ul> diff --git a/files/nl/mdn/contribute/persona-aanmelding/index.html b/files/nl/mdn/contribute/persona-aanmelding/index.html new file mode 100644 index 0000000000..acaf2c6f39 --- /dev/null +++ b/files/nl/mdn/contribute/persona-aanmelding/index.html @@ -0,0 +1,32 @@ +--- +title: MDN en Persona-aanmeldingen +slug: MDN/Contribute/Persona-aanmelding +tags: + - Documentation + - MDN + - MDN Meta + - Mozilla + - Persona +translation_of: Archive/MDN/Persona_sign-ins +--- +<div>{{MDNSidebar}}</div><div class="warning"> +<p><a href="/docs/MDN/Contribute/Howto/Link_a_GitHub_account">Koppel nu uw GitHub-account aan uw MDN-profiel</a>, zodat u zich bij MDN kunt blijven aanmelden.</p> +</div> + +<p>Op dit moment kunnen medewerkers zich via twee verschillende authenticatieproviders bij MDN aanmelden: Mozilla Persona en GitHub. Op 1 november 2016 zal Persona als optie voor aanmelden worden verwijderd. Om die reden moet u Github-authenticatie in uw profiel inschakelen om te voorkomen dat u geen toegang tot MDN meer hebt.</p> + +<p>We erkennen dat dit ongemak oplevert en verontschuldigen ons hiervoor. Helaas ligt dit buiten onze macht.</p> + +<h2 id="Waarom_wordt_Persona_verwijderd">Waarom wordt Persona verwijderd?</h2> + +<p>Mozilla is gestopt met het Persona-project, en de servers ervan zullen in november 2016 worden uitgezet. U kunt <a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers#FAQs">meer info over Mozilla’s beslissing</a> om Persona te stoppen vinden in de Mozilla-wiki.</p> + +<h2 id="Wanneer_zal_Persona_worden_verwijderd">Wanneer zal Persona worden verwijderd?</h2> + +<p>Persona wordt op 1 november 2016 uitgeschakeld als authenticatieprovider. Met andere woorden, de laatste dag dat u zich via Persona bij MDN kunt aanmelden is 31 oktober 2016. Vanaf nu zullen we steeds regelmatiger en in toenemende mate urgente kennisgevingen voor het <a href="/docs/MDN/Contribute/Howto/Link_a_GitHub_account">toevoegen van een GitHub-account aan uw MDN-profiel</a> uitbrengen. Doe dit zo snel als u kunt om het risico op het verlies van toegang tot uw MDN-account te vermijden.</p> + +<h2 id="Gaat_MDN_een_andere_authenticatieprovider_aanbieden">Gaat MDN een andere authenticatieprovider aanbieden?</h2> + +<p>Dat zouden we heel graag willen doen, maar we hebben nog geen andere provider gevonden die aan onze eisen voldoet. Daarnaast hebben we momenteel geen bronnen voor ontwikkelaars voor het integreren van een andere provider. Voorlopig is uw <em>enige</em> optie voor het behouden van medewerkerstoegang tot MDN het <a href="/docs/MDN/Contribute/Howto/Link_a_GitHub_account">koppelen van uw MDN-profiel aan uw GitHub-account</a>.</p> + +<p>Houd in gedachten dat u zich natuurlijk niet bij MDN hoeft aan te melden om onze inhoud te lezen. Maar als u een account hebt om mee te werken, en als u in de toekomst ooit wilt kunnen meewerken, zorg er dan voor dat u voor 31 oktober 2016 <em><strong>zo snel mogelijk een GitHub-account aan uw profiel toevoegt</strong></em>.</p> diff --git a/files/nl/mdn/contribute/processes/index.html b/files/nl/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..b90f2007c4 --- /dev/null +++ b/files/nl/mdn/contribute/processes/index.html @@ -0,0 +1,14 @@ +--- +title: Documentatieprocessen +slug: MDN/Contribute/Processes +tags: + - Landing + - MDN Meta + - Processen +translation_of: MDN/Contribute/Processes +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Het documentatieproject van MDN is enorm; er is een groot aantal technologieën dat we behandelen met behulp van honderden medewerkers over de hele wereld. Om orde te scheppen in de chaos, hebben we standaard processen die we volgen wanneer we werken aan bepaalde documentatiegerelateerde taken. Hier vindt u de gidsen over deze processen.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html b/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html new file mode 100644 index 0000000000..f7f085ae5b --- /dev/null +++ b/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html @@ -0,0 +1,21 @@ +--- +title: Verhoogde bevoegdheden aanvragen +slug: MDN/Contribute/Processes/Verhoogde_bevoegdheden_aanvragen +tags: + - Gids + - MDN Meta + - Processen +translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges +--- +<div>{{MDNSidebar}}</div><p>Voor sommige hulpmiddelen en handelingen op MDN zijn er verhoogde toegangsbevoegdheden nodig, die niet beschikbaar zijn voor normale gebruikers.</p> + +<p>Als u bevoegdheden wilt of nodig hebt voor een hulpmiddel, volg dan de onderstaande stappen:</p> + +<ol> + <li>Open een <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__standard__&product=Mozilla%20Developer%20Network&component=User%20management">Bugzilla-bug</a>, waarin een beschrijving staat van wat u nodig heeft en waarom u het nodig heeft. Zet uw accountnaam op MDN erbij.</li> + <li>Zorg ervoor dat u uitleg waarom u voldoet aan de voorwaarden voor het verkrijgen van bevoegdheden, voor elk hulpmiddel waar u bevoegdheden voor aanvraagt. Bekijk hiervoor de '<a href="/nl/docs/MDN/Contribute/Tools/Template_editing#Conditions_for_gaining_this_permission">Voorwaarden voor het verkrijgen van deze bevoegdheid</a>' voor het hulpmiddel of de hulpmiddelen in kwestie.</li> + <li>U hebt twee gelijken nodig voor de betreffende tool, die voor u instaan in de bug.</li> + <li>Als aan 1-3 zijn voldaan, kan een van de MDN-admins u toegang geven tot het hulpmiddel dat of de hulpmiddelen die u nodig hebt.</li> +</ol> + +<p>Bij misbruik of een aanzienlijk probleem (zoals een recent ontdekte, gevaarlijke bug in het hulpmiddel) kan elke admin op elk moment de toegang tot een tool opschorten.</p> diff --git a/files/nl/mdn/guidelines/index.html b/files/nl/mdn/guidelines/index.html new file mode 100644 index 0000000000..1545f7aca8 --- /dev/null +++ b/files/nl/mdn/guidelines/index.html @@ -0,0 +1,15 @@ +--- +title: MDN's inhouds- en stijlgidsen +slug: MDN/Guidelines +tags: + - Landing + - MDN + - MDN Meta + - Richtlijnen +translation_of: MDN/Guidelines +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p><span class="seoSummary">Deze gidsen verstrekken details over hoe MDN-documentatie moet worden geschreven en opgemaakt, en hoe onze codevoorbeelden en andere inhoud moet worden gepresenteerd.</span> Door het volgen van de gidsen kunt u ervoor zorgen dat het materiaal dat u maakt, helder is en gemakkelijk is te gebruiken.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/mdn/guidelines/style_guide/index.html b/files/nl/mdn/guidelines/style_guide/index.html new file mode 100644 index 0000000000..92fa1e530b --- /dev/null +++ b/files/nl/mdn/guidelines/style_guide/index.html @@ -0,0 +1,502 @@ +--- +title: MDN style guide +slug: MDN/Guidelines/Style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">In an effort to display documentation in an organized, standardized and easy-to-read manner, the Mozilla Developer Network style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules.</span> We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.</p> + +<p>If you're looking for specifics of how a given type of page should be structured, see the <a href="/en-US/docs/MDN/Contribute/Content/Layout">MDN page layout guide</a>.</p> + +<p>The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) their own style guides. These should be published as subpages of the localization team's page.</p> + +<p>For style standards that apply to content written for sites other than MDN, refer to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p> + +<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Basics</h2> + +<h3 id="Page_titles">Page titles</h3> + +<p>Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<em><locale>/docs/</em>".</p> + +<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4> + +<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "A new method for creating JavaScript rollovers"</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> +</ul> + +<p>We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.</p> + +<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> + +<p>Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.</p> + +<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> + +<h4 id="Creating_new_subtrees">Creating new subtrees</h4> + +<p>When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.</p> + +<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured like this:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> + <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> +</ul> + +<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p> + +<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3> + +<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.</p> + +<p>The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.</p> + +<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> + +<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> + +<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> + +<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> + +<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p> + +<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> + +<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> + +<p>Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p> + +<pre class="brush: js notranslate">if (condition) { + /* handle the condition */ +} else { + /* handle the "else" case */ +} +</pre> + +<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p> + +<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION + || class.YET_ANOTHER_CONDITION ) { + /* something */ +} + +var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] + .createInstance(Components.interfaces.nsIToolkitProfileService); +</pre> + +<h4 id="Inline_code_formatting">Inline code formatting</h4> + +<p>Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p> + +<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> + +<h4 id="Syntax_highlighting">Syntax highlighting</h4> + +<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:</p> + +<div class="line number2 index1 alt1"> +<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> +</div> + +<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> + +<pre class="notranslate">x = 42;</pre> + +<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> + +<p>There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.</p> + +<dl> + <dt>Element names</dt> + <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> + <dt>Attribute names</dt> + <dd>Use <strong>bold face</strong>.</dd> + <dt>Attribute definitions</dt> + <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> + <dt>Attribute values</dt> + <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> + <dt>Labeling attributes</dt> + <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd> +</dl> + +<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> + +<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> + +<ul> + <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="In_running_text" name="In_running_text">In running text</h4> + +<ul> + <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. + <ul> + <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> + <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> + </ul> + </li> +</ul> + +<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Abbrev</th> + <th>Latin</th> + <th>English</th> + </tr> + <tr> + <td>cf.</td> + <td><em>confer</em></td> + <td>compare</td> + </tr> + <tr> + <td>e.g.</td> + <td><em>exempli gratia</em></td> + <td>for example</td> + </tr> + <tr> + <td>et al.</td> + <td><em>et alii</em></td> + <td>and others</td> + </tr> + <tr> + <td>etc.</td> + <td><em>et cetera</em></td> + <td>and so forth, and so on</td> + </tr> + <tr> + <td>i.e.</td> + <td><em>id est</em></td> + <td>that is, in other words</td> + </tr> + <tr> + <td>N.B.</td> + <td><em>nota bene</em></td> + <td>note well</td> + </tr> + <tr> + <td>P.S.</td> + <td><em>post scriptum</em></td> + <td>postscript</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p> +</div> + +<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> + +<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> + +<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: XUL</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> +</ul> + +<h4 id="Expansion" name="Expansion">Expansion</h4> + +<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> +</ul> + +<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> + +<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> +</ul> + +<h3 id="Contractions" name="Contractions">Capitalization</h3> + +<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> + +<h3 id="Contractions" name="Contractions">Contractions</h3> + +<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> + +<h3 id="Pluralization" name="Pluralization">Pluralization</h3> + +<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> +</ul> + +<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> + +<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> + +<ul> + <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> + <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> +</ul> + +<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> + +<h4 id="Dates">Dates</h4> + +<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> +</ul> + +<p>Alternately, you can use the YYYY/MM/DD format.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> +</ul> + +<h4 id="Decades" name="Decades">Decades</h4> + +<p>For decades, use the format "1990s". Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> +</ul> + +<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> + +<p>For plurals of numerals add <em>"s"</em>. Don't use an apostrophe.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 486s</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> +</ul> + +<h4 id="Commas" name="Commas">Commas</h4> + +<p>In running text, use commas only in five-digit and larger numbers.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> +</ul> + +<h3 id="Punctuation" name="Punctuation">Punctuation</h3> + +<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> + +<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> +</div> + +<h3 id="Spelling" name="Spelling">Spelling</h3> + +<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> +</ul> + +<h3 id="Terminology">Terminology</h3> + +<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> + +<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> + +<dl> + <dt>Obsolete:</dt> + <dd>On MDN, the term <strong>obsolete</strong> marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.</dd> + <dt>Deprecated:</dt> + <dd>On MDN, the term <strong>deprecated</strong> marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become <em>obsolete</em> and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.</dd> +</dl> + +<h4 id="HTML_elements">HTML elements</h4> + +<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> +</ul> + +<h4 id="User_interface_actions">User interface actions</h4> + +<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> + +<ul> + <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> + <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> +</ul> + +<h3 id="Voice">Voice</h3> + +<p>While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p> + +<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> + +<h3 id="External_links">External links</h3> + +<p>To automatically create a link to a Bugzilla bug, use this template:</p> + +<pre class="notranslate">\{{Bug(322603)}} +</pre> + +<p>This results in:</p> + +<p>{{Bug(322603)}}</p> + +<p>For WebKit bugs, you can use this template:</p> + +<pre class="notranslate">\{{Webkitbug("322603")}} +</pre> + +<p>This results in:</p> + +<p>{{Webkitbug("322603")}}</p> + +<h3 id="Page_tags">Page tags</h3> + +<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> + +<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> + +<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> + +<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p> + +<p>To remove a tag, simply click the little "X" icon in the tag.</p> + +<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> + +<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p> + +<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> + +<p>Use the following tags for pages that are not current:</p> + +<ul> + <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> + <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> + <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> +</ul> + +<h3 id="SEO_summary">SEO summary</h3> + +<p>The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p> + +<p>By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> + +<h3 id="Landing_pages">Landing pages</h3> + +<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> + +<ol> + <li>A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.</li> + <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> + <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> +</ol> + +<h4 id="Creating_a_page_link_list">Creating a page link list</h4> + +<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> + +<pre class="brush: html notranslate"><div class="row topicpage-table"> + <div class="section"> + ... left column contents ... + </div> + <div class="section"> + ... right column contents ... + </div> +</div></pre> + +<p>The left-hand column should be a list of articles, with an <code><h2></code> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code><dl></code> list of articles, with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> + +<p>The right-hand column should contain one or more of the following sections, in order:</p> + +<dl> + <dt>Getting help from the community</dt> + <dd>This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> + <dt>Tools</dt> + <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd> + <dt>Related topics</dt> + <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> +</dl> + +<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> + +<h2 id="Using_inserting_images">Using, inserting images</h2> + +<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p> + +<ol> + <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> + <li>Create an image in the WYSIWYG editor</li> + <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> + <li>Press OK.</li> +</ol> + +<h2 id="Other_References">Other References</h2> + +<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> + +<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> + +<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> + +<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> + +<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> + +<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> + +<ul> + <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> + <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> +</ul> + +<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> + +<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> + +<ul> + <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> + <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> + <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> + <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> + <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> + <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> + <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> +</ul> diff --git a/files/nl/mdn/index.html b/files/nl/mdn/index.html new file mode 100644 index 0000000000..b31b718772 --- /dev/null +++ b/files/nl/mdn/index.html @@ -0,0 +1,31 @@ +--- +title: Het MDN-project +slug: MDN +tags: + - Landing + - MDN + - MDN Meta +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p><strong>MDN Web Docs</strong> is een wiki waarop we het open Web, technologieën van Mozilla en andere ontwikkelaarsonderwerpen documenteren. Iedereen is welkom om inhoud toe te voegen en te bewerken. U hoeft geen programmeur te zijn of veel te weten van technologie; er zijn veel verschillende taken die moeten worden uitgevoerd, van simpele taken (proeflezen en typfouten corrigeren) tot complexe taken (API-documentatie schrijven).</p> + +<div class="summary"> +<p>De missie van MDN Web Docs is <em>ontwikkelaars</em> van <em>informatie </em>te voorzien die ze nodig hebben om <em>gemakkelijk</em> projecten te bouwen op het <em>webplatform</em>. We nodigen u uit om te helpen!</p> +</div> + +<p>We hebben uw hulp nodig! Het is gemakkelijk. Maak u geen zorgen over het vragen om toestemming of het maken van fouten. Leer echter wel de <a href="/nl/docs/MDN/Community">MDN-gemeenschap</a> kennen; we zijn er om u te helpen! De onderstaande documentatie zou u moeten helpen te beginnen, maar aarzel niet om deel te nemen aan de discussie in <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/nl/docs/MDN/Getting_started">Snelle start voor nieuwkomers</a></span> + + <p>Bent u nieuw bij MDN en wilt u leren hoe u kunt helpen het beter te maken! Begin hier!</p> + </li> + <li><span><a href="/nl/docs/MDN/Contribute">Ik ben een gevorderde gebruiker</a></span> + <p>Raadpleeg onze volledige, grondige gids voor MDN-medewerkers om meer te leren wanneer u gewend bent.</p> + </li> + <li><span><a href="/nl/docs/MDN/Over/Promote">Geef het door</a></span> + <p>Als u van MDN houdt, help dan het door te geven! Hier kunt u illustraties, hulpmiddelen en gidsen vinden voor het promoten van MDN.</p> + </li> +</ul> diff --git a/files/nl/mdn/kuma/index.html b/files/nl/mdn/kuma/index.html new file mode 100644 index 0000000000..8c20ce6be7 --- /dev/null +++ b/files/nl/mdn/kuma/index.html @@ -0,0 +1,27 @@ +--- +title: 'Kuma: MDN’s wiki-platform' +slug: MDN/Kuma +tags: + - Kuma + - Landing + - MDN + - MDN Meta +translation_of: MDN/Kuma +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Kuma is de Django-code die MDN Web Docs mogelijk maakt.</p> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Meewerken_aan_Kuma">Meewerken aan Kuma</h2> + +<p>Doe het volgende om aan Kuma mee te werken:</p> + +<ul> + <li>Bezoek het <a href="https://github.com/mozilla/kuma">Kuma-project op Github</a>.</li> + <li>Bekijk de <a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">Bijdragehandleiding.</a></li> + <li>Verdiep u, als dat nodig is, in de <a href="http://kuma.readthedocs.org/en/latest/">volledige Kuma-documentatie</a>.</li> +</ul> diff --git a/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html b/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html new file mode 100644 index 0000000000..1c6e356ac9 --- /dev/null +++ b/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html @@ -0,0 +1,69 @@ +--- +title: Probleemoplossing KumaScript-errors +slug: MDN/Kuma/Probleemoplossingen_KumaScript_errors +tags: + - Documentatie(2) + - Errors + - Fouten + - KumaScript + - MDN +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +<div>{{MDNSidebar}}</div><div class="summary"> +<p><a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> fouten die op pagina's verschijnen kunnen ontmoedigend zijn voor degene die deze tegenkomen. Gelukkig kan iedereen met een MDN-account deze documenten bewerken om deze bugs op te lossen. Wanneer een pagina deze fout toont, wordt deze toegevoegd aan de lijst <a href="/docs/with-errors">documenten met fouten</a>. Site editors spitten deze regelmatig door om deze bugs te vinden en ze op te lossen. Dit artikel omschrijft vier typen KumaScript-fouten, en hoe je deze kunt oplossen.</p> +</div> + +<h2 id="DocumentParsingError">DocumentParsingError</h2> + +<p><code>DocumentParsingError</code> verschijnt wanneer KumaScript problemen heeft met het begrijpen van het document zelf. De meest voorkomende oorzaak is een syntax error(een character of string verkeerd geplaatst in een command of instruction waardoor een storing ontstaat in het uitvoeren) in een <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a>.</p> + +<p>Controleren op:</p> + +<dl> + <dt>Het gebruik van accolades zonder de bedoeling een macro op te roepen.</dt> + <dd>Als u een \{ wilt schrijven in een document zonder een macro aan te roepen, kunt u dit doen door een extra \ ervoor toe te voegen. Zoals dit: <code>\\{</code></dd> + <dt>Het gebruik van een speciaal karakter in een macro parameter.</dt> + <dd>Wanneer u een \ of een " binnenin een macro parameter nodig heeft, kunt u dit doen door een \ ervoor toe te voegen. Zoals dit: <code>\\</code> of <code>\"</code></dd> + <dt>Ontbrekende komma tussen macro parameters.</dt> + <dd>Macro parameters moeten afgebakend worden door een komma (,) maar niet aan het einde van de lijst van parameters, voorbeeld; <code>\{\{anch("top", "Back to top")}}</code>.</dd> + <dt>HTML tags verschijnen in een macro oproep</dt> + <dd>Als je styling/vormgeving toepast in een macro, zal het vaak breken omdat, bijvoorbeeld een <code></code> tag</code> verschenen is in de geschreven macro code van de broncode. Controleer de bron om te zien wat er is en verwijder onnodige styling/vormgeving.</dd> +</dl> + +<ul> +</ul> + +<h2 id="TemplateLoadingError">TemplateLoadingError</h2> + +<p><code>TemplateLoadingError</code> verschijnt wanneer Kumascript moeite heeft met het bepalen welke <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a> op de pagina te include</p> + +<p>Controleer op:</p> + +<dl> + <dt>Verkeerd gespelde macro namen of hernoemde macro's.</dt> + <dd>U kunt proberen te kijken of de macro juist genoemd is in de sjabloonpagina. De URL van de sjabloonpagina kan worden berekend door de naam template aan het einde van de URL toe te voegen; <code>https://developer.mozilla.org/en-US/docs/Template: — bijvoorbeeld de sjabloonpagina voor</code> <code>\{\{anch("top", "Back to top")}}</code> is <a href="https://developer.mozilla.org/en-US/docs/Template:anch">https://developer.mozilla.org/en-US/docs/Template:anch</a>.<br> + <br> + Er is een gedeeltelijke lijst van <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Custom_macros">macros voor de MDN</a>, die de bestaande macro's en zijn correcte/nieuwe spelling kan omvatten.</dd> +</dl> + +<div class="note"> +<p><strong>Tip:</strong> Je kan een snelle en makkelijke sprong maken naar een specifieke macro door een <a href="http://kb.mozillazine.org/Using_keyword_searches">zoekwoord</a> toe te voegen aan Firefox. <<<Meer info binnenkort>>></p> +</div> + +<h2 id="TemplateExecutionError">TemplateExecutionError</h2> + +<p><code>TemplateExecutionError</code> verschijnt wanneer KumaScript een fout treft in de macro. Deze fouten kunnen alleen worden opgelost door admins/beheerders en moeten gerapporteerd worden als bugs.</p> + +<p>Controleer voordat je fouten rapporteerd, of deze fout al opgelost is. Dit kun je doen door <kbd>Shift</kbd> ingedrukt te houden terwijl je de KumaScript pagina herlaadt (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>R</kbd> op Windows/Linux, <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>R</kbd> op Mac).</p> + +<p><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&component=General#h=detail|bug">Meldt een bug</a> wanneer de fout niet opgelost wordt, voeg hierbij de URL van de pagina en de de tekst in de foutmelding.</p> + +<h2 id="Overige_fouten">Overige fouten</h2> + +<p>Dit is de categorie waar niet bovenstaande fouten tot behoren.</p> + +<p>Controleer voor fixes en rapporteer hardnekkige bugs zoals beschreven onder <a href="#TemplateExecutionError">TemplateExecutionError</a>.</p> + +<p> </p> + +<p> </p> diff --git a/files/nl/mdn/over/index.html b/files/nl/mdn/over/index.html new file mode 100644 index 0000000000..9af7825aab --- /dev/null +++ b/files/nl/mdn/over/index.html @@ -0,0 +1,113 @@ +--- +title: Over MDN +slug: MDN/Over +tags: + - Auteursrechten + - Collaboratie + - Community + - Documentație + - Gids + - Licenties + - MDN Meta +translation_of: MDN/About +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubNav("/nl/docs/MDN")}}</div> + +<p>MDN Web Docs is een evoluerend leerplatform voor webtechnologieën en de software die het Web van zijn kracht voorziet, zoals:</p> + +<ul> + <li>Webstandaarden zoals <a href="https://developer.mozilla.org/nl/docs/Web/CSS" title="/nl/docs/Web/CSS">CSS</a>, <a href="https://developer.mozilla.org/nl/docs/Web/HTML" title="/nl/docs/Web/HTML">HTML</a>, en <a href="/nl/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="https://developer.mozilla.org/nl/docs/Apps" title="/en-US/docs/Apps">Open Web appontwikkeling</a></li> + <li><a href="/nl/docs/Apps" title="/nl/docs/Add-ons">Firefox add-on-ontwikkeling</a></li> +</ul> + +<h2 id="Onze_missie">Onze missie</h2> + +<p>MDN's missie is simpelweg ontwikkelaars de informatie bieden die ze nodig hebben om eenvoudig projecten op het <a href="https://developer.mozilla.org/nl/docs/Web">open Web</a> te creëren. Als het een open technologie is die wordt blootgesteld aan het web, willen we het documenteren.</p> + +<p>Daarnaast bieden we documentatie over <a href="https://developer.mozilla.org/nl/docs/Mozilla">Mozillaproducten</a> en hoe te <a href="https://developer.mozilla.org/nl/docs/Mozilla">bouwen en bij te dragen aan Mozillaprojecten</a>.</p> + +<p>Als u onzeker bent of een specifiek onderwerp wel of niet past op MDN, lees dan: <a href="https://developer.mozilla.org/nl/docs/MDN/Contribute/Guidelines/Does_this_belong_on_MDN">Hoort dit op MDN?</a></p> + +<h2 id="Hoe_u_kunt_helpen">Hoe u kunt helpen</h2> + +<p>U hoeft niet te kunnen coderen—of goed kunnen schrijven—om MDN te kunnen helpen! We hebben vele manieren waarop men kan helpen, van het beoordelen van artikelen om er zeker van te zijn dat ze logisch zijn, tot het bijdragen van tekst en het toevoegen van voorbeeldcode. In feite zijn er zoveel manieren om te helpen dat we een pagina, genaamd <a href="https://developer.mozilla.org/nl/docs/MDN/Getting_started">Beginnen op MDN</a>, hebben die u helpt een taak te kiezen, gebaseerd op uw interesses en hoeveel tijd u hebt!</p> + +<p>U kunt ook helpen door het <a href="/nl/docs/MDN/About/Promote">promoten van MDN</a> op uw eigen blog of website.</p> + +<h2 id="De_MDN-gemeenschap">De MDN-gemeenschap</h2> + +<p>Onze gemeenschap is een wereldwijde! We hebben geweldige bijdragers over de hele wereld, in verschillende talen. Als u meer wilt weten over ons, of als u hulp nodig hebt met MDN op welke manier dan ook, neem dan gerust een kijkje op ons <a href="https://discourse.mozilla-community.org/c/mdn">discussieforum</a> of <a href="irc://irc.mozilla.org#mdn">IRC-kanaal</a>! U kunt ook bijhouden wat we doen door ons Twitter-account te volgen, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. U kunt ook tweets naar ons verzenden als u ziet dat er iets verkeerd is, of als u feedback wilt geven (of bedankjes) aan onze schrijvers en bijdragers!</p> + +<h2 id="De_inhoud_van_MDN_Web_Docs_gebruiken">De inhoud van MDN Web Docs gebruiken</h2> + +<h3 id="Auteursrechten_en_licenties">Auteursrechten en licenties</h3> + +<p><strong>MDN's wikidocumenten</strong> zijn opgesteld met de bijdragen van vele auteurs, zowel binnen als buiten de Mozilla Foundation. Tenzij anders aangegeven, is de inhoud beschikbaar onder de voorwaarden van de <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 of een latere versie. Schrijf "Mozilla-bijdragers" toe en voeg een hyperlink (online) of URL (in gedrukte vorm) toe aan de specifieke wikipagina voor de inhoud die wordt aangekocht. Als u bijvoorbeeld een toeschrijving voor dit artikel wilt geven, kunt u schrijven:</p> + +<blockquote><a href="https://developer.mozilla.org/nl/docs/MDN/Over">Over MDN</a> door <a href="https://developer.mozilla.org/nl/docs/MDN/Over$history">Mozilla Bijdragers</a> is onder licentie van <a href="https://creativecommons.org/licenses/by-sa/2.5/deed.nl">CC-BY-SA 2.5</a>.</blockquote> + +<p>"Mozilla Bijdragers" verwijst naar de geschiedenis van de geciteerde pagina. Zie <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> voor verdere uitleg.</p> + +<div class="note"> +<p>Zie <a href="https://developer.mozilla.org/nl/docs/Archive/Meta_docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">MDN content op WebPlatform.org</a> voor informatie over hoe u MDN-inhoud op die site kunt hergebruiken en toeschrijven.</p> +</div> + +<p>Codevoorbeelden die zijn toegevoegd voor 20 augustus 2010, zijn beschikbaar onder de <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT-licentie</a>; U moet de volgende attributie-informatie in het MIT-sjabloon zetten: "© <datum van laatste herziening van de wikipagina> <naam van de persoon die het in de wiki heeft geplaatst>".</p> + +<p>Codevoorbeelden toegevoegd op of na 20 augustus 2010 zijn in het <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">publiek domein</a>. Er is geen licentie nodig, maar als er een nodig is, kunt u de volgende gebruiken: "Alle auteursrechten zijn opgedragen aan het publiek domein. http://creativecommons.org/publicdomain/zero/1.0/".</p> + +<p>Als u een bijdrage wilt leveren aan deze wiki, moet u uw documentatie beschikbaar maken onder de Attribution-ShareAlike-licentie (of soms een alternatieve licentie die al is opgegeven door de pagina die u aan het bewerken bent) en uw codevoorbeelden beschikbaar maken onder <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (een publiek-domeinaanduiding). Door bij te dragen aan deze wiki, stemt u ermee in dat uw bijdragen onder die licenties beschikbaar worden gesteld.</p> + +<p>Sommige oudere inhoud was beschikbaar gemaakt onder een andere licentie dan hierboven genoteerd; deze staan onderaan elke pagina genoteerd aan de hand van een <a class="internal" href="https://developer.mozilla.org/nl/docs/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternatief licentieblok</a>.</p> + +<div class="warning"> +<p>Er mogen geen nieuwe pagina's gemaakt worden met andere licenties.</p> +</div> + +<p><strong>Auteursrecht voor ingebrachte materialen blijft bij de auteur, tenzij de auteur het aan iemand anders toewijst.</strong></p> + +<p>Als u vragen of opmerkingen hebt over alles wat hier wordt besproken, neem dan contact op met <a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p> + +<hr> +<p>De rechten op de handelsmerken, logo's, servicemerken van de Mozilla Foundation en het uiterlijk van deze website zijn niet gelicentieerd onder de Creative Commons-licentie en voor zover het werken van auteurschap betreft (zoals logo's en grafische afbeeldingen) ontwerp), zijn ze niet opgenomen in het werk dat onder die voorwaarden is gelicentieerd. Als u de tekst van documenten gebruikt en tevens een van deze rechten wilt gebruiken, of als u andere vragen hebt over het voldoen aan onze licentievoorwaarden voor deze verzameling, dient u hier contact op te nemen met de Mozilla Foundation: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> + + + +<h3 id="Linken_naar_MDN">Linken naar MDN</h3> + +<p>Zie dit artikel voor begeleiding op <a href="/nl/docs/MDN/About/Linking_to_MDN">linken naar MDN</a> voor de beste uitvoeringen bij het linken.</p> + + + + + +<h2 id="Downloaden_van_content">Downloaden van content</h2> + +<p>U kunt <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">een volledige tarball mirror van MDN</a> downloaden (2.1 GB vanaf februari 2017).</p> + +<h4 id="Enkele_pagina's">Enkele pagina's</h4> + +<p>U kunt de inhoud van één pagina op MDN ophalen door <a href="/nl/docs/MDN/Kuma/API#Document_parameters">documentparameters</a> toe te voegen aan de URL om op te geven welke indeling u wilt.</p> + +<h4 id="Third-party_tools">Third-party tools</h4> + +<p>U kunt MDN content bekijken via third-party tools zoals <a href="http://kapeli.com/dash">Dash</a> (voor Mac OS) en <a href="http://zealdocs.org/">Zeal</a> (voor Linux en Windows).</p> + +<p><a href="https://kapeli.com/">Kapeli</a> publiceert ook <a href="https://kapeli.com/mdn_offline">offline MDN docs</a> over HTML, CSS, JavaScript, SVG, en XSLT.</p> + +<h2 id="Problemen_rapporteren_met_MDN_Web_Docs">Problemen rapporteren met MDN Web Docs</h2> + +<p>Zie <a href="/nl/docs/MDN/Contribute/Howto/Report_a_problem">Hoe rapporteert men een probleem op MDN</a>.</p> + +<h2 id="Geschiedenis_van_MDN_Web_Docs">Geschiedenis van MDN Web Docs</h2> + +<p>Het MDN Web Docs (voorheen Mozilla Developer Network (MDN), voorheen Mozilla Developer Center (MDC), a.k.a. Devmo) project startte begin 2005, toen de <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> Een licentie van AOL verkreeg om de originele Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a> content te gebruiken. De DevEdge-inhoud werd gedolven voor nog bruikbaar materiaal, dat vervolgens door vrijwilligers werd gemigreerd naar deze wiki, zodat het gemakkelijker te updaten en onderhouden was.</p> + +<p>U kunt meer geschiedenis van MDN vinden op onze <a href="/nl/docs/MDN_at_ten">10-jarig jubileum</a>-pagina, inclusief een mondelinge geschiedenis door enkele van de mensen die erbij betrokken waren.</p> + +<h2 id="Over_Mozilla">Over Mozilla</h2> + +<p>Of u nu meer wilt weten over wie we zijn, hoe u een deel van Mozilla kunt zijn of waar u ons kunt vinden, u bent hier aan het juiste adres. Als u wilt weten wat ons drijft en ons anders maakt, bezoek dan onze <a href="https://www.mozilla.org/nl/mission/">missie</a>pagina.</p> diff --git a/files/nl/mdn/structures/index.html b/files/nl/mdn/structures/index.html new file mode 100644 index 0000000000..593c00b98c --- /dev/null +++ b/files/nl/mdn/structures/index.html @@ -0,0 +1,14 @@ +--- +title: Documentstructuren +slug: MDN/Structures +tags: + - Landing + - MDN Meta + - Structuren +translation_of: MDN/Structures +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>Door MDN heen zijn er verschillende documentatiestructuren die herhaaldelijk worden gebruikt om de presentatie van de informatie in MDN-artikelen consistent te houden. Hier staan artikelen die deze structuren beschrijven, zodat u deze als MDN-auteur op een passende manier kunt herkennen, toepassen en wijzigen voor documenten die u schrijft, bewerkt of vertaalt.</p> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/nl/mdn/structures/macros/index.html b/files/nl/mdn/structures/macros/index.html new file mode 100644 index 0000000000..6b05f6a5f6 --- /dev/null +++ b/files/nl/mdn/structures/macros/index.html @@ -0,0 +1,46 @@ +--- +title: Macro's +slug: MDN/Structures/Macros +tags: + - Gids + - Kuma + - KumaScript + - MDN Meta + - Structuren +translation_of: MDN/Structures/Macros +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">Het <a href="/nl/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a>-platform waar MDN op draait verstrekt een krachtig macrosysteem, <a href="/nl/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a>, dat het mogelijk maakt om een verscheidenheid aan taken te automatiseren. Dit artikel geeft informatie over hoe de macro's van MDN zijn te gebruiken in artikelen.</span></p> + +<p>De <a href="/nl/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript-gids</a> geeft een grondige kijk in het gebruik van macro's op MDN. Deze sectie is een kort overzicht.</p> + +<h2 id="How_macros_worden_geïmplementeerd">How macro's worden geïmplementeerd</h2> + +<p>Macro's op MDN worden geïmplementeerd met server-uitgevoerde <a href="/nl/docs/Web/JavaScript">Javascriptcode</a> en worden geïnterpreteerd met <a href="https://nodejs.org/en/" title="https://nodejs.org/en/">Node.js</a>. Daarbij hebben we een aantal bibliotheken dat we hebben geïmplementeerd en die wikigeoriënteerde diensten en functies leveren, waardoor macro's kunnen omgaan met het wikiplatform en zijn inhoud. Voor meer informatie kunt u de <a href="/nl/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript-gids</a> bekijken.</p> + +<h2 id="Een_macro_gebruiken_in_inhoud">Een macro gebruiken in inhoud</h2> + +<p>Om een macro daadwerkelijk te gebruiken sluit u de call naar de macro in twee accolades en, als ze er zijn, zijn parameters in haakjes. Dat ziet er zo uit:</p> + +<pre class="notranslate">\{{macronaam(parameterlijst)}}</pre> + +<p>Een paar opmerkingen over macro-calls:</p> + +<ul> + <li>Macronamen zijn hoofdlettergevoelig, maar er wordt geprobeerd om fouten in hoofdlettergebruik te corrigeren; u kunt alleen kleine letters gebruiken, zelfs wanneer de macronaam hoofdletters bevat, en u kunt een hoofdletter gebruiken bij een macro die oorspronkelijk met een kleine letter begint.</li> + <li>Parameters worden gescheiden met komma's.</li> + <li>Als er geen parameters zijn, mag u de haakjes weglaten; <code>\{{macronaam()}}</code> en <code>\{{macronaam}}</code> zijn identiek.</li> + <li>Numerieke parameters kunnen in aanhalingstekens staan, of niet. Dat mag u zelf bepalen (tenzij u een versienummer hebt met meerdere decimalen, dit moet binnen aanhalingstekens staan).</li> + <li>Als u fouten krijgt, bekijk dan uw code aandachtig opnieuw. Als u nog steeds niet kunt vinden wat er aan de hand is, bekijk dan <a href="/nl/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Opsporen van KumaScript-fouten</a> voor hulp.</li> +</ul> + +<p>Macro's worden zwaar gecacht; voor elke set van invoerwaarden (zowel parameters als omgevingswaarden, zoals de URL waarin de macro wordt uitgevoerd) worden de resultaten opgeslagen en opnieuw gebruikt. Dit betekent dat de macro alleen wordt uitgevoerd als de invoer verandert.</p> + +<div class="note"> +<p><strong>Opmerking:</strong> U kunt alle macro's dwingen om opnieuw geëvalueerd te worden door een de pagina in uw browser te forceren om te vernieuwen (shift-ververs).</p> +</div> + +<p>Macros kunnen zo simpel zijn als het invoegen van een groter blok met tekst of het uitwisselen van inhoud naar een andere gedeelte van MDN, of zo ingewikkeld als het bouwen van een index van inhoud door het doorzoeken van gedeeltes van de website, opmaak toe te voegen aan de uitvoer en het toevoegen van links.</p> + +<p>U kunt de meest gebruikte macro's vinden op de pagina <a href="/nl/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/en-US/docs/Project:MDN/Contributing/Custom_macros">Veelgebruikte macro's</a>; er is ook een <a href="https://developer.mozilla.org/nl/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">complete lijst van alle macro's</a>. De meeste macro's hebben ingebouwde documentatie, door middel van commentaar bovenaan.</p> + +<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/nl/mdn/tools/index.html b/files/nl/mdn/tools/index.html new file mode 100644 index 0000000000..ffff841a46 --- /dev/null +++ b/files/nl/mdn/tools/index.html @@ -0,0 +1,16 @@ +--- +title: Hulpmiddelen voor MDN +slug: MDN/Tools +tags: + - Landing + - MDN + - MDN Meta +translation_of: MDN/Tools +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/nl/docs/MDN")}}</div> + +<p>MDN biedt een aantal functies dat het makkelijker maakt om voortgang te volgen, inhoud te beheren en de laatste wijzigingen op de site bij te houden.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/mdn/tools/template_editing/index.html b/files/nl/mdn/tools/template_editing/index.html new file mode 100644 index 0000000000..51ce66b56b --- /dev/null +++ b/files/nl/mdn/tools/template_editing/index.html @@ -0,0 +1,16 @@ +--- +title: Sjablonen bewerken +slug: MDN/Tools/Template_editing +tags: + - Gids + - Hulpmiddelen + - MDN + - MDN Meta + - Paginaniveau + - Privileges + - Rollen(2) +translation_of: MDN/Tools/Template_editing +--- +<div>{{MDNSidebar}}</div><p>Op MDN worden in <a href="/nl/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> geschreven sjablonen gebruikt om het genereren en aanpassen van inhoud binnen pagina's te automatiseren. Elk sjabloon is een apart bestand in de map <strong>macros</strong> op de <a href="https://github.com/mozilla/kumascript/tree/master/macros">GitHub-repository van KumaScript</a>.</p> + +<p><span class="seoSummary">Iedereen die wikipagina's op MDN bewerkt, kan macro's aanroepen in MDN-artikelen. Daarnaast kan iedereen sjablonen aanmaken en bewerken via de <a href="https://github.com/mozilla/kumascript">GitHub-repository van KumaScript</a>, waarbij standaard open-source-gewoonten worden gebruikt (fork de repo, maak een branch, maak wijzigingen en stuur een pull-request ter beoordeling). Op dit moment is het sturen van een pull-request de enige manier om vertaalde strings bij te werken in sjablonen die deze strings bevatten.</span></p> diff --git a/files/nl/mdn_at_ten/index.html b/files/nl/mdn_at_ten/index.html new file mode 100644 index 0000000000..f1bd6ea3b7 --- /dev/null +++ b/files/nl/mdn_at_ten/index.html @@ -0,0 +1,39 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +tags: + - Geschiedenis +translation_of: MDN_at_ten +--- +<p class="hidden"><span class="seoSummary">Vier het 10 jaar documenteren van uw Web.</span></p> + +<div class="column-container"> +<div class="column-8"> +<h2 id="De_geschiedenis_van_MDN">De geschiedenis van MDN</h2> + +<p>In het begin van 2005, zette een klein team van idealisten het plan op om een nieuwe, vrije, door de gemeenschap gemaakte, online hulpbron voor alle Webontwikkelaars te maken. Hun brilliante, maar ongewone idee is uitgegroeid tot het Mozilla Developer Network van vandaag, de voornaamste hulpbron voor alle open Web technologieën. Tien jaar later is onze wereldwijde gemeenschap groter dan ooit, en samen maken we nog altijd documentatie, voorbeeldcode and leermiddelen voor alle open Web technologieën, zoals CSS, HTML, JavaScript en alle andere dingen die het open Web zo krachtig maken.</p> + +<p><a class="learnmore" href="/nl/docs/MDN_at_ten/History_of_MDN">Meer weten <span class="offscreen">about the history</span></a></p> + + +<h2 id="Bijdragen_tot_MDN">Bijdragen tot MDN</h2> + +<p>Gedurende tien jaar heeft de MDN gemeenschap het open Web gedocumenteerd. Van het corrigeren van simpele typefouten tot het schrijven van een volledige documentatie voor een nieuwe API, iedereen heeft iets te bieden en geen bijdrage is te groot of te klein. We hebben meer dan 90,000 pagina's die geschreven of vertaald werden door leden van onze voortreffelijke gemeenschap van Mozillians. U kunt een van hen worden.</p> + +<p><a class="learnmore" href="/nl/docs/MDN_at_ten/Contributing_to_MDN">Meer weten <span class="offscreen">about contributing</span></a></p> + +<p> </p> + +<p> </p> +</div> + +<div class="column-4">{{TenthCampaignQuote}}</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/nl/docs/MDN_at_ten/">MDN at 10</a></li> + <li><a href="/nl/docs/MDN_at_ten/History_of_MDN">De geschiedenis van MDN</a></li> + <li><a href="/nl/docs/MDN_at_ten/Contributing_to_MDN">Bijdragen tot MDN</a></li> +</ol> +</div> diff --git a/files/nl/midas/index.html b/files/nl/midas/index.html new file mode 100644 index 0000000000..975b7bdfa8 --- /dev/null +++ b/files/nl/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt> + <dd>By setting this property to "on", the document becomes editable.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p> + +<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p>This example shows the basic structure described in the Notes section :</p> + +<pre><html> + <head> + <title>Simple Edit Box</title> + </head> + <body> + <iframe + id="MidasForm" + src="about:blank" + onload="this.contentDocument.designMode='on';" + ></iframe> + </body> +</html> +</pre> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Document.execCommand")}}</dt> + <dd>Executes the given command.</dd> + <dt>{{domxref("Document.queryCommandEnabled")}}</dt> + <dd>Determines whether the given command can be executed on the document in its current state.</dd> + <dt>{{domxref("Document.queryCommandIndeterm")}}</dt> + <dd>Determines whether the current selection is in an indetermined state.</dd> + <dt>{{domxref("Document.queryCommandState")}}</dt> + <dd>Determines whether the given command has been executed on the current selection.</dd> + <dt>{{domxref("Document.queryCommandValue")}}</dt> + <dd>Determines the current value of the document, range, or current selection for the given command.</dd> +</dl> + +<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Command</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td>backcolor</td> + <td>A color code.</td> + <td>This command will set the background color of the document.</td> + </tr> + <tr> + <td>bold</td> + <td> </td> + <td>If there is no selection, the insertion point will set bold for subsequently typed characters. + <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p> + </td> + </tr> + <tr> + <td>contentReadOnly</td> + <td> </td> + <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td> + </tr> + <tr> + <td>copy</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>createlink</td> + <td>A URI.</td> + <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td> + </tr> + <tr> + <td>cut</td> + <td> </td> + <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. + <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>decreasefontsize</td> + <td> </td> + <td>This command will add a <small> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>delete</td> + <td> </td> + <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td> + </tr> + <tr> + <td>fontname</td> + <td>A font name</td> + <td>This command will set the font face for a selection or at the insertion point if there is no selection. + <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p> + </td> + </tr> + <tr> + <td>fontsize</td> + <td>A number</td> + <td>This command will set the fontsize for a selection or at the insertion point if there is no selection. + <p>The given number is such as would be used in the "size" attribute of the font tag.</p> + </td> + </tr> + <tr> + <td>forecolor</td> + <td>A color code</td> + <td>This command will set the text color of the selection or at the insertion point.</td> + </tr> + <tr> + <td>formatblock</td> + <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td> + <td>The selection surrounded by the given block element.</td> + </tr> + <tr> + <td>heading</td> + <td>H1, H2, H3, H4, H5, H6</td> + <td>Selected block will be formatted as the given type of heading.</td> + </tr> + <tr> + <td>hilitecolor</td> + <td>A color code</td> + <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td> + </tr> + <tr> + <td>increasefontsize</td> + <td> </td> + <td>This command will add a <big> tag around selection or at insertion point.</td> + </tr> + <tr> + <td>indent</td> + <td> </td> + <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td> + </tr> + <tr> + <td>insertbronreturn</td> + <td>true/false</td> + <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.</td> + </tr> + <tr> + <td>inserthorizontalrule</td> + <td>null/string (when string is the Line's id)</td> + <td>This command will insert a horizontal rule (line) at the insertion point. + <p>Does it delete the selection? Yes!</p> + </td> + </tr> + <tr> + <td>inserthtml</td> + <td>A string.</td> + <td>This command will insert the given html into the <body> in place of the current selection or at the caret location. + <p>The given string is the HTML to insert.</p> + </td> + </tr> + <tr> + <td>insertimage</td> + <td>A URI.</td> + <td>This command will insert an image (referenced by the given url) at the insertion point.</td> + </tr> + <tr> + <td>insertorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td> + </tr> + <tr> + <td>insertunorderedlist</td> + <td> </td> + <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td> + </tr> + <tr> + <td>insertparagraph</td> + <td> </td> + <td>Inserts a new paragraph.</td> + </tr> + <tr> + <td>italic</td> + <td> </td> + <td>If there is no selection, the insertion point will set italic for subsequently typed characters. + <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p> + </td> + </tr> + <tr> + <td>justifycenter</td> + <td> </td> + <td>Center-aligns the current block.</td> + </tr> + <tr> + <td>justifyfull</td> + <td> </td> + <td>Fully-justifies the current block.</td> + </tr> + <tr> + <td>justifyleft</td> + <td> </td> + <td>Left-aligns the current block.</td> + </tr> + <tr> + <td>justifyright</td> + <td> </td> + <td>Right aligns the current block.</td> + </tr> + <tr> + <td>outdent</td> + <td> </td> + <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. + <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p> + </td> + </tr> + <tr> + <td>paste</td> + <td> </td> + <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. + <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p> + + <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p> + </td> + </tr> + <tr> + <td>redo</td> + <td> </td> + <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p> + </td> + </tr> + <tr> + <td>removeformat</td> + <td> </td> + <td>Removes inline formatting from the current selection.</td> + </tr> + <tr> + <td>selectall</td> + <td> </td> + <td>This command will select all of the contents within the editable area. + <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p> + </td> + </tr> + <tr> + <td>strikethrough</td> + <td> </td> + <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters. + <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p> + </td> + </tr> + <tr> + <td>styleWithCSS</td> + <td> </td> + <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td> + </tr> + <tr> + <td>subscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set subscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p> + </td> + </tr> + <tr> + <td>superscript</td> + <td> </td> + <td>If there is no selection, the insertion point will set superscript for subsequently typed characters. + <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p> + </td> + </tr> + <tr> + <td>underline</td> + <td> </td> + <td>If there is no selection, the insertion point will set underline for subsequently typed characters. + <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p> + </td> + </tr> + <tr> + <td>undo</td> + <td> </td> + <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. + <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p> + </td> + </tr> + <tr> + <td>unlink</td> + <td> </td> + <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td> + </tr> + <tr> + <td colspan="3">{{Deprecated_header}}</td> + </tr> + <tr> + <td>readonly</td> + <td> </td> + <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td> + </tr> + <tr> + <td>useCSS</td> + <td> </td> + <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/nl/mozilla/add-ons/index.html b/files/nl/mozilla/add-ons/index.html new file mode 100644 index 0000000000..5603a76d4f --- /dev/null +++ b/files/nl/mozilla/add-ons/index.html @@ -0,0 +1,111 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +tags: + - Add-ons + - Extension + - Extensions + - Landing + - Mozilla +translation_of: Mozilla/Add-ons +--- +<div>{{AddonSidebar}}</div> + +<p><span class="seoSummary">Via add-ons kunnen ontwikkelaars de functionaliteit van Firefox uitbreiden en aanpasssen.</span> Add-ons worden geschreven door gebruikmaking van standaard webtechnologieën – JavaScript, HTML en CSS – plus enkele toepassingsspecifieke JavaScript-API’s. Naast andere dingen kan een add-on het volgende doen:</p> + +<ul> + <li>De vormgeving of inhoud van bepaalde websites wijzigen</li> + <li>De gebruikersinterface van Firefox aanpassen</li> + <li>Nieuwe functies aan Firefox toevoegen</li> +</ul> + +<h2 id="Add-ons_ontwikkelen">Add-ons ontwikkelen</h2> + +<p>Momenteel bestaan er enkele toolsets voor het ontwikkelen van Firefox-add-ons, maar <a href="/Add-ons/WebExtensions">WebExtensions</a> zullen eind 2017 de standaard worden. Van de rest wordt verwacht dat ze rond dezelfde tijdsperiode zijn <a href="/Add-ons/Overlay_Extensions">afgeschaft</a>.</p> + +<p>Hier vindt u informatie over beschikbare opties voor het ontwikkelen van add-ons, zodat u kunt beslissen wat op dit moment en in de toekomst het beste voor u is.</p> + +<h3 id="Een_nieuwe_add-on_maken">Een nieuwe add-on maken</h3> + +<p>Als u een nieuwe add-on schrijft, wordt aanbevolen een van de volgende methoden te kiezen. Totdat de overgang naar WebExtensions is voltooid, zijn er voor- en nadelen bij elke methode. Lees verder wat de opties inhouden om te beslissen wat het beste voor u werkt.</p> + +<ul class="card-grid"> + <li style="position: relative; max-width: 400px;"> + <div style="margin-bottom: 70px;"> + <h4 id="WebExtensions"><a href="/Add-ons/WebExtensions">WebExtensions</a></h4> + + <p>WebExtensions zijn de toekomst van add-ons voor Firefox. Als u de WebExtensions-API kunt gebruiken, is dit de beste keuze. U kunt WebExtensions nu meteen ontwikkelen en publiceren, maar ze verkeren nog in een vroeg stadium.<br> + <br> + De meeste WebExtension-API’s zijn ook beschikbaar in <a href="/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Firefox voor Android</a>.</p> + + <p>We zijn bezig met de voorbereiding van een eerste volledige versie voor <a href="https://wiki.mozilla.org/RapidRelease/Calendar">Firefox 48</a>.</p> + </div> + <a class="card-grid-button" href="/Add-ons/WebExtensions">Meer info</a></li> + <li style="position: relative; max-width: 400px;"> + <div style="margin-bottom: 70px;"> + <h4 id="Add-on-SDK"><a href="/Add-ons/SDK">Add-on-SDK</a></h4> + + <p>De Add-on-SDK biedt API’s voor het ontwikkelen van add-ons voor Firefox, en een hulpmiddel voor het ontwikkelen, testen en verpakken ervan.</p> + + <p>U kunt ook <a href="/Add-ons/SDK/Tutorials/Mobile_development">Add-on-SDK-extensies in Firefox voor Android</a> uitvoeren.</p> + + <p>Het gebruik van alleen <a href="/Add-ons/SDK/High-Level_APIs">‘high-level-API’s’</a> wordt aangemoedigd, omdat dit gaandeweg makkelijker is om naar WebExtensions te migreren.</p> + </div> + <a class="card-grid-button" href="/Add-ons/SDK">Meer info</a></li> +</ul> + +<h3 id="Een_bestaande_add-on_migreren">Een bestaande add-on migreren</h3> + +<p>Er zijn in het komende jaar wijzigingen aan Firefox in aantocht die het browsen betrouwbaarder maken voor gebruikers, en het maken van add-ons makkelijker voor ontwikkelaars. Mogelijk dient uw add-on te worden bijgewerkt om compatibiliteit te behouden, maar als dit eenmaal is gebeurd en de vertaling is voltooid, is uw add-on meer compatibel, veiliger en toekomstbestendiger dan ooit.</p> + +<p>We hebben <a href="https://wiki.mozilla.org/Add-ons/developer/communication">hulpbronnen, migratiepaden, kantoortijden en meer</a> aangemaakt om te verzekeren dat u de nodige ondersteuning hebt om de overgang te maken.</p> + +<p>Gebruik om te beginnen de <a href="https://compatibility-lookup.services.mozilla.com/">add-on-compatibiliteitscontrole</a> om te zien of dit op uw add-on van toepassing is.</p> + +<h2 id="Add-ons_publiceren">Add-ons publiceren</h2> + +<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, doorgaans bekend als ‘AMO’, is Mozilla’s officiële website voor ontwikkelaars om add-ons te vermelden, en voor gebruikers om deze te vinden. Door uw add-on naar AMO te uploaden, kunt u deelnemen aan onze gemeenschap van gebruikers en makers, en een publiek vinden voor uw add-on.</p> + +<p>U bent niet verplicht om uw add-on op AMO te vermelden, maar vanaf Firefox 40 moet uw code door Mozilla zijn ondertekend, anders kunnen gebruikers deze niet installeren.</p> + +<p>Voor een overzicht van het proces van het publiceren van uw add-on, zie <a href="https://developer.mozilla.org/Add-ons/Distribution">Uw add-ons ondertekenen en distribueren</a>.</p> + +<h2 id="Andere_typen_add-ons">Andere typen add-ons</h2> + +<p>Doorgaans refereren mensen aan extensies als ze over add-ons spreken, maar er zijn enkele andere typen add-ons waarmee gebruikers Firefox kunnen aanpassen. Deze add-ons omvatten:</p> + +<ul> + <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Lichtgewicht thema’s</a> zijn een eenvoudige manier om beperkte aanpassing van Firefox te bieden.</li> + <li><a href="/Add-ons/Firefox_for_Android">Add-ons voor Mobiel</a> zijn add-ons voor Firefox voor Android. Houd er echter rekening mee dat we een deel van de onderliggende technologie in deze API’s willen afschaffen. In de toekomst zullen WebExtensions volledig compatibel zijn in Firefox voor Android.</li> + <li><a href="/nl/docs/Creating_OpenSearch_plugins_for_Firefox">Zoekmachineplug-ins</a> voegen nieuwe zoekmachines toe aan de zoekbalk van de browser.</li> + <li><a href="/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">Gebruikerswoordenlijsten</a> zijn add-ons waarmee u in verschillende talen spelling kunt controleren.</li> + <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Taalpakketten</a> zijn add-ons waarmee u meerdere beschikbare talen voor de gebruikersinterface van Firefox kunt hebben.</li> +</ul> + +<hr> +<h2 id="Contact">Contact</h2> + +<p>U kunt de onderstaande koppelingen gebruiken om hulp te verkrijgen, up-to-date over add-ons te blijven en ons feedback te geven.</p> + +<h3 id="Add-onsforum">Add-onsforum</h3> + +<p>Gebruik het <a href="https://discourse.mozilla-community.org/c/add-ons">Add-ons Discourse-forum</a> om alle aspecten van add-on-ontwikkeling te bespreken en hulp te verkrijgen.</p> + +<h3 id="Mailinglijsten">Mailinglijsten</h3> + +<p>Gebruik de lijst <strong>dev-addons</strong> om ontwikkeling van het add-ons-ecosysteem te bespreken, waaronder de ontwikkeling van het WebExtensions-systeem en van AMO:</p> + +<ul> + <li><a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons-lijstinfo</a></li> + <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">dev-addons-archieven</a></li> +</ul> + +<h3 id="IRC">IRC</h3> + +<p>Als u een fan bent van IRC, kunt u ons bereiken via:</p> + +<ul> + <li><a href="irc://irc.mozilla.org/addons">#addons</a> (discussie over het add-ons-ecosysteem)</li> + <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (algemene discussie over add-on-ontwikkeling)</li> + <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (discussie over WebExtensions in het bijzonder)</li> +</ul> diff --git a/files/nl/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html b/files/nl/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html new file mode 100644 index 0000000000..d0b40de762 --- /dev/null +++ b/files/nl/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html @@ -0,0 +1,28 @@ +--- +title: Creating a Skin for Firefox +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>In order to create a skin for Firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify CSS. Firefox uses standard GIF, PNG, and JPEG images for the buttons and CSS to style everything else in the interface.</p> + +<h3 id="What_is_a_skin" name="What_is_a_skin">What is a skin?</h3> + +<p>A skin does not totally change the interface; instead, it just defines how the interface looks. You can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (Make it blue with pink polka dots, for example). If you want to change the functionality of Firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document.</p> + +<h2 id="Contents" name="Contents">Contents</h2> + +<ul> + <li><a href="/en-US/docs/Creating_a_Skin_for_Firefox_Getting_Started">Getting Started</a></li> +</ul> + +<div><div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> +<ul> +<li>Author(s): Neil Marshall and Tucker Lee</li> +<li>Other Contributors: Brent Marshall, CDN (http://themes.mozdev.org), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (http://www.igraphics.nn.cx)</li> +<li>Copyright Information: Copyright 2002-2003 Neil Marshall, permission given to MDC to migrate into the wiki April 2005 via email.</li> +<li>Original Location: <a class="external" href="http://www.eightlines.com/neil/mozskin" rel="noopener">http://www.eightlines.com/neil/mozskin</a></li> +</ul> +</div></div> diff --git a/files/nl/mozilla/add-ons/themes/obsolete/index.html b/files/nl/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/nl/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p> +<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p> diff --git a/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html b/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html new file mode 100644 index 0000000000..01bce8b60c --- /dev/null +++ b/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html @@ -0,0 +1,25 @@ +--- +title: Een verouderde Firefox-add-on porteren +slug: Mozilla/Add-ons/WebExtensions/Een_verouderde_Firefox-add-on_porteren +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on +--- +<div>{{AddonSidebar}}</div> + +<p>Als u een add-on voor Firefox hebt ontwikkeld via een verouderde technologie, zoals XUL/XPCOM of de Add-on-SDK, vertelt deze snelle handleiding hoe u deze add-on kunt bijwerken.</p> + +<ol> + <li>Om een idee te krijgen van de belangrijkste zaken die u in uw add-on moet wijzigen: + <ul> + <li>Als uw add-on op XUL en XPCOM is gebaseerd, of het nu een <a href="https://developer.mozilla.org/Add-ons/Overlay_Extensions">overlay-extensie</a> of een <a href="https://developer.mozilla.org/docs/Mozilla/Add-ons/Bootstrapped_extensions">‘bootstrapped’ extensie</a> is, zie dan <a href="/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Vergelijking met XUL/XPCOM-extensies</a>.</li> + <li>Als uw add-on op de Add-on-SDK is gebaseerd, zie dan <a href="/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Vergelijking met de Add-on-SDK</a>.</li> + </ul> + </li> + <li>Herschrijf de code van uw add-on. Meer bronnen en ondersteuning vindt u in de <a href="https://wiki.mozilla.org/Add-ons/developer/communication">Mozilla-wiki</a>. Vanaf Firefox 51 en hoger kunt u een WebExtension in een ‘bootstrapped’ extensie of een SDK-add-on inbedden en op die manier verouderde add-ons een voor een porteren, en bij elke stap over een werkende add-on beschikken. Zie hiervoor <a href="/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a>.</li> + <li>Zodra u eraan toe bent om uw oude add-on bij te werken, dient u de nieuwe add-on in bij AMO als een update voor de oude. Dit betekent dat u een verouderde add-on kunt omzetten naar het gebruik van WebExtensions, en dezelfde add-on-ID kunt behouden.</li> +</ol> + +<div class="note"> +<p>Houd er rekening mee dat dit een omzetting is in één richting: u kunt een WebExtension <strong>niet</strong> bijwerken voor het gebruik van oudere technologie. Dit houdt in dat u er zeker van moet zijn dat u eraan toe bent om de bijgewerkte add-on naar WebExtensions vast te leggen voordat u deze bij AMO indient.</p> +</div> diff --git a/files/nl/mozilla/add-ons/webextensions/index.html b/files/nl/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..071d7eb79f --- /dev/null +++ b/files/nl/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,102 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>We also intend to extend the APIs to support the needs of add-on developers, so if you have ideas, we'd love to hear them. You can reach us on the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> on <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Getting_started">Getting started</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">What are WebExtensions?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Your second WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of a WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Example WebExtensions</a></li> +</ul> + +<h3 id="How_to">How to</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interact with the clipboard</a></li> + <li>Manipulate browser tabs</li> + <li>Access and modify bookmarks</li> + <li>Access and modify cookies</li> +</ul> + +<h3 id="User_interface">User interface</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">Browser actions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">Page actions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Popups">Popups</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">Sidebars</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">Options pages</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Context_menu_items">Context menu items</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Notifications">Notifications</a></li> +</ul> + +<h3 id="Concepts">Concepts</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li> +</ul> + +<h3 id="Porting">Porting</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox add-on</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> +</ul> + +<h3 id="Firefox_workflow">Firefox workflow</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="Reference">Reference</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> +</ul> + +<h4 id="JavaScript_APIs">JavaScript APIs</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Manifest_keys">Manifest keys</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html b/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html new file mode 100644 index 0000000000..d404228574 --- /dev/null +++ b/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html @@ -0,0 +1,24 @@ +--- +title: Wat zijn extensies? +slug: Mozilla/Add-ons/WebExtensions/Wat_zijn_WebExtensions +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>Extensies zijn stukjes code die de functionaliteit van een webbrowser aanpassen. Deze worden geschreven door gebruik te maken van standaard webtechnologieën - JavaScript, HTML en CSS - plus een aantal specifieke JavaScript-API’s. Naast andere dingen kunnen extensies nieuwe functies aan de browser toevoegen of de vormgeving of inhoud van bepaalde websites wijzigen.</p> + +<p>Extensies voor Firefox worden gebouwd via WebExtensions-API’s, een browseronafhankelijk systeem voor het ontwikkelen van extensies. De API is in grote mate compatibel met de <a class="external external-icon" href="https://developer.chrome.com/extensions">extensie-API</a> die door Google Chrome en Opera wordt ondersteund. Extensies die voor deze browsers zijn gemaakt, zullen in de meeste gevallen met <a href="/nl/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">slechts enkele aanpassingen</a> in Firefox of Microsoft Edge werken. De API is ook volledig compatibel met <a href="/nl/Firefox/Multiprocess_Firefox">multiprocess-Firefox</a>.</p> + +<p>In het verleden kon u Firefox-extensies ontwikkelen via één van drie verschillende systemen: <a href="/nl/Add-ons/Overlay_Extensions">XUL/XPCOM-overlays</a>, <a href="/nl/docs/Mozilla/Add-ons/Bootstrapped_extensions">‘bootstrapped’ extensies</a>, of de <a href="/nl/docs/Mozilla/Add-ons/SDK">Add-on-SDK</a>. Aan het einde van november 2017 zullen WebExtensions-API’s de enige manier zijn om Firefox-extensies te ontwikkelen, en worden andere systemen niet meer ondersteund.</p> + +<p>Als u ideeën of vragen hebt, of hulp nodig hebt bij het migreren van een verouderde add-on naar WebExtensions-API’s, kunt u ons bereiken op de <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons-mailinglijst</a> of in <a href="irc://irc.mozilla.org/extdev">#extdev</a> op <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 id="Wat_volgt">Wat volgt?</h2> + +<ul> + <li>Voor het uitproberen van enkele voorbeeldextensies, zie <a href="/nl/Add-ons/WebExtensions/Examples">Voorbeeldextensies</a>.</li> + <li>Voor meer info over de structuur van een extensie, zie <a href="/nl/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomie van een extensie</a>.</li> + <li>Voor het doorlopen van de ontwikkeling van een eenvoudige extensie, zie <a href="/nl/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Uw eerste extensie</a>.</li> +</ul> diff --git a/files/nl/mozilla/connect/index.html b/files/nl/mozilla/connect/index.html new file mode 100644 index 0000000000..4818928432 --- /dev/null +++ b/files/nl/mozilla/connect/index.html @@ -0,0 +1,129 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +<p class="summary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</p> + +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hacks_blog">Hacks blog</h2> + +<p>A key resource for people developing for the Open Web, the Mozilla Hacks blog offers news and discussion of the latest in Web technologies and browser features.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Feedback_channels">Feedback channels</h2> + +<p>Do you have a <a href="http://mzl.la/devtools">great idea for the Developer Tools</a>? Let us know and help shape the future features!</p> + +<p>Building things and need help? Ask away on Stack Overflow!<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&A below")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A on Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hack_on_MDN">Hack on MDN</h2> + +<p>Whether you hack code or text, we have <a href="/en-US/docs/MDN/Getting_Started">ways you can help make MDN better</a>. When you create an MDN profile, you can show off your work here, and get early access to MDN features over time as we roll them out.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or login </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2> + +<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. We offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your knowledge.</p> + +<p>We are offering help through <a href="http://stackoverflow.com/r/mozilla">Q&A on Stack Overflow</a>, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed about the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps & Hacks newsletter.</a></p> + +<p>If you share Mozilla's <a href="https://www.mozilla.org/en-US/mission/">mission</a> and <a href="https://www.mozilla.org/en-US/about/manifesto/">principles</a> and want to help spread them to more developers, check out the ways you can <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">get involved with technical evangelism</a>, and join our <a href="https://lists.mozilla.org/listinfo/evangelism">evangelism discussion group</a>.</p> + +<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, and <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter</a>!</p> + +<p>If you're on <a href="http://www.twitter.com/MozDevNet">Twitter</a>, <a href="http://www.twitter.com/MozDevNet">follow us</a> and hear about doc updates, jobs, contributor opportunities, and more.</p> + +<h2 id="Join_Mozilla" style="line-height: 30px;"><strong>Join Mozilla</strong></h2> + +<p>If you want to go beyond connecting with <strong>Mozilla</strong>, you can join <strong>Mozilla </strong>and help realize <a href="https://www.mozilla.org/mission/">Mozilla's mission of building a better Internet</a>. As a developer, you have skills to contribute in many areas, as well as the opportunity to enhance your skills. Mozilla is an open source project, so we "default to open." You can "view source" and contribute to our software development projects, like the Firefox browser for desktop and Android, Firefox OS, and Mozilla's websites. You can become part of an international community and get recognition for your efforts. Here are some of the advantages of contributing to the Mozilla project.</p> + +<h3 id="Opportunity_to_learn_something_new"><strong>Opportunity to learn something new </strong></h3> + +<div> +<p>In writing code for an open source project, you may face problems you have not encountered before, which present learning opportunities for you. You can try out new tools and techniques in an open source project. For example, if you have never done unit testing, and cannot get permission to do so at work then coding for an open source project would be an excellent place to learn more about it. Contributing to open source gives you the opportunity to collaborate with and get to know many people around the world who have similar interests. Moreover, an open source organization like Mozilla has many contributors who can help you in solving problems you encounter. If you're just getting started contributing, you can look for "mentored" bugs, where an experienced contributor has offered to help a newcomer fix them.</p> + +<h3 id="What_can_I_get_by_contributing"><strong>What can I get by contributing? </strong></h3> + +<p>Exploring many things and gaining recognition in the community -- these are the intangible benefits of contributing to Mozilla. While we can't guarantee specific tangible benefits, many valued contributors receive free Mozilla gear and invitations to Mozilla-related events, and are first in line to be considered for internships. Moreover, your experience in contributing to an open source project might help you find a job. More and more employers of developers are looking at open source contributions. They like to see that you're blogging and contributing to mailing lists, and they like to see you listed as a contributor to an open source project. It may also help with the work experience section of your CV/resumé.</p> + +<h3 id="How_you_can_contribute_to_Mozilla"><strong>How you can contribute to Mozilla</strong></h3> + +<p>There are many project area for which you can contribute to Mozilla. You can find a current, complete list on the main Mozilla <a href="https://www.mozilla.org/contribute">Get Involved</a> page. Some areas that may interest you as a developer include:</p> + +<ul> + <li><a href="http://www.whatcanidoformozilla.org/">Coding</a></li> + <li><a href="http://www.whatcanidoformozilla.org/">Web development</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li> + <li><a href="https://quality.mozilla.org/teams/">QA</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Add-ons</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li> + <li><a href="/en-US/docs/MDN/Getting_started">Developer documentation (here on MDN)</a></li> +</ul> +</div> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_on_Stack_Overflow_See_all_QA">Q&A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&A</a></h2> + +<p>We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + +<div class="stack-form">Stack form</div> + +<h3 id="Latest_QA_Topics">Latest Q&A Topics</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Where_is_Mozilla">Where is Mozilla?</h2> + +<p><a class="heading-link" href="https://www.mozilla.org/en-US/contribute/events/">View attendees and details on our Events page... </a></p> +</div> + +<div class="column-5"> +<h2 id="Other_resources">Other resources</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS videos</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox Developer Tools videos</a></li> + </ul> + </li> + <li><strong>Follow us on Twitter</strong> + <ul class="no-bullets"> + <li><a href="https://twitter.com/mozdevnet">@MozDevNet</a>: News and notes from MDN</li> + <li><a href="https://twitter.com/mozhacks">@mozhacks</a>: What's new on the Hacks blog</li> + <li><a href="https://twitter.com/mozappsdev">@mozappsdev</a>: For web app developers</li> + <li> </li> + </ul> + </li> +</ul> +</div> +</div> diff --git a/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html b/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html new file mode 100644 index 0000000000..675134790e --- /dev/null +++ b/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html @@ -0,0 +1,10 @@ +--- +title: Dus je hebt Firefox net gebuild +slug: Mozilla/Developer_guide/Dus_je_hebt_Firefox_net_gebuild +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +<p>Een link naar deze pagina zal worden weergegeven na iedere succesvolle build van Firefox. Ze zou moeten nuttige volgende stappen bevatten, zoals hoe je de software test, je build verpakt en dergelijke. Probeer de inhoud op deze pagina bondig te houden en plaats gedetailleerde info op de pagina's waar je naar linkt. Het doelpubliek van deze pagina zijn de mensen die Firefox net voor de eerste keer gebuild hebben.</p> +<p>Enkele nuttige links:</p> +<p><a href="/en/Running_automated_tests" title="Running automated tests">De tests uitvoeren</a></p> +<p><a href="/En/Debugging" title="Debugging">Debug</a></p> +<p><a href="/en/Bug_writing_guidelines" title="Bug writing guidelines">Rapporteer een bug</a></p> diff --git a/files/nl/mozilla/developer_guide/index.html b/files/nl/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..0f35ff72f6 --- /dev/null +++ b/files/nl/mozilla/developer_guide/index.html @@ -0,0 +1,146 @@ +--- +title: Developer Guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p>Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.</p> +<h2 id="First_time">First time?</h2> +<dl> + <dt> + <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd> + A step-by-step beginner's guide to getting involved with Mozilla.</dd> +</dl> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <p><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips">Obsolete Build Caveats and Tips</a></p> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd> + A code overview, how to get the code, and the coding style guide.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd> + How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd> + An overview of the entire Mozilla development process.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd> + When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd> + How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd> + After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd> + How to ensure that documentation is kept up to date as you develop.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd> + This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt> + <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd> + Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd> + Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt> + <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd> + Find helpful tips and guides for debugging Mozilla code.</dd> + <dt> + <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd> + Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt> + <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd> + Information about the workings of the Mozilla platform.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd> + How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd> + Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd> + Information about creating customized versions of Firefox.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd> + How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt> + <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + </dl> + </td> + <td> + <h2 class="Tools" id="Tools">Tools</h2> + <dl> + <dt> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd> + Browse and search the Mozilla source code repository on the Web.</dd> + <dt> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd> + The distributed version-control system used to manage Mozilla's source code.</dd> + <dt> + <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd> + <a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt> + <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd> + Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd> + <dt> + <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt> + <dd> + See performance information for Mozilla projects.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd> + A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd> + A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt> + <a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd> + Brian Bondy's list of frequently referenced information for platform developers.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/nl/mozilla/firefox/index.html b/files/nl/mozilla/firefox/index.html new file mode 100644 index 0000000000..1e3775e683 --- /dev/null +++ b/files/nl/mozilla/firefox/index.html @@ -0,0 +1,73 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Kanaal + - Mozilla +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><a href="http://www.mozilla.org/en-US/firefox/new/" title="http://www.mozilla.org/en-US/products/download.html">Firefox</a> is de populaire webbrowser van Mozilla, beschikbaar op meerdere platformen inclusief Windows, macOS en Linux, maar ook op mobiele apparaten die draaien op Android en iOS. Met brede ondersteuning van de laatste ontwikkelingen en krachtige <a href="/en-US/docs/Tools" title="/en-US/docs/Tools">hulpmiddelen voor ontwikkelaars</a> is Firefox een geweldige browser voor zowel consumenten als webontwikkelaars.</p> + +<p>Firefox is een <em>open source project</em>; veel van de code wordt geschreven door een grote groep vrijwilligers. Hieronder kan je meer lezen over het bijdragen aan het Firefox project en vind je bovendien links naar documentatie over het bouwen van Firefox add-ons, hoe je hulpmiddelen voor ontwikkelaars kunt gebruiken etc.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Docs voor add-on ontwikkelaars</h2> + +<dl> + <dt><a href="/en-US/docs/Addons" title="/en-US/docs/Addons">Add-ons</a></dt> + <dd>Algemene documentatie over het maken van Firefox add-ons.</dd> + <dt><a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Add-on SDK</a></dt> + <dd>Het Firefox SDK is een nieuw, krachtig, makkelijk te gebruiken SDK voor het maken van Firefox-extensies. Deze graag gebruiken wanneer mogelijk.</dd> + <dt><a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">Extensies</a></dt> + <dd>Documentatie voor Firefox extensie ontwikkelaars.</dd> + <dt><a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Release notes voor developers</a></dt> + <dd>Met elke nieuwe release komen nieuwe features en veranderingen die alle ontwikkelaars treffen. Check nu onze developer release notes!</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Addons">Bekijk alles...</a></span></p> + +<h2 class="Documentation" id="Docs_for_Firefox_developers" name="Docs_for_Firefox_developers">Docs voor Firefox ontwikkelaars</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Firefox/Releases" title="/en-US/docs/Mozilla/Firefox/Releases">Release notes voor ontwikkelaars</a></dt> + <dd>Met elke nieuwe release komen nieuwe features en veranderingen die alle ontwikkelaars treffen. Check nu onze developer release notes!</dd> + <dt><a href="/en-US/docs/Developer_Guide" title="/en-US/docs/Developer_Guide">Ontwikkelaars handleiding</a></dt> + <dd>De Mozilla developer handleiding; complete documentatie over deelname aan het Mozilla project.</dd> + <dt><a href="/en-US/docs/Mozilla" title="/en-US/docs/Mozilla">Mozilla project documentatie</a></dt> + <dd>Het Mozilla project is groot en complex; check hier de volledige documentatie van het hele project.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Firefox">Bekijk alles...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Firefox ontwikkelaars gemeenschap</h2> + +<p>Ben jij een Firefox developer? Wil jij er een worden?</p> + +<ul> + <li>Raadpleeg op het Firefox developers forum: + <ul> + <li>Stel je vraag op het Mozilla IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/developers">#developers</a></li> + </ul> + </li> +</ul> + +<dl> + <dt><a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.html">Release schema </a></dt> + <dt>Firefox wordt ontwikkeld op een zesweeks schema; dit betekent dat er elke zes weken een nieuwe versie van Firefox wordt uitgebracht. Kijk hier naar ons schema, of <a href="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics" title="https://mail.mozilla.com/home/akeybl@mozilla.com/Release%20Management.ics">meld je aan voor de iCal calendar</a>.</dt> +</dl> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Vergeet de <em>etiquette niet</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Gerelateerde onderwerpen</h2> + +<ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Themes" title="Themes">Thema's</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensies</a></li> +</ul> +</div> +</div> diff --git a/files/nl/mozilla/firefox/releases/index.html b/files/nl/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..df1dc5170c --- /dev/null +++ b/files/nl/mozilla/firefox/releases/index.html @@ -0,0 +1,11 @@ +--- +title: Uitgaveopmerkingen voor Firefox-ontwikkelaars +slug: Mozilla/Firefox/Releases +tags: + - Developer Release Notes + - Firefox +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div><p>Hieronder vindt u koppelingen naar de uitgaveopmerkingen voor ontwikkelaars voor elke Firefox-versie. Deze met liefde gemaakte opmerkingen bieden details over welke functies en API’s zijn toegevoegd, en welke bugs er in elke versie van Firefox zijn verholpen. Dit alles is geschreven om ontwikkelaars de meest nodige informatie te geven. Graag gedaan.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> diff --git a/files/nl/mozilla/index.html b/files/nl/mozilla/index.html new file mode 100644 index 0000000000..793e6e4347 --- /dev/null +++ b/files/nl/mozilla/index.html @@ -0,0 +1,17 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +<div>{{draft}}</div> + +<div> </div> + +<div>De artikels hieronder bevatten informatie over het download en compileren van Mozilla code. Je kan hier ook informatie vinden over hoe de broncode werkt en hoe je zelf add-ons kan maken voor Mozilla producten en dergelijke.</div> + +<div> </div> + +<div>{{ LandingPageListSubpages }}</div> diff --git a/files/nl/mozilla/localization/index.html b/files/nl/mozilla/localization/index.html new file mode 100644 index 0000000000..8a694623a3 --- /dev/null +++ b/files/nl/mozilla/localization/index.html @@ -0,0 +1,23 @@ +--- +title: Lokalisatie bij Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Lokalisatie + - Mozilla + - Vertaling + - l10n +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>Lokalisatie</strong> (L10n) is het proces van het vertalen van gebruikersinterfaces van software naar een ander taalgebied, en het zo aanpassen dat het bij de cultuur past. Deze bronnen zijn voor iedereen die interesse heeft in de technische aspecten die komen kijken bij lokalisatie. </span> Ze zijn voor ontwikkelaars en alle medewerkers.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="/nl/docs/Project:MDN/Localizing" title="/nl/docs/Project:MDN/Localizing">MDN lokaliseren</a></dt> + <dd>Deze bron gaat over de lokalisatie van de documentatie hier op MDN.</dd> + <dt><a href="/nl/Apps/Build/Localization">Lokalisatie van apps</a></dt> + <dd>Deze verzameling documenten gaat specifieker in op het lokaliseren van apps, zoals de Firefox OS-apps.</dd> + <dt><a href="/nl/docs/Web/API/L10n">L10n</a></dt> + <dd>Naslagwerken voor de L10n-API die Mozilla gebruikt voor het lokaliseren van Firefox OS.</dd> +</dl> diff --git a/files/nl/mozilla/persona/browser_compatibility/index.html b/files/nl/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..3a41d46459 --- /dev/null +++ b/files/nl/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,103 @@ +--- +title: Browser compatibiliteit +slug: Mozilla/Persona/Browser_compatibility +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +<h2 id="Supported_Browsers">Supported Browsers</h2> + +<p>Persona is developed, tested, and supported with the following browsers. Thanks to Persona's cross-platform JavaScript library, users do not need add-ons in order to use Persona.</p> + +<table> + <tbody> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Desktop Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Internet Explorer</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup>, 10.0<sup>*</sup><sup>*</sup> (but see <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Compatibility Mode</a> below)</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, Nightly, and Extended Support Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Safari</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Opera</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release<sup>‡</sup></td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>iOS Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Mobile Safari</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Android Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Default Browser</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, and Nightly Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + </tbody> +</table> + +<p><sup>*</sup>: For Windows XP. <sup>†</sup>: For Windows Vista and Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup> </sup><sup>‡</sup>: As time allows.</p> + +<h2 id="Unsupported_Browsers">Unsupported Browsers</h2> + +<ul> + <li>Internet Explorer versions 6.0 and 7.0 are not supported. Users will be prompted to upgrade their browser. Also see the section below on <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE "Compatibility Mode"</a>.</li> + <li>Google Chrome Frame is not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li> + <li>Third party browsers on iOS are not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li> +</ul> + +<h2 id="Internet_Explorer_Compatibility_Mode">Internet Explorer "Compatibility Mode"</h2> + +<p>From version 8.0 onwards Internet Explorer supports a feature called Compatibility Mode, in which the browser may be instructed to emulate a pre-8.0 version when rendering a page. This feature may be controlled in three different ways</p> + +<ol> + <li>as a local setting in the browser</li> + <li>based on the presence and value of the <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> declaration in the page</li> + <li>as an instruction sent from the site, using the <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> header either as an HTTP header or as a <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code><meta></code></a> tag in the page. This method overrides the other two.</li> +</ol> + +<p>Because versions of Internet Explorer earlier than 8.0 are not supported by Persona, any version of Internet Explorer which is configured to emulate a pre-8.0 version will also not function with Persona. This is typically for one of the following reasons:</p> + +<ul> + <li>your site is using "X-UA-Compatible" to explicitly instruct the browser to emulate a pre-8.0 version</li> + <li>your site's pages omit the DOCTYPE, do not have the DOCTYPE as the first line of the page, or set the browser to quirks mode, and your site is not setting "X-UA-Compatible" to IE version 8.0 or higher</li> + <li>the browser is locally configured to use a pre-8.0 Compatibility Mode, and your site is not overriding this by setting "X-UA-Compatible" to IE version 8.0 or higher</li> +</ul> + +<p>For more information, see <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Understanding Compatibility Modes in Internet Explorer 8"</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p> + +<h2 id="Other_Browsers">Other Browsers</h2> + +<p>Despite not being explicitly supported, any browser that includes both {{ domxref("window.postMessage()") }} and {{ domxref("Storage", "localStorage") }} should work. These APIs have been available in all major browsers since March 2010.</p> + +<h2 id="Known_Issues">Known Issues</h2> + +<ul> + <li>Browsers must accept third party cookies for full functionality (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li> + <li>Android 2.x users without a default browser selected may be unable to log in (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li> +</ul> diff --git a/files/nl/mozilla/persona/huisstijl/index.html b/files/nl/mozilla/persona/huisstijl/index.html new file mode 100644 index 0000000000..5ac30e82ba --- /dev/null +++ b/files/nl/mozilla/persona/huisstijl/index.html @@ -0,0 +1,49 @@ +--- +title: Huisstijl hulpbronnen +slug: Mozilla/Persona/Huisstijl +tags: + - Persona + - branding + - huisstijl + - hulpbronnen + - merken + - resources +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +<h2 id="Aanmelden_met_Persona_Knoppen">Aanmelden met Persona Knoppen</h2> +<h3 id="Afbeeldingen">Afbeeldingen</h3> +<p>De "Sign in" (aanmelden) knop komt in drie verschillende versies, en drie kleuren:</p> +<table> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">Sign in with your Email</th> + <th scope="col">Sign in with Persona</th> + <th scope="col">Sign in</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Zwart</th> + <td><img alt="" src="/files/3955/email_sign_in_black.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3961/persona_sign_in_black.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3967/plain_sign_in_black.png" style="width: 95px; height: 25px;"></td> + </tr> + <tr> + <th scope="row">Blauw</th> + <td><img alt="" src="/files/3957/email_sign_in_blue.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3963/persona_sign_in_blue.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3969/plain_sign_in_blue.png" style="width: 95px; height: 25px;"></td> + </tr> + <tr> + <th scope="row">Rood</th> + <td><img alt="" src="/files/3959/email_sign_in_red.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3965/persona_sign_in_red.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3971/plain_sign_in_red.png" style="width: 95px; height: 25px;"></td> + </tr> + </tbody> +</table> +<h3 id="CSS-Gebaseerd">CSS-Gebaseerd</h3> +<p><a href="http://sawyerhollenshead.com/" title="http://sawyerhollenshead.com/">Sawyer Hollenshead</a> heeft een set uitstekende CSS-gebaseerde knoppen gemaakt. <a href="/files/3973/persona-css-buttons.zip" title="/files/3973/persona-css-buttons.zip">Download (.zip)</a></p> +<h2 id="Meer_informatie">Meer informatie</h2> +<p>Meer informatie over het visuele ontwerp van Persona is te vinden in <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">Sean Martells style primer</a>.</p> diff --git a/files/nl/mozilla/persona/index.html b/files/nl/mozilla/persona/index.html new file mode 100644 index 0000000000..079b7e8072 --- /dev/null +++ b/files/nl/mozilla/persona/index.html @@ -0,0 +1,196 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Persona +translation_of: Archive/Mozilla/Persona +--- +<p></p><div class="warning"> <p>Op 30 november 2016 zal Mozilla de services van persona.org stopzetten. Persona.org en gerelateerde domeinen zullen offline worden gehaald.</p> <p>Bekijk voor meer informatie deze handleiding voor het migreren van uw website vanaf Persona:</p> <p><a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers</a></p></div><p></p> + +<div class="summary">Eenvoudige, privacygevoelige eenmalige aanmelding: laat uw gebruikers zich bij uw website aanmelden met hun e-mailadres, en verlos uzelf van wachtwoordbeheer.</div> + +<div class="column-container"> +<p><span class="seoSummary"><a href="https://login.persona.org/">Mozilla Persona</a> is een browseronafhankelijk aanmeldingssysteem voor het internet dat eenvoudig is te gebruiken en uit te rollen. Het werkt in <a href="/nl/docs/Mozilla/Persona/Browser_compatibility">alle grote browsers</a>, en u kunt <a href="/nl/docs/Mozilla/Persona/Quick_Setup">er direct mee beginnen</a>.</span></p> + +<p>Waarom zou u Persona op uw website gebruiken?</p> + +<ol> + <li><strong>Persona maakt een einde aan wachtwoorden voor elke website</strong>, en zorgt ervoor dat gebruikers geen wachtwoorden meer hoeven te bedenken, te beheren en veilig te bewaren.</li> + <li><strong>Persona is makkelijk te gebruiken.</strong> Met twee muisklikken kan een gebruiker zich aanmelden bij een nieuwe website, zoals <a href="http://voo.st">Voost</a>, waarbij extra handelingen om een account aan te maken worden overgeslagen.</li> + <li><strong>Persona is makkelijk te implementeren</strong><strong>. </strong>Ontwikkelaars kunnen in slechts één middag Persona aan hun website toevoegen.</li> + <li><strong>Er is geen afhankelijkheid</strong>. Ontwikkelaars krijgen van iedere gebruiker een geverifieerd e-mailadres, en gebruikers kunnen elk e-mailadres gebruiken.</li> +</ol> + +<p>Daarbij wordt Persona alleen nog maar beter: het is gebouwd op een <strong>open, gedecentraliseerd protocol</strong>, dat is ontworpen voor <strong>directe integratie in browsers</strong> en <strong>ingebouwde ondersteuning door e-mailproviders</strong>. Websites die Persona vandaag implementeren, zullen automatisch verbeteringen ervaren zonder code te hoeven wijzigen.</p> +</div> + +<hr> +<div class="column-container"> +<h2 id="Persona_op_uw_website_gebruiken">Persona op uw website gebruiken</h2> + +<div class="column-third"> +<h3 id="Beginnen">Beginnen</h3> + +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Why_Persona">Waarom Persona?</a></dt> + <dd>Wat er bijzonder is aan Persona in vergelijking met andere gebruikers- en authenticatiesystemen.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/Quick_Setup">Snelle installatie</a></dt> + <dd>Een stap-voor-stap handleiding die toont hoe u Persona aan uw website toevoegt.</dd> +</dl> + +<h3 id="API-verwijzing">API-verwijzing</h3> + +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/The_navigator.id_API">De navigator.id-API</a></dt> + <dd>De browser-API.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/Remote_Verification_API">Naslag over de verificatie-API</a></dt> + <dd>De API voor externe verificatie.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="Handleidingen">Handleidingen</h3> + +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Security_Considerations">Veiligheidsoverwegingen</a></dt> + <dd>Methoden en technieken die ervoor zorgen dat uw Persona-implementatie veilig is.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/Browser_compatibility">Browsercompatibiliteit</a></dt> + <dd>Lees hier welke browsers Persona ondersteunen.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/Internationalization">Internationalisatie</a></dt> + <dd>Lees hier hoe Persona met verschillende talen omgaat.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/The_implementor_s_guide">Tips voor implementatie</a></dt> + <dd>Tips van websites die ondersteuning voor Persona hebben toegevoegd.</dd> +</dl> +</div> + +<div class="column-third"> +<h3 id="Hulpmiddelen">Hulpmiddelen</h3> + +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Libraries_and_plugins">Bibliotheken en plug-ins</a></dt> + <dd>Vind een kant-en-klare bibliotheek voor uw favoriete programmeertaal, webframework, blog of inhoudsbeheersysteem.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook">The Persona cookbook</a></dt> + <dd>Voorbeeldbroncode voor Persona-websites. Bevat onderdelen in C# (MVC3), PHP, Node.JS en meer.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/User_interface_guidelines">Richtlijnen voor de gebruikersinterface</a></dt> + <dd>Persona-aanmelding aanbieden aan gebruikers.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Een_Identity_Provider_worden">Een Identity Provider worden</h2> + +<p>Als u een e-mailprovider of een andere identiteitsproviderservice bent, bekijk dan de koppelingen voor meer informatie over het worden van een Persona Identity Provider.</p> + +<div class="column-container"> +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Identity_Provider_Overview">IdP-overzicht</a></dt> + <dd>Een beknopte uitleg over Persona Identity Providers.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Implementing_a_Persona_IdP">Een IdP implementeren</a></dt> + <dd>Een gedetailleerde handleiding met technische details over het worden van een IdP.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>Een overzicht van het bestand <code>.well-known/browserid</code>, dat IdP’s gebruiken om aan te geven dat ze het protocol ondersteunen.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Het_Persona-project">Het Persona-project</h2> + +<div class="column-container"> +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Glossary">Woordenlijst</a></dt> + <dd>BrowserID- en Persona-begrippen uitgelegd.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/FAQ">FAQ</a></dt> + <dd>Antwoorden op veelgestelde vragen.</dd> + <dt><a href="/nl/docs/Mozilla/Persona/Protocol_Overview">Protocoloverzicht</a></dt> + <dd>Een technisch overzicht op gemiddeld niveau van het onderliggende BrowserID-protocol.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Crypto">Versleuteling</a></dt> + <dd>Een blik op de cryptografische concepten achter Persona en BrowserID.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md">De specificaties</a></dt> + <dd>Gedetailleerde technische details zijn hier te vinden.</dd> +</dl> +</div> + +<div class="column-third"> +<dl> + <dt><a href="/nl/docs/Mozilla/Persona/Bootstrapping_Persona">De Persona-website</a></dt> + <dd>Om Persona online te houden, hosten we drie services op <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: een fallback-Identity Provider, een implementatie van de <a href="/nl/docs/Web/API/Navigator/id" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.id</code></a> API’s, en een verificatieservice.</dd> + <dt><a href="https://github.com/mozilla/browserid">De Persona-broncode</a></dt> + <dd>De code van Persona bevindt zich op GitHub. Wijzigingen via Pull requests zijn welkom!</dd> +</dl> +</div> +</div> + +<p></p><div class="overheadIndicator communitybox" dir="ltr"> + + <div class="column-container"> + <h2 id="Join_the_Identity_community">Join the Identity community</h2> + <div class="column-half"> + <div class="communitysubhead">Choose your preferred method for joining the discussion:</div> + <ul class="communitymailinglist"> + <li><a href="https://lists.mozilla.org/listinfo/dev-identity">Mailing list</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.identity">Newsgroup</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.identity/feeds">RSS feed</a></li> +</ul> + </div> + <div class="column-half"> + <ul class="communitycontact"><li><strong>IRC: </strong><a href="irc://irc.mozilla.org/identity">#identity</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li><li><strong>Blog: </strong><a href="http://identity.mozilla.com/" title="Bezoek het Identity-blog">identity.mozilla.com</a></li><li><strong>GitHub: </strong><a href="https://github.com/mozilla/browserid/issues/new" title="Een bug melden">een bug melden</a></li></ul> + </div> + </div> +</div><p></p> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="#">Persona op een website gebruiken</a> + + <ol> + <li><a href="/nl/docs/Mozilla/Persona/Why_Persona" title="Waarom Persona?">Waarom zou u Persona gebruiken?</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Quick_setup" title="Snelle start">Beginnen</a></li> + <li><a href="/nl/docs/Mozilla/Persona/The_implementor_s_guide" title="Handleiding voor implementatie">Tips voor implementatie van Persona</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Security_Considerations" title="Veiligheidsoverwegingen">Veiligheidsoverwegingen</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Browser_compatibility" title="Browsercompatibiliteit">Browsercompatibiliteit</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Internationalization" title="Internationalisatie">Internationalisatie</a></li> + <li><a href="/nl/docs/Mozilla/Persona/The_navigator.id_API" title="De navigator.id-API">De navigator.id-API</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Remote_Verification_API" title="API voor externe verificatie">De API voor externe verificatie</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Libraries_and_plugins" title="Bibliotheken en plug-ins">Bibliotheken en plug-ins</a></li> + <li><a href="/nl/docs/Mozilla/Persona/User_interface_guidelines" title="Richtlijnen voor de gebruikersinterface">Richtlijnen voor de gebruikersinterface</a></li> + </ol> + </li> + <li><a href="#">Een Identity Provider worden</a> + <ol> + <li><a href="/nl/docs/Mozilla/Persona/Identity_Provider_Overview" title="IdP-overzicht">IdP-overzicht</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Implementing_a_Persona_IdP" title="Een IdP implementeren">Een idP implementeren</a></li> + <li><a href="/nl/docs/Mozilla/Persona/.well-known-browserid" title="Opmaak van .well-known-browserid">Opmaak van .well-known-browserid</a></li> + </ol> + </li> + <li><a href="#">Het Persona-project</a> + <ol> + <li><a href="/nl/docs/Mozilla/Persona/Glossary" title="Woordenlijst">Woordenlijst</a></li> + <li><a href="/nl/docs/Mozilla/Persona/FAQ" title="FAQ">FAQ</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Bootstrapping_Persona" title="Door Persona gehoste services">Door Persona gehoste services</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Protocol_Overview" title="Protocoloverzicht">Protocoloverzicht</a></li> + <li><a href="/nl/docs/Mozilla/Persona/Crypto" title="Versleuteling">Versleuteling</a></li> + </ol> + </li> +</ol> diff --git a/files/nl/mozilla/persona/protocol_overview/index.html b/files/nl/mozilla/persona/protocol_overview/index.html new file mode 100644 index 0000000000..cf8c729edf --- /dev/null +++ b/files/nl/mozilla/persona/protocol_overview/index.html @@ -0,0 +1,61 @@ +--- +title: Protocol Overview +slug: Mozilla/Persona/Protocol_Overview +translation_of: Archive/Mozilla/Persona/Protocol_Overview +--- +<p>Persona is built on the BrowserID protocol. This page describes the BrowserID protocol at a high level.</p> +<h2 id="Actors">Actors</h2> +<p>The protocol involves three actors:</p> +<ul> + <li><strong>Users:</strong> The actual people that want to sign into websites using Persona.</li> + <li><strong>Relying Parties (RPs): </strong>Websites that want to let users sign in using Persona.</li> + <li><strong>Identity Providers (IdPs): </strong>Domains that can issue Persona-compatible identity certificates to their users.</li> +</ul> +<p>Persona and the BrowserID protocol use email addresses as identities, so it's natural for email providers to become IdPs.</p> +<p>Mozilla operates a fallback IdP so that users can use any email address with Persona, even one with a specific domain that isn't an IdP itself.</p> +<h2 id="Protocol_Steps">Protocol Steps</h2> +<p>There are three distinct steps in the protocol:</p> +<ol> + <li>User Certificate Provisioning</li> + <li>Assertion Generation</li> + <li>Assertion Verification</li> +</ol> +<p>As a prerequisite, the user should have an active identity (email address) that they wish to use when logging in to websites. The protocol does not require that IdP-backed identities are SMTP-routable, but it does require that identities follow the <code>user@domain</code> format.</p> +<h3 id="User_Certificate_Provisioning">User Certificate Provisioning</h3> +<p>In order to sign into an RP, a user must be able to prove ownership of their preferred email address. The foundation of this proof is a cryptographically signed certificate from an IdP certifying the connection between a browser's user and a given identity within the IdP's domain.</p> +<p>Because Persona uses standard <a href="http://en.wikipedia.org/wiki/Public-key_cryptography" title="http://en.wikipedia.org/wiki/Public-key_cryptography">public key cryptography</a> techniques, the user certificate is signed by the IdP's private key and contains:</p> +<ul> + <li>The user's email address.</li> + <li>The user's public key for that address on that browser.</li> + <li>The time that the certificate was issued.</li> + <li>The time that the certificate expires.</li> + <li>The IdP's domain name.</li> +</ul> +<p>The user's browser generates a different keypair for each of the user's email addresses, and these keypairs are not shared across browsers. Thus, a user must obtain a fresh certificate whenever one expires, or whenever using a new browser or computer. Certificates must expire within 24 hours of being issued.</p> +<p>When a user selects an identity to use when signing into an RP, the browser checks to see if it has a fresh user certificate for that address. If it does, this step is complete and the browser continues with the assertion generation step below. If the browser does not have a fresh certificate, it attempts to obtain one from the domain associated with the chosen identity.</p> +<ol> + <li>The browser fetches the <a href="/en-US/docs/Persona/.well-known-browserid" title="/en-US/docs/Persona/.well-known-browserid">/.well-known/browserid</a> support document over SSL from the identity's domain.</li> + <li>Using information from the support document, the browser passes the user's email address and associated public key to the IdP and requests a signed certificate.</li> + <li>If necessary, the user is asked to sign into the IdP before provisioning proceeds.</li> + <li>The IdP creates, signs, and gives a user certificate to the user's browser.</li> +</ol> +<p>With the certificate in hand, the browser can continue with generating an identity assertion and signing into an RP.</p> +<p><img alt="user-certificate-provisioning.png" class="internal default" src="/@api/deki/files/6043/=user-certificate-provisioning.png"></p> +<h3 id="Assertion_Generation">Assertion Generation</h3> +<p>The user certificate establishes a verifiable link between an email address and a public key. However, this is alone not enough to log into a website: the user still has to show their connection to the certificate by proving ownership of the private key.</p> +<p>In order to prove ownership of a private key, the user's browser creates and signs a new document called an "identity assertion." It contains:</p> +<ul> + <li>The domain of the RP that the user wants to sign into.</li> + <li>An expiration time for the assertion, generally less than five minutes after it was created.</li> +</ul> +<p>The browser then presents both the user certificate and the identity assertion to the RP for verification.</p> +<h3 id="Assertion_Verification">Assertion Verification</h3> +<p>The combination of user certificate and identity assertion is sufficient to confirm a user's identity.</p> +<p>First, the RP checks the domain and expiration time in the assertion. If the assertion is expired or intended for a different domain, it's rejected. This prevents malicious re-use of assertions.</p> +<p>Second, the RP validates the signature on the assertion with the public key inside the user certificate. If the key and signature match, the RP is assured that the current user really does possess the key associated with the certificate.</p> +<p>Last, the RP fetches the IdP's public key from its <a href="/en-US/docs/Persona/.well-known-browserid" title="/en-US/docs/Persona/.well-known-browserid">/.well-known/browserid</a> document and verifies that it matches the signature on the user certificate. If it does, then the RP can be certain that the certificate really was issued by the domain in question.</p> +<p>Once verifying that this is a current login attempt for the proper RP, that the user certificate matches the current user, and that the user certificate is legitimate, the RP is done and can authenticate the user as the identity contained in the certificate.</p> +<p><img alt="assertion-generation-and-verify.png" class="internal default" src="/@api/deki/files/6042/=assertion-generation-and-verify.png"></p> +<h2 id="The_Persona_Fallback_IdP">The Persona Fallback IdP</h2> +<p>What if a user's email provider doesn't support Persona? In that case, the provisioning step would fail. By convention, the user's browser handles this by asking a trusted third party, <a href="https://login.persona.org/" title="https://login.persona.org/">https://login.persona.org/</a>, to certify the user's identity on behalf of the unsupported domain. After demonstrating ownership of the address, the user would then receive a certificate issued by the fallback IdP, <code>login.persona.org</code>, rather than the identity's domain.</p> +<p>RPs follow a similar process when validating the assertion: the RP would ultimately request the fallback IdP's public key in order to verify the certificate.</p> diff --git a/files/nl/mozilla/persona/quick_setup/index.html b/files/nl/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..1b29167556 --- /dev/null +++ b/files/nl/mozilla/persona/quick_setup/index.html @@ -0,0 +1,199 @@ +--- +title: Quick Setup +slug: Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +<p>Adding the Persona login system to your site takes just five steps:</p> +<ol> + <li>Include the Persona JavaScript library on your pages.</li> + <li>Add “login” and “logout” buttons.</li> + <li>Watch for login and logout actions.</li> + <li>Verify the user’s credentials.</li> + <li>Review best practices.</li> +</ol> +<p>You should be able to get up and running in a single afternoon, but first things first: If you’re going to use Persona on your site, <em>please</em> take a moment and subscribe to the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list. It’s extremely low traffic, only being used to announce changes or security issues which may adversely impact your site.</p> +<h2 id="Step_1_Include_the_Persona_library">Step 1: Include the Persona library</h2> +<p>Persona is designed to be browser-neutral and works well on <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">all major desktop and mobile browsers</a>.</p> +<p>In the future we expect browsers to provide native support for Persona, but in the meantime we provide a JavaScript library that fully implements the user interface and client-side part of the protocol. By including this library, your users will be able to sign in with Persona whether or not their browser has native support.</p> +<p>Once this library is loaded in your page, the Persona functions you need ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) will be available in the global <code>navigator.id</code> object.</p> +<p>To include the Persona JavaScript library, you can place this <code>script</code> tag at the bottom of the page body:</p> +<pre class="brush: html;"><script src="https://login.persona.org/include.js"></script> +</pre> +<p>You <strong>must</strong> include this on every page which uses {{ domxref("navigator.id") }} functions. Because Persona is still in development, you should not self-host the <code>include.js</code> file.</p> +<h3 id="Suppressing_Compatibility_Mode">Suppressing Compatibility Mode</h3> +<p>You should also make sure users of Internet Explorer can't use Compatibility Mode, as this will break Persona. To do this:</p> +<ul> + <li>either include <code><meta http-equiv="X-UA-Compatible" content="IE=Edge"></code> on your page, before any script elements</li> + <li>or set the following HTTP header on your page: <code>X-UA-Compatible: IE=Edge</code>.</li> +</ul> +<p>For more information, see the notes in <a href="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE Compatibility Mode</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p> +<h2 id="Step_2_Add_login_and_logout_buttons">Step 2: Add login and logout buttons</h2> +<p>Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} <em>must</em> be made in the click handler of the logout button.</p> +<p>For example:</p> +<pre class="brush: js;">var signinLink = document.getElementById('signin'); +if (signinLink) { + signinLink.onclick = function() { navigator.id.request(); }; +} + +var signoutLink = document.getElementById('signout'); +if (signoutLink) { + signoutLink.onclick = function() { navigator.id.logout(); }; +} +</pre> +<p>What should those buttons look like? Check out our <a href="https://developer.mozilla.org/docs/persona/branding">Branding Resources</a> page for premade images and CSS-based buttons!</p> +<h2 id="Step_3_Watch_for_login_and_logout_actions">Step 3: Watch for login and logout actions</h2> +<p>For Persona to function, you need to tell it what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:</p> +<ol> + <li> + <p>The email address of the user currently logged into your site from this computer, or <code>null</code> if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.</p> + </li> + <li> + <p>A function to invoke when an <code>onlogin</code> action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.</p> + </li> + <li> + <p>A function to invoke when an <code>onlogout</code> action is triggered. This function is not passed any parameters.</p> + </li> +</ol> +<div class="note style-wrap"> + <p><strong>Note:</strong> You must always include both <code>onlogin</code> and <code>onlogout</code> when you call {{ domxref("navigator.id.watch()") }}.</p> +</div> +<p>For example, if you currently think Bob is logged into your site, you might do this:</p> +<pre class="brush: js;">var currentUser = 'bob@example.com'; + +navigator.id.watch({ + loggedInUser: currentUser, + onlogin: function(assertion) { + // A user has logged in! Here you need to: + // 1. Send the assertion to your backend for verification and to create a session. + // 2. Update your UI. + $.ajax({ /* <-- This example uses jQuery, but you can use whatever you'd like */ + type: 'POST', + url: '/auth/login', // This is a URL on your website. + data: {assertion: assertion}, + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { + navigator.id.logout(); + alert("Login failure: " + err); + } + }); + }, + onlogout: function() { + // A user has logged out! Here you need to: + // Tear down the user's session by redirecting the user or making a call to your backend. + // Also, make sure loggedInUser will get set to null on the next page load. + // (That's a literal JavaScript null. Not false, 0, or undefined. null.) + $.ajax({ + type: 'POST', + url: '/auth/logout', // This is a URL on your website. + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { alert("Logout failure: " + err); } + }); + } +}); +</pre> +<p>In this example, both <code>onlogin</code> and <code>onlogout</code> are implemented by making an asynchronous <code>POST</code> request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.</p> +<p>Note that if the identity assertion can't be verified, you should call {{ domxref("navigator.id.logout()") }}: this has the effect of telling Persona that none is currently logged in. If you don't do this, then Persona may immediately call onlogin again with the same assertion, and this can lead to an <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login" title="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login">endless loop of failed logins</a>.</p> +<p>You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.</p> +<p>Here is another example, this time not using jQuery.</p> +<pre class="brush: js;">function simpleXhrSentinel(xhr) { + return function() { + if (xhr.readyState == 4) { + if (xhr.status == 200){ + // reload page to reflect new login state + window.location.reload(); + } + else { + navigator.id.logout(); + alert("XMLHttpRequest error: " + xhr.status); + } + } + } + } + +function verifyAssertion(assertion) { + // Your backend must return HTTP status code 200 to indicate successful + // verification of user's email address and it must arrange for the binding + // of currentUser to said address when the page is reloaded + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/xhr/sign-in", true); + // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php + var param = "assertion="+assertion; + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.setRequestHeader("Content-length", param.length); + xhr.setRequestHeader("Connection", "close"); + xhr.send(param); // for verification by your backend + + xhr.onreadystatechange = simpleXhrSentinel(xhr); } + +function signoutUser() { + // Your backend must return HTTP status code 200 to indicate successful + // sign out (usually the resetting of one or more session variables) and + // it must arrange for the binding of currentUser to 'null' when the page + // is reloaded + var xhr = new XMLHttpRequest(); + xhr.open("GET", "/xhr/sign-out", true); + xhr.send(null); + xhr.onreadystatechange = simpleXhrSentinel(xhr); } + +// Go! +navigator.id.watch( { + loggedInUser: currentUser, + onlogin: verifyAssertion, + onlogout: signoutUser } ); +</pre> +<p>You <strong>must</strong> call <code>navigator.id.watch()</code> on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you <strong>should</strong> call this function on every page of your site.</p> +<p>Persona will compare the email address you've passed into <code>loggedInUser</code> with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke <code>onlogin</code> or <code>onlogout</code> on page load.</p> +<p> </p> +<h2 id="Step_4_Verify_the_user’s_credentials">Step 4: Verify the user’s credentials</h2> +<p>Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your <code>onlogin</code> callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.</p> +<p>It’s <em>extremely important</em> that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s <code>$.ajax()</code> helper to <code>POST</code> it to <code>/auth/login</code>.</p> +<p>Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply <code>POST</code> the assertion to <code>https://verifier.login.persona.org/verify</code> with two parameters:</p> +<ol> + <li><code>assertion</code>: The identity assertion provided by the user.</li> + <li><code>audience</code>: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.</li> +</ol> +<p>For example, if you’re <code>example.com</code>, you can use the command line to test an assertion with:</p> +<pre class="brush: bash;">$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify" +</pre> +<p>If it’s valid, you’ll get a JSON response like this:</p> +<pre class="brush: js;">{ + "status": "okay", + "email": "bob@eyedee.me", + "audience": "https://example.com:443", + "expires": 1308859352261, + "issuer": "eyedee.me" +} +</pre> +<p>You can learn more about the verification service by reading <a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">The Verification Service API</a>. An example <code>/auth/login</code> implementation, using <a href="http://python.org/">Python</a>, the <a href="http://flask.pocoo.org/">Flask</a> web framework, and the <a href="http://python-requests.org">Requests</a> HTTP library might look like this:</p> +<pre class="brush: python;">@app.route('/auth/login', methods=['POST']) +def login(): + # The request has to have an assertion for us to verify + if 'assertion' not in request.form: + abort(400) + + # Send the assertion to Mozilla's verifier service. + data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'} + resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True) + + # Did the verifier respond? + if resp.ok: + # Parse the response + verification_data = json.loads(resp.content) + + # Check if the assertion was valid + if verification_data['status'] == 'okay': + # Log the user in by setting a secure session cookie + session.update({'email': verification_data['email']}) + return 'You are logged in' + + # Oops, something failed. Abort. + abort(500) +</pre> +<p>For examples of how to use Persona in other languages, have a look at the <a href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">cookbook</a>.</p> +<p>The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the <code>loggedInUser</code> parameter to {{ domxref("navigator.id.watch()") }}.</p> +<p>Logout is simple: you just need to remove the user’s session cookie.</p> +<h2 id="Step_5_Review_best_practices">Step 5: Review best practices</h2> +<p>Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">best practices</a> for using Persona safely and securely.</p> +<p>If you're making a production site, have a look at the <a href="/en-US/docs/Persona/The_implementor_s_guide" title="/en-US/docs/Persona/The_implementor_s_guide">implementor's guide</a>, where we've collected tips for adding the kind of features often needed in real-world login systems.</p> +<p>Lastly, don’t forget to sign up for the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.</p> +<p> </p> diff --git a/files/nl/mozilla/persona/samenvatting/index.html b/files/nl/mozilla/persona/samenvatting/index.html new file mode 100644 index 0000000000..4fd1ce21bd --- /dev/null +++ b/files/nl/mozilla/persona/samenvatting/index.html @@ -0,0 +1,61 @@ +--- +title: Woordenlijst +slug: Mozilla/Persona/Samenvatting +translation_of: Archive/Mozilla/Persona/Glossary +--- +<h2 id="‘Persona’_vs._‘BrowserID’">‘Persona’ vs. ‘BrowserID’</h2> +<p>Persona is een volledige implementatie van een nieuw gedistribueerd aanmeldingssysteem van Mozilla.</p> +<p>BrowserID is het open protocol dat bepaalt hoe Persona werkt.</p> +<h2 id="Veelgebruikte_Persona-terminologie">Veelgebruikte Persona-terminologie</h2> + <dl> + <dt> + BrowserID</dt> + <dd> + Een open, gedecentraliseerd protocol voor het athenticeren van gebruikers, gebaseerd op e-mailadressen.</dd> + <dt> + Identity Provider (‘IdP’)</dt> + <dd> + Services die referenties aan hun gebruikers uitgeven.</dd> + <dd> + E-mailproviders kunnen Identity Providers voor hun gebruikers worden door ondersteuning voor het BrowserID-authenticatieprotocol aan hun service toe te voegen. Als een e-mailprovider geen Persona ondersteunt, werkt Mozilla als een terugval-Identity Provider op <a class="link-https" href="https://login.persona.org" title="https://login.persona.org">login.persona.org</a>.</dd> + <dt> + login.persona.org</dt> + <dd> + Een terugval-Identity Provider die wordt gehost door het Identity-team bij Mozilla.</dd> + <dt> + Persona</dt> + <dd> + De voor de gebruiker zichtbare naam van een complex pakket aan identiteitsgerelateerd services van Mozilla, waaronder de door Mozilla beheerde terugval-Identity Provider. Eindgebruikers horen de term ‘BrowserID’ nooit te zien.</dd> + <dd> + Persona kan uiteindelijk functies bevatten die verder gaan dan het BrowserID-protocol, zoals onderdelen van Firefox Sync of een dashboard voor Open webapps.</dd> + <dt> + Relying Party (‘RP’)</dt> + <dd> + Websites, toepassingen of services waarmee gebruikers zich kunnen aanmelden via Persona.</dd> +</dl> +<h2 id="Projectcodenamen">Projectcodenamen</h2> +<dl> + <dt> + BigTent</dt> + <dd> + Een pakket met drie terugval-Identity Providers die instaan voor gebruikers van respectievelijk Hotmail, Gmail en Yahoo Mail. BigTent werkt door voor elke e-mailprovider het BrowserID-protocol te ‘bridgen’ met OpenID of OAuth. De broncode is beschikbaar op <a href="https://github.com/mozilla/browserid-bigtent" title="https://github.com/mozilla/browserid-bigtent">https://github.com/mozilla/browserid-bigtent</a>.</dd> + <dt> + Vinz Clortho</dt> + <dd> + Een Identity Provider voor <code>@mozilla.com</code>- en <code>@mozilla.org</code>-e-mailadressen. Werkt door LDAP te raadplegen. De bron is beschikbaar op <a href="https://github.com/mozilla/vinz-clortho" title="https://github.com/mozilla/browserid-bigtent">https://github.com/mozilla/vinz-clortho</a>. De naam is een verwijzing naar de film Ghostbusters uit 1984.</dd> +</dl> +<h2 id="Ongebruikelijke_Persona-terminologie">Ongebruikelijke Persona-terminologie</h2> +<dl> + <dt> + Primary Authority (‘Primary’)</dt> + <dd> + Verouderde term voor e-mailproviders die zich ook als Identity Providers kunnen gedragen.</dd> + <dt> + Secondary Authority (‘Secondary’)</dt> + <dd> + Verouderde term voor een terugval-Identity Provider die kan instaan voor gebruikers wiens e-mailproviders geen Identity Providers zijn. Mozilla werkt als een terugval-Identity Provider op <a class="link-https" href="https://login.persona.org" title="https://login.persona.org">login.persona.org</a>.</dd> + <dt> + Verified Email Protocol</dt> + <dd> + Een oude, niet meer gebruikte naam voor het BrowserID-protocol.</dd> +</dl> diff --git a/files/nl/mozilla/projects/index.html b/files/nl/mozilla/projects/index.html new file mode 100644 index 0000000000..7e832a9616 --- /dev/null +++ b/files/nl/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>Below you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/nl/mozilla/projects/midas/security_preferences/index.html b/files/nl/mozilla/projects/midas/security_preferences/index.html new file mode 100644 index 0000000000..c7339d42ed --- /dev/null +++ b/files/nl/mozilla/projects/midas/security_preferences/index.html @@ -0,0 +1,65 @@ +--- +title: Midas editor module security preferences +slug: Mozilla/Projects/Midas/Security_preferences +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +<div class="note"> +<p><strong>Note:</strong> If you've reached this page from a message box in Firefox or another Mozilla product, try using keyboard shortcuts for the Cut, Copy, and Paste commands:</p> + +<ul> + <li>Copy: Ctrl+C or Ctrl+Insert (command+C on Mac)</li> + <li>Paste: Ctrl+V or Shift+Insert (command+V on Mac)</li> + <li>Cut: Ctrl+X or Shift+Delete (command+X on Mac)</li> +</ul> + +<p>The information on the rest of this page is for Web developers and advanced users. Please do not try to modify this page.</p> +</div> + +<p>To protect users' private information, unprivileged scripts cannot invoke the Cut, Copy, and Paste commands in Midas, which is Mozilla's rich text editor component. This means that the corresponding buttons on the <a href="http://www-archive.mozilla.org/editor/midasdemo/" title="http://www-archive.mozilla.org/editor/midasdemo/">Mozilla Rich Text Editing demo page</a> will not work. To enable these functions, you must modify your browser preferences.</p> + +<div class="warning"> +<p><strong>Warning:</strong> Changing these preferences can leave your browser insecure, especially if you grant permission to untrusted sites. Only change these settings as needed to try the demo above and to test your own add-on or Firefox-internal code, and be sure to restore the default settings when you're done!</p> +</div> + +<h2 id="Changing_the_preferences_in_Firefox">Changing the preferences in Firefox</h2> + +<ol> + <li>Quit Firefox. If you have Quick Launch running (on Windows, this is an icon in the toolbar), quit that too.</li> + <li><a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">Find your Firefox profile directory</a>.</li> + <li>Open the <code class="filename">user.js</code> file from that directory in a text editor. If there's no <code>user.js</code> file, create one.</li> + <li>Add these lines to <code class="filename">user.js</code>: + <pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); +</pre> + </li> + <li>Change the URL <span class="external"><code class="url">https://www.mozilla.org</code></span> to the site for which you want to enable this function.</li> + <li>Save the file and restart Firefox. The Clipboard buttons in the demo, or similar buttons on the sites you listed, should now function.</li> +</ol> + +<div class="note"><strong>Note:</strong> The preference is site as well as protocol specific. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org") +</pre> + +<p>is not the same as:</p> + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org") +</pre> + +<p>This is because the first uses <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a> while the second uses HTTPS.</p> +If you want to allow multiple URLs to access the Paste operation, separate the URLs with a space. For example: + +<pre>user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org") +</pre> +</div> + +<p>Again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li id="For_more_information_about_security_policies.2C_see_this_article_about_Configurable_Security_Policies.">For more information about security policies, see this article about <a href="http://www.mozilla.org/projects/security/components/ConfigPolicy.html" title="http://www.mozilla.org/projects/security/components/ConfigPolicy.html">Configurable Security Policies</a>.</li> + <li><a href="/en-US/docs/Web/Security/CSP">CSP</a> and <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Policy Directives</a>.</li> +</ul> diff --git a/files/nl/mozilla/projects/mozmill/index.html b/files/nl/mozilla/projects/mozmill/index.html new file mode 100644 index 0000000000..310071df0b --- /dev/null +++ b/files/nl/mozilla/projects/mozmill/index.html @@ -0,0 +1,53 @@ +--- +title: Mozmill +slug: Mozilla/Projects/Mozmill +translation_of: Mozilla/Projects/Mozmill +--- +<p>MozMill is een testhulpmiddel en framework voor het schrijven van geautomatiseerde tests voor op Gecko gebaseerde applicaties. (Firefox, Thunderbird, Songbird, enz.). Het is gebouwd als een <a class="external" href="http://pypi.python.org/pypi?%3Aaction=search&term=mozmill&submit=search" title="http://pypi.python.org/pypi?:action=search&term=mozmill&submit=search">commandolijn-cliënt</a> om je tests te laten uitvoeren en debuggen. MozMill heeft een uitbreidbare API om je te helpen nuttige tests te schrijven die gebruikersinteractie simuleren. Ook heeft het een volledige <a class="internal" href="/en/Mozmill/Mozmill_Unit_Test_Framework" title="en/Mozmill Tests/Mozmill Unit Test Framework">test API</a>.</p> +<p>Het <a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation" title="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">Mozmill test automatieproject</a> is gestart in Januari 2009 en beschikt over het automatiewerk voor Firefox. Neem een kijkje op de <a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation" title="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">projectpagina</a> of de <a href="/en/Mozmill_Tests" title="en/Mozmill Tests">Mozmill Tests</a> documentatie om een indruk te krijgen van hoe je deel kunt uitmaken van het schrijven en uitvoeren van Mozmill tests. Bestaande tests worden uitgevoerd in de <a href="/en/Mozmill/Release_Testing" title="en/Mozmill/Release Testing">Uitgavetesting</a>scyclus voor nieuwe grote of beveiligingsuitgaves van Firefox.</p> +<p>Ook het Mozilla Messaging team heeft een actief project dat <a href="/en/Thunderbird/Thunderbird_MozMill_Testing" title="en/Thunderbird/Thunderbird MozMill Testing">Thunderbird testing met Mozmill</a> behandelt.</p> +<div class="note"> + <p>Als je vragen of problemen hebt met Mozmill, kan je een mail sturen naar de <a href="http://groups.google.com/group/mozmill-dev?pli=1" title="http://groups.google.com/group/mozmill-dev?pli=1">mozmill-dev mailing list</a>. Voor bugs, vraag alsjeblieft een ticket aan op <a href="https://bugzilla.mozilla.org" title="https://bugzilla.mozilla.org">bugzilla.mozilla.org</a> onder de <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&component=Mozmill" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&component=Mozmill">Testing/Mozmill component</a>.</p> +</div> +<h2 id="Installatie">Installatie</h2> +<p>Mozmill is een Pythonpakket gehost op <a href="http://pypi.python.org/pypi/mozmill" title="http://pypi.python.org/pypi/mozmill">PyPI</a>. Het kan geinstalleerd worden met <a class="external" href="http://pypi.python.org/pypi/pip" title="http://pypi.python.org/pypi/pip">pip</a> of <a class="external" href="http://pypi.python.org/pypi/setuptools" title="http://pypi.python.org/pypi/setuptools">setuptools</a> (easy_install).</p> +<h3 id="Windows">Windows</h3> +<p>De makkelijkste manier om Mozmill werkend te krijgen op Windows is door deze <a href="http://mozqa.com/mozmill-env/" title="http://mozqa.com/mozmill-env/">mozmill-env</a> te downloaden. Pak het uit en voer elke keer <em>cmd.run</em> uit als je Mozmill wilt gebruiken. Dit opent een soort van Unix console met Mozmill voorgeïnstalleerd.</p> +<h3 id="Mac_OS_X">Mac OS X</h3> +<p>Als je Mac OS X 10.4 (of hoger) hebt, moet je eerst minstens Python 2.5 van <a class="external" href="http://python.org/download/">python.org</a> downloaden. Daarna installeer je Mozmill met de setuptools.</p> +<pre>$ curl -O https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py +$ sudo python ez_setup.py +$ sudo easy_install pip +$ sudo pip install mozmill</pre> +<h3 id="Debian(of_soortgelijke)_GNU-Linux_distributies_(Debian_Ubuntu_enz.)">Debian(of soortgelijke) GNU-Linux distributies (Debian, Ubuntu, enz.)</h3> +<p>Om Mozmill te installeren op Ubuntu hoef je alleen maar deze twee commando's uit te voeren in de terminal:</p> +<pre>$ sudo apt-get install python-pip +$ sudo pip install mozmill</pre> +<h2 id="Mozmill-versies">Mozmill-versies</h2> +<p>Je kunt je Mozmill-versie achterhalen door het volgende commando uit te voeren:</p> +<pre>$ mozmill --v +</pre> +<p>De huidige stabiele versie van Mozmill is 2.0. Waarschijnlijk heb je deze versie met de bovenstaande stappen geïnstalleerd. Als de bug waar je aan werkt geen 2.0 nodig heeft, voer dan alsjeblieft het volgende commando uit om de laatste versie van de 1.5 branch te krijgen:</p> +<pre>$ sudo pip install --upgrade mozmill==1.5.24 +</pre> +<p>Voor de ontwikkeling van Mozmill 2.0 adviseren wij jou om een virtuele omgeving te gebruiken en <a href="https://github.com/mozilla/mozmill" title="https://github.com/mozilla/mozmill">deze stappen</a> te volgen.</p> +<h2 id="Zie_ook">Zie ook</h2> +<p>We hebben een paar andere pagina's om je te helpen het meeste uit Mozmill te halen. Het is misschien handig om deze op te slaan voor later.</p> +<ul> + <li><a href="/en/Mozmill_Tests" title="https://developer.mozilla.org/en/Mozmill_Tests">Mozmill tests voor Firefox</a> - hoe voer je de Mozmill tests voor Firefox uit</li> + <li><a href="/en/Mozmill/Using_The_Driver" title="https://developer.mozilla.org/en/Mozmill/Using_the_Driver">Het gebruiken van de Driver</a> - hoe gebruik je Mozmill's driver in je extensie zonder dat je je druk hoeft te maken over de delen van 'test harness'.</li> +</ul> +<h3 id="Referenties">Referenties</h3> +<ul> + <li><a href="/en/Mozmill/Mozmill_Controller_Object" title="en/Mozmill/Mozmill Controller Object">controller object reference</a></li> + <li><a href="/en/Mozmill/Mozmill_Elements_Library_Object" title="en/Mozmill/Mozmill Elements Library Object">elementslib object reference</a> (afgekeurd in Mozmill 2.0 - zie <a href="/en/Mozmill/Finding_Mozmill_Elements" title="Finding_Mozmill_Elements">finding mozmill elements</a>)</li> + <li><a href="/en/Mozmill/Mozmill_Element_Object" title="element object reference">element object reference</a> (Mozmill 2.0+)</li> + <li><a href="/en/Mozmill/Finding_Mozmill_Elements" title="Finding Mozmill Elements">finding mozmill elements</a> (Mozmill 2.0+)</li> + <li><a href="/en/Mozmill/Mozmill_Base_Object_Interfaces" title="en/Mozmill Tests/Mozmill Base Object Interfaces">mozmill object reference</a></li> + <li><a class="external" href="/en/Mozmill/Mozmill_Unit_Test_Framework" title="https://developer.mozilla.org/en/Mozmill/Mozmill_Unit_Test_Framework">unit test API reference </a><span class="external">(gestopt in Mozmill 2.0 - gebruik in plaats daarvan de <a class="link-https" href="https://github.com/mozautomation/mozmill/blob/master/mozmill/mozmill/extension/resource/modules/assertions.js" title="https://github.com/mozautomation/mozmill/blob/master/mozmill/mozmill/extension/resource/modules/assertions.js">assertions API</a>)</span></li> + <li><a href="/en/Mozmill/Mozmill_Element_Object/Extending_the_MozMill_element_hierarchy" title="https://developer.mozilla.org/en/Mozmill/Mozmill_Element_Object/Extending_Element_Hierarchy">extending the element hierarchy</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozmill_Tests/Shared_Modules">Mozmill shared modules</a></li> +</ul> +<h2 id="Bugs">Bugs</h2> +<p>Mozmill wordt nog ontwikkeld, net zoals de meeste testsystemen in het Mozilla-project. Als je denkt dat je een bug gevonden hebt, controleer dan alsjeblieft de lijst met<a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing" title="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing"> bestaande bugs</a>. Als je bug hier niet instaat, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing">rapporteer dan alsjeblieft een nieuwe bug</a> onder het "<code>Testing</code>" Product en "<code>Mozmill</code>" Component. Geef alsjeblieft zoveel mogelijk details en stuur het liefst ook de Mozmill test mee, die het probleem laat zien. Bedankt!</p> +<p>like most test systems in the Mozilla project. If you think you've found a bug, please check the list of <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing" title="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing">existing bugs</a>. If your found bug is not listed there, please <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing">file a new bug</a> under the "<code>Testing</code>" Product and "<code>Mozmill</code>" Component. Please provide as much as possible details and attach the Mozmill test if available, which shows the problem. Thanks for filing!</p> diff --git a/files/nl/mozilla/projects/rhino/index.html b/files/nl/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..9ab0aadfb4 --- /dev/null +++ b/files/nl/mozilla/projects/rhino/index.html @@ -0,0 +1,24 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +tags: + - JavaScript + - Mozilla + - Rhino +translation_of: Mozilla/Projects/Rhino +--- +<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p> + +<p><span class="seoSummary"><strong>Rhino</strong> is een open-source implementatie van <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> helemaal geschreven in Java. Het is gewoonlijk </span>geïntegreerd in Java applicaties om eind gebruikers te voorzien van scripting.<span class="seoSummary"> Het is </span>geïntegreerd in J2SE 6 als de standaard Java scripting engine.<span class="seoSummary"> </span></p> + +<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino downloads</h4> + +<p>Hoe krijg je <a href="/en/RhinoDownload">de source en binaries</a>.</p> + +<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino documentatie</h4> + +<p><a href="/en/Rhino_documentation">Informatie over Rhino</a> voor script schrijvers en embedders.</p> + +<h4 id="Rhino_help" name="Rhino_help">Rhino hulp</h4> + +<p><a href="/en/Rhino/Community">Wat bronnen</a> als je vast zit.</p> diff --git a/files/nl/mozilla/tech/index.html b/files/nl/mozilla/tech/index.html new file mode 100644 index 0000000000..398c38baf1 --- /dev/null +++ b/files/nl/mozilla/tech/index.html @@ -0,0 +1,10 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +translation_of: Mozilla/Tech +--- +<p>(nl translation)</p> + +<p>Mozilla has several technologies used as components of its projects. These are documented here.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/nl/mozilla_implementeren/index.html b/files/nl/mozilla_implementeren/index.html new file mode 100644 index 0000000000..e14fbfc70d --- /dev/null +++ b/files/nl/mozilla_implementeren/index.html @@ -0,0 +1,7 @@ +--- +title: Mozilla Implementeren +slug: Mozilla_Implementeren +--- +<h3 id="Mozilla_Implementeren"> Mozilla Implementeren </h3> +<p><a href="nl/Gecko">Gecko</a> laat ontwikkelaars van 3e partij software toe om dezelfde technologie te gebruiken als in Mozilla. Dat wil zeggen dat u een webbrowser kan implementeren in een 3e partij applicatie, kanalen en streams kan openen op het netwerk, door het <a href="nl/DOM">DOM</a> kan wandelen enzovoort. U kan zelfs hele nieuwe applicaties maken +</p> diff --git a/files/nl/plugins/index.html b/files/nl/plugins/index.html new file mode 100644 index 0000000000..ab756e0163 --- /dev/null +++ b/files/nl/plugins/index.html @@ -0,0 +1,61 @@ +--- +title: Plugins +slug: Plugins +tags: + - Plugins +translation_of: Archive/Plugins +--- +<p> </p> +<div> + <p><b>Plugins</b> (of plug-ins) zijn kleine stukjes software die integreren met de browser om die te voorzien van meestal zeer specifieke functies. Typische voorbeelden zijn plugins die een specifiek grafisch formaat weergeven of die multimedia bestanden kunnen afspelen. Plugins verschillen licht van <a href="nl/Extensies">extensies</a>, die bestaande functionaliteit verbeteren of aanvullen.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Documentatie" name="Documentatie"><a>Documentatie</a></h4> + <dl> + <dt> + <a href="nl/Gecko_Plugin_API_Reference">Gecko Plugin API Reference</a></dt> + <dd> + <small>This reference describes the application programming interfaces for Gecko plugins and provides information about how to use these interfaces.</small></dd> + </dl> + <dl> + <dt> + <a href="nl/Using_XPInstall_to_Install_Plugins">Using XPInstall to Install Plugins</a></dt> + <dd> + <small><a href="nl/XPInstall">XPInstall</a> is a way to ensure a smooth user-experience when obtaining plugins without making the user exit the browsing environment to launch a separate installer.</small></dd> + </dl> + <dl> + <dt> + <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">Detecting Plugins</a></dt> + <dd> + <small>"Since there are clearly times when it makes sense to use a plug-in, the question arises of how to deal with those who don’t have the required plug-in installed."</small></dd> + </dl> + <dl> + <dt> + <a href="nl/Scripting_Plugins/Macromedia_Flash">Scripting Plugins: Macromedia Flash</a></dt> + <dd> + <small>This article explains how JavaScript can be used to access methods from within the Flash plugin, as well as how a feature called FSCommands can be used to access JavaScript functions from within the Flash animation.</small></dd> + </dl> + <p><span class="alllinks"><a>View All...</a></span></p> + </td> + <td> + <h4 id="Community" name="Community">Community</h4> + <ul> + <li>View Mozilla forums...</li> + </ul> + <p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}</p> + <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4> + <dl> + <dd> + <a href="nl/Gecko">Gecko</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki", "ko": "ko/Plugins" } ) }}</p> diff --git a/files/nl/social_api/index.html b/files/nl/social_api/index.html new file mode 100644 index 0000000000..01b016f493 --- /dev/null +++ b/files/nl/social_api/index.html @@ -0,0 +1,114 @@ +--- +title: Social API +slug: Social_API +translation_of: Archive/Social_API +--- +<p>De Social API is een nieuwe API om het voor web browsers gemakkelijker te maken om te integreren met sociale media diensten. Waneer een sociale media aanbieder is geimplementeerd voor Firefox wordt het mogelijk voor de browser om in-chrome bedieningselementen en informatie gerelateerd aan die dienst te laten zien. De volgende artikelen leggen uit hoe een sociale media aanbieder geimplementeerd kan worden.</p> +<div class="row topic-page"> + <div class="section"> + <h2 class="Documentation" id="Social_API_documentatie">Social API documentatie</h2> + <dl> + <dt> + <a href="/en-US/docs/Social_API/Glossary" title="/en-US/docs/Social_API/Glossary">Social API glossary</a></dt> + <dd> + Geeft definities van belangrijke termen die je nodig hebt om de Social API te begrijpen.</dd> + <dt> + <a href="/en-US/docs/Social_API/Manifest" title="/en-US/docs/Social_API/Manifest">Social service manifest</a></dt> + <dd> + Een beschrijving van het benodigde manifest (en evt. instructies hoe dit te maken)</dd> + <dt> + <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_reference">Social service worker API reference</a></dt> + <dd> + Een naslag van de social service worker API.</dd> + <dt> + <a href="/en-US/docs/DOM/navigator.mozSocial" title="/en-US/docs/DOM/navigator.mozSocial">Social service content API: MozSocial</a></dt> + <dd> + Een naslag voor de social service content API, die beschikbaar is middels het {{domxref("navigator.MozSocial")}} object.</dd> + <dt> + <a href="/en-US/docs/Social_API/Share" title="/en-US/docs/Social_API/Share">Social share API</a></dt> + <dd> + Een naslag voor de Share API</dd> + <dt> + <a href="/en-US/docs/Social_API/Bookmarks" title="/en-US/docs/Social_API/Share">Social bookmarks API</a></dt> + <dd> + Een naslag voor de Bookmarks API</dd> + <dt> + <a href="/en-US/docs/Social_API/Status" title="/en-US/docs/Social_API/Share">Social status API</a></dt> + <dd> + Een naslag voor de Status API</dd> + <dt> + <a href="/en-US/docs/Social_API/Widgets" title="/en-US/docs/Social_API/Widgets">Social service widgets</a></dt> + <dd> + Een gids voor de widgets die de social service beschikbaar stelt.</dd> + </dl> + <p> </p> + <dl> + <dt> + </dt> + <dt> + </dt> + </dl> + <h2 id="Hoe_maak_je_een_SocialAPI_Aanbieder">Hoe maak je een SocialAPI Aanbieder</h2> + <dl> + <dt> + </dt> + <dt> + Een stap voor stap uitleg om een eenvoudige SocialAPI Aanbieder te maken.</dt> + <dd> + </dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/FirstSteps" title="/en-US/docs/Social_API/FirstSteps">Eerste stappen</a></dt> + <dd> + De basis om een installeerbare sociale aanbieder aan de praat te krijgen.</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/AmbientNotifications" title="/en-US/docs/Social_API/Implementing_chat_functionality">Het toevoegen van ambient notificaties</a></dt> + <dd> + Een korte uitleg hoe je ambient notifications implementeert met behulp van de Social API.</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/Status" title="/en-US/docs/Social_API/Implementing_chat_functionality">Het implementeren van status en notificaties</a></dt> + <dd> + Uitleg hoe je een status paneel met notificaties implementeerd met de Social API. [Firefox 26 alleen voor ontwikkelaars, Firefox 27 algemene beschikbaarheid verwacht]</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/Bookmarks" title="/en-US/docs/Social_API/Implementing_chat_functionality">Toevoegen van bookmark support</a></dt> + <dd> + Een korte uitleg hoe je social bookmarks implementeert met de Social API.</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/Share" title="/en-US/docs/Social_API/Implementing_chat_functionality">Implementeren van het delen</a></dt> + <dd> + Een uitleg hoe je een delen paneel maakt met de Social API.</dd> + <dt> + <a href="/en-US/docs/Social_API/Guide/Chat" title="/en-US/docs/Social_API/Implementing_chat_functionality">Supporten van chat</a></dt> + <dd> + Een uitleg hoe je chat functies maakt met de Social API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS">View All...</a></span></p> + </div> + <div class="section"> + <h2 class="Community" id="Community" name="Community">Hulp krijgen van de community</h2> + <p>Heb je hulp nodig bij een aan de Social API gerelateerd probleem en je kan de oplossing niet in de documentatie vinden?</p> + <ul> + <li>Stel je vraag op het Mozilla IRC kanaal: <a href="irc://irc.mozilla.org/socialdev" title="irc://irc.mozilla.org/socialdev">#socialdev</a></li> + </ul> + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><em>Let wel op je netiquette</em>...</a></span></p> + <h2 class="Tools" id="Tools" name="Tools">Hulpmidelen en demos</h2> + <ul> + <li><a href="https://github.com/mixedpuppy/socialapi-demo" title="https://github.com/mixedpuppy/socialapi-demo">Een voorbeeld social service aanbieder op github</a>.</li> + <li><a href="/en-US/docs/Social_API_Devtools" title="/en-US/docs/Social_API_Devtools">Hoe gebruik je de Firefox Ontwikkelgereedschappen met de Social API</a>.</li> + </ul> + <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS:Tools">View All...</a></span></p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">beschikbare Social Aanbieders</h2> + <ul> + <li><a href="https://www.facebook.com/about/messenger-for-firefox" title="https://github.com/mixedpuppy/socialapi-demo">Facebook Messenger voor Firefox</a>.</li> + <li><a href="https://mozsocial.cliqz.com/" title="/en-US/docs/Social_API_Devtools">Cliqz</a>.</li> + <li><a href="https://mixi.jp/promotion.pl?id=social_sidebar" title="https://mixi.jp/promotion.pl?id=social_sidebar">Mixi</a> (Available in Japan only).</li> + <li><a href="http://www.saavn.com/firefox/">Saavn</a></li> + <li><a href="https://delicious.com/tools">Delicious</a></li> + </ul> + <p><a href="https://web.archive.org/web/20131022011750/https://now.msn.com/now-for-firefox" title="Wayback Machine: msnNOW sidebar for Firefox">MSN Now voor Firefox</a> was wel eerder beschikbaar maar <a href="http://msnblog.msn.com/blogpost.aspx?post=75763b76-1952-44d4-8815-8228fa5ed17a" title="MSN blog">afgesloten op December 3, 2013</a>.</p> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open web apps</a></li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/nl/thema's/index.html b/files/nl/thema's/index.html new file mode 100644 index 0000000000..f2faefd45c --- /dev/null +++ b/files/nl/thema's/index.html @@ -0,0 +1,8 @@ +--- +title: Thema's +slug: Thema's +translation_of: Mozilla/Add-ons/Themes +--- +<p>Thema's zijn weergaven voor Firefox, Thunderbird enz. het veranderd de iconen zoals de 'Terug'- en 'Stop'-knop. Ook kan het de kleuren van de toepassing en de scrollbars aanpassen. Thema's zijn te downloaden op de <a class="link-https" href="https://addons.mozilla.org/themes/">Thema-pagina</a></p> +<p>Zie verder (voorlopig) de <a href="/en/Themes">Engelstalige documentatie</a>.</p> +<p>{{ languages( { "de": "de/Themes", "en": "en/Themes", "es": "es/Temas", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898" } ) }}</p> diff --git a/files/nl/tools/index.html b/files/nl/tools/index.html new file mode 100644 index 0000000000..7d68b912b2 --- /dev/null +++ b/files/nl/tools/index.html @@ -0,0 +1,210 @@ +--- +title: Developer Tools +slug: Tools +tags: + - Handleiding + - Mozilla Ontwikkelaars + - Tools + - Webontwikkeling + - Webontwikkeling hulpmiddelen +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> +<div class="summary"><span class="seoSummary">Bekijk, bewerk, en debug HTML, CSS, en JavaScript via desktop en mobiel</span></div> + +<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Installeer Firefox Developer Edition</a> + +<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Wat is nieuw in Firefox Developer Edition?</h3> + +<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> is een versie van Firefox speciaal voor ontwikkelaars, met de laatste Firefox functies en experimentele developer tools. De huidige Developer Edition heeft de volgende updates in de developer tools:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Bewerk opgeslagen items met de Storage Inspector</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory/Tree_Map_view">Hierarchische visualisatie van geheugen gebruik</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Verander layout door elementen op pagina te verslepen</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">Bekijk details van HTTP verzoeken in het Web Console</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Vernieuwde animatie inspector voor Web Animations API</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Settings#Choose_DevTools_theme">FireBug thema</a></li> +</ul> +</div> + +<div class="column-container zone-callout"><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></div> + + + +<div class="column-container"> +<div class="column-half"> +<h2 id="Creating" name="Creating">Creëren</h2> + +<p>Authoring tools voor websites en web apps.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>In Firefox ingebouwde text editor waarmee je JavaScript code schrijft en uitvoert.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>Bekijk en bewerk CSS styles voor de huidige pagina.</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></dt> + <dd>Bekijk en bewerk de vertex en fragment shaders die door <a href="/en-US/docs/Web/WebGL">WebGL</a> gebruikt worden.</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt> + <dd>Bekijk de hierarchie van audio knooppunten in een audio context, en wijzig parameters.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Exploring" name="Exploring">Onderzoeken en debuggen</h2> + +<p>Bekijk, onderzoek en debug websites en web apps.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console">Web Console</a></dt> + <dd>Zie logboekberichten van een webpagina en benader de pagina via JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></dt> + <dd>Bekijk en bewerk de HTML en CSS van een webpagina.</dd> + <dt><a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></dt> + <dd>Onderbreek, stap door de code, onderzoek en wijzig JavaScript code die in de pagina uitgevoerd wordt.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></dt> + <dd>Zie de netwerkaanvragen van een pagina die geladen werd.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspecteer cookies, lokale opslag, indexedDB en sessie opslag van een pagina.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/DOM_Inspector">DOM Inspector</a></dt> + <dd>Inspecteer de DOM properties en functies van een pagina.</dd> + <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt> + <dd>Een command-line interface voor de developer tools.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Neem een kleur over van de pagina.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Een dashboard om add-ons en workers te debuggen.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt> + <dd><span class="short_text" id="result_box" lang="nl"><span class="hps">Hoe moet je een bepaalde</span> <span class="hps">iframe</span> aanpakken?</span></dd> +</dl> +</div> +</div> + + + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Mobile" name="Mobile">Mobiel</h2> + +<p>Tools voor mobiele ontwikkelingen.</p> + +<dl> + <dt><a href="/en-us/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></dt> + <dd>Bekijk hoe uw website of app eruit zal zien op verschillende schermgroottes zonder de grootte van het browservenster te wijzigen.</dd> + <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a></dt> + <dd>App Manager is vervangen door <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>Bouw, bewerk, start en debug web apps via de <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> of op een fysiek Firefox OS apparaat. WebIDE is de vervanger van App Manager, beschikbaar vanaf Firefox 33.</dd> + <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt> + <dd>Start en debug uw Firefox OS app op de desktop zonder een fysiek Firefox OS apparaat.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt> + <dd>Koppel de developer tools aan Firefox voor Android.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt> + <dd>Voor Desktop Firefox 36+ / Android Firefox 35+ is <span class="short_text" id="result_box" lang="nl"><span class="hps">er </span><span class="hps">een eenvoudiger</span> <span class="hps">proces</span><span>.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt> + <dd>Koppel de developer tools aan Chrome op Android en Safari op iOS</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Performance" name="Performance">Prestaties</h2> + +<p>Traceer en repareer prestatieproblemen.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt> + <dd>Analiseerde algemene <span class="short_text" id="result_box" lang="nl"><span class="hps">responsiviteit</span></span>, JavaScript en layout prestaties van de website.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory">Geheugen</a></dt> + <dd>Onderzoek welke objecten geheugen gebruiken.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt> + <dd>Zie de frame snelheid van de website.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt> + <dd>Ontdek hoe de browser reageert wanneer de website getoond wordt.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> + <dd>Ontdek waar JavaScript code tijd consumeert.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>Ontdek kritieke functies na afloop van een profiling sessie.</dd> + <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> + <dd>Benadrukt de onderdelen van een pagina die opnieuw getekend worden in reactie op events.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt> + <dd>Bekijk reflow events in het web console.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> + <dd>Bekijk de download tijd van elke verzoek tijdens het laden van de website.</dd> +</dl> +</div> +</div> + +<hr> + + +<div class="column-container"> +<div class="column-half"> +<h2 id="Debugging_the_browser" name="Debugging_the_browser">Debugging the browser</h2> + +<p>De developer tools worden standaard aan een web pagina of web app gekoppeld. Je kunt ze echter ook aan de browser als geheel koppelen. Dit is zinvol voor browser en add-on development.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>Bekijk de berichten die door de browser en add-ons gegenereerd zijn, en draai JavaScript code in de context van de browser.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Koppel de Developer Tools aan de browser.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2> + +<p>De developer tools zijn ontworpen met het oog op uitbreidbaarheid. Firefox add-ons kunnen de developer tools benaderen, functionaliteit uitbreiden en toevoegen. Via het remote debugging protocol kun je je eigen debugging clients and servers bouwen, waarmee je het mogelijk maakt om websites met je eigen tools te debuggen of om andere doelen te debuggen met Firefox tools.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Voeg een panel toe aan de devtools</a></dt> + <dd>Schrijf een add-on dat een panel toevoegd aan de Toolbox.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd>Het protocol wat gebruikt wordt om de Firefox Developer Tools te verbinden met een debug doel zoals een Firefox instantie of een Firefox OS apparaat.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> + <dd>Een in FireFox ingebouwde code editor die je beschikbaar kunt stellen via je add-on.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>Een JavaScript API waarmee je de uitvoering van andere JavaScript code kunt observeren.De debugger in de Firefox Developer Tools is gebouwd met deze API.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Aangepaste Web Console uitvoer</a></dt> + <dd>Mogelijkheid om de uitvoer van de <a href="/en-US/docs/Tools/Web_Console">Web Console</a> en de <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> uit te breiden en aan te passen.</dd> + <dt><a href="/en-US/docs/Tools/Example_add-ons">Voorbeeld devtools add-ons</a></dt> + <dd>Gebruik deze voorbeelden om zelf een devtools add-on te bouwen.</dd> +</dl> +</div> +</div> + + + +<hr> +<h2 id="More_resources" name="More_resources">Meer informatie</h2> + +<p>Deze sectie somt bronnen op die momenteel niet door Mozilla's developer tools team onderhouden worden, maar die volop gebruikt worden door web developers. We hebben enkele Firefox add-ons toegevoegd aan de lijst, maar voor een complete lijst zie <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">“Web Development” rubriek over addons.mozilla.org</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> + <dd>Een zeer populaire en krachtige web development tool inclusief een JavaScript debugger, HTML and CSS viewer en editor en network monitor.</dd> + <dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt> + <dd>Inspecteer, bekijk en bewerk de DOM van webpagina's of XUL schermen.</dd> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt> + <dd>Voegt een menu en toolbar met verschillende web developer tools toe aan de browser.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt> + <dd>Een door Mozilla ontwikkelde toolset, gericht op beginnende web ontwikkelaars.</dd> + <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt> + <dd>De W3C website bevat een aantal tools om de geldigheid van je website te valideren, inclusief de bijhorende <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> en <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> + <dt><a href="http://www.jshint.com/">JSHint</a></dt> + <dd>JavaScript code analyse tool.</dd> +</dl> +</div> +</div> diff --git a/files/nl/tools/page_inspector/index.html b/files/nl/tools/page_inspector/index.html new file mode 100644 index 0000000000..def4a6262e --- /dev/null +++ b/files/nl/tools/page_inspector/index.html @@ -0,0 +1,57 @@ +--- +title: Pagina-inspector +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - HTML + - Stylesheets + - Tools + - Web Development + - 'Web Development:Tools' + - 'l10n:priority' +translation_of: Tools/Page_Inspector +--- +<p>Gebruik de Pagina-inspector om de HTML- en CSS-code in een pagina te bewerken en te bekijken.</p> + +<p>U kunt pagina’s onderzoeken die in de lokale kopie van Firefox of in een extern doel zijn geladen, zoals een Firefox OS-apparaat of Firefox voor Android. Zie <a href="/nl/docs/Tools/Remote_Debugging">Remote debugging</a> voor informatie over het verbinden van ontwikkelaarshulpmiddelen met een extern doel.</p> + +<hr> +<h2 id="Rondleiding_over_gebruikersinterface">Rondleiding over gebruikersinterface</h2> + +<p>Bekijk een <a href="/nl/docs/Tools/Page_Inspector/UI_Tour">snelle rondleiding over de UI</a> om wegwijs te raken in de Inspector.</p> + +<hr> +<h2 id="Handleidingen">Handleidingen</h2> + +<p>Bekijk de volgende handleidingen om te zien wat u allemaal met de Inspector kunt doen:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">De Inspector openen</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML onderzoeken en bewerken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Het vakkenmodel onderzoeken en bewerken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Kleuren inspecteren en selecteren</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Elementen in de pagina opnieuw positioneren</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/View_fonts">Lettertypen bekijken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Transformaties visualiseren</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">De Inspector-API gebruiken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Select_an_element">Een element selecteren</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS onderzoeken en bewerken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Gebeurtenislisteners onderzoeken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Work_with_animations">Werken met animaties</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">CSS-filters bewerken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/View_background_images">Achtergrondafbeeldingen bekijken</a></li> + <li><a href="/nl/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">De Inspector vanuit de Webconsole gebruiken</a></li> +</ul> +</div> + +<hr> +<h2 id="Referentie">Referentie</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/nl/docs/Tools/Page_Inspector/Keyboard_shortcuts">Sneltoetsen</a></li> + <li><a href="/nl/docs/Tools/Tools_Toolbox#Inspector">Instellingen</a></li> +</ul> +</div> diff --git a/files/nl/tools/remote_debugging/index.html b/files/nl/tools/remote_debugging/index.html new file mode 100644 index 0000000000..31c74ed98e --- /dev/null +++ b/files/nl/tools/remote_debugging/index.html @@ -0,0 +1,22 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> (new in Firefox 26)</li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> +</ul> +<h2 id="Firefox_for_Android">Firefox for Android</h2> +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p> +<h2 id="Firefox_for_Metro">Firefox for Metro</h2> +<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p> +<h2 id="Firefox_OS">Firefox OS</h2> +<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a> includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.</p> +<h2 id="Thunderbird">Thunderbird</h2> +<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p> diff --git a/files/nl/tools/responsive_design_view/index.html b/files/nl/tools/responsive_design_view/index.html new file mode 100644 index 0000000000..2158a40f54 --- /dev/null +++ b/files/nl/tools/responsive_design_view/index.html @@ -0,0 +1,93 @@ +--- +title: Responsive Design View +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +<p><a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive design</a> past zich aan verschillende beeldgroottes aan om een presentatie te voorzien dat werkt voor verschillende soorten apparaten, zoals mobiele telefoons of tablets. Het Responsive Design View maakt het gemakkelijk om te zien hoe jouw website of app er zou uitzien op verschillende beeldgroottes.</p> + +<p>{{EmbedYouTube("LBcE72sG2s8")}}</p> + +<p>Het screenshot hieronder laat een mobiele versie zien van een Wikipedia-pagina met een grootte van 320 op 480.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png"></p> + +<p>Het Responsive Design View werkt vlot omdat je snel en precies de grootte van het beeld kan aanpassen.</p> + +<p>Je kan natuurlijk ook de grootte van het browservenster aanpassen; maar als je het browservenster kleiner maakt, maak je ook de andere tabs kleiner, zo wordt het moeilijker om de browserinterface te gebruiken.</p> + +<p>Als het Responsive Design View is ingeschakeld, kan je verder surfen in het verkleinde beeld.</p> + +<h2 id="Aan-_en_afzetten">Aan- en afzetten</h2> + +<p>Er zijn drie manieren om Responsive Design View mode aan te zetten:</p> + +<ul> + <li>Selecteer "Responsive Design View" in het Web Developer submenu in het Firefox Menu (of in het Tools menu als de menubalk zichtbaar is of je met OS X werkt)</li> + <li>Druk op de "Responsive Design View" knop in de <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox's toolbar</a></li> + <li>Druk op Ctrl + Shift + M, (of Cmd + Opt + M bij OS X)</li> +</ul> + +<p>en drie manieren om Responsive Design View af te zetten:</p> + +<ul> + <li>Selecteer het "Responsive Design View" menu item opnieuw</li> + <li>Klik op de "sluit"-knop in de linkerbovenhoek van het venster</li> + <li>Druk op Ctrl + Shift + M, (of Cmd + Opt + M bij OS X). Voor Firefox 34, kon "Escape" ook gebruikt worden om het Responsive Design View te sluiten.</li> +</ul> + +<h2 id="Vergroten_verkleinen">Vergroten / verkleinen</h2> + +<p>Je kan het inhoudsvlak vergroten of verkleinen op twee manieren:</p> + +<ul> + <li>via de <a href="#select-size">"Select size" dropdown lijst</a></li> + <li>door de rechter- en/of onderkant van het venstertje te verslepen</li> +</ul> + +<p>Als je de grootte aanpast door de zijkanten te verslepen, kan je Control (Cmd bij OS X) ingedrukt houden om de snelheid van de aanpassing te vertragen. Dit maakt het gemakkelijker om een precieze grootte te selecteren.</p> + +<div style="overflow: hidden;"> +<h2 id="Responsive_Design_View_controls">Responsive Design View controls</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="width: 545px; height: 356px; display: block; margin-left: auto; margin-right: auto;">Aan de bovenkant van het venstertje van het Responsive Design View, staan vijf knoppen:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Sluiten</strong></td> + <td>Sluit het Responsive Design View<strong> en browse verder zoals voordien.</strong></td> + </tr> + <tr> + <td><strong><a name="select-size">Select size</a></strong></td> + <td> + <p>Kies een voorgemaakte combinatie tussen breedte en hoogte of maak er zelf één.</p> + + <p><br> + Vanaf Firefox 33 zijn de nummers die hier staan direct aanpasbaar. Zo kan je gemakkelijk eigen dimensies toevoegen.</p> + </td> + </tr> + <tr> + <td><strong>Portret/Landschap</strong></td> + <td>Wissel het scherm tussen een portret view en een landschap view.</td> + </tr> + <tr> + <td> + <p><strong>Simuleer touch events</strong></p> + </td> + <td> + <p>Schakel touch event simulatie in of uit: als touch event simulatie is ingeschakeld, worden muis events omgezet naar <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p> + </td> + </tr> + <tr> + <td> + <p><strong>Neem een screenshot</strong></p> + </td> + <td>Neem een screenshot van het inhoudsgebied. + <p>Screenshots worden opgeslagen in de standaard downloadlocatie van Firefox.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/nl/tools/shader_editor/index.html b/files/nl/tools/shader_editor/index.html new file mode 100644 index 0000000000..5745c9d825 --- /dev/null +++ b/files/nl/tools/shader_editor/index.html @@ -0,0 +1,58 @@ +--- +title: Shader Editor +slug: Tools/Shader_Editor +tags: + - Shader Editor +translation_of: Tools/Shader_Editor +--- +<p>De Shader Editor staat toe om de vertex en de fragment shaders in te zien en deze te bewerken, die gebruikt worden door <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<p>{{EmbedYouTube("-pEZXNuFFWI")}}</p> + +<p>WebGL is een JavaScript API die interactieve 3D graphics en 2D graphics in de browser renderd, zonder plugins te gebruiken. Met WebGL voorzie je 2 programma's genaamd "shaders". Deze zijn genoemd in de bijbehorende fase van de <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a>: een <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, deze levert de coördinaten voor elk nog niet getekende vertex, en een <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, die de kleur levert voor elk afzonderlijke pixel.<br> + <br> + Deze shaders zijn geschreven in OpenGL Shading Language, of <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. In WebGL kunnen zij op meerdere manieren worden opgenomen in een pagina: als tekst hardcoded in JavaScript bronnen, als afzonderlijke bestanden door<script> tags, of als plain text vanaf de server. JavaScript code in het bestand wordt gecompileerd door de WebGL API' en uitgevoerd op de apparaat zijn GPU.</p> + +<p>Met de Shader Editor kun je de bron van de vertex en fragment shaders onderzoeken en bewerken.</p> + +<p>Hier is nog een screencast. Deze laat je zien hoe je de Shader Editor kunt gebruiken voor complexe applicaties (in dit geval, de <a href="http://www.unrealengine.com/html5/">Unreal Engine</a> demo):</p> + +<p>{{EmbedYouTube("YBErisxQkPQ")}}</p> + +<h2 id="De_Shader_Editor">De Shader Editor</h2> + +<p>De Shader Editor is standaard uitgezet. Om hem aan te zetten, opent u de <a href="/en-US/docs/Tools_Toolbox#Settings">Hulpmiddelen voor webontwikkelaars openen</a> (Ctrl+Shift+I)en klik op "Shader Editor" in het "Standaard Firefox Ontwikkelaarshulpmiddelen" item. U ziet de "Shader Editor" verschijnen in uw toolbar. Klik op de Shader Editor knop en de Shader Editor zal openen.<br> + <br> + U ziet een leeg venster met een knop: Laad de pagina opnieuw om GLSL-code te kunnen bewerken.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Om te beginnen moet u een pagina die WebGL context <span id="result_box" lang="nl"><span class="hps">creëert</span></span> laden. De screenshots hieronder zijn uit de <a href="http://www.unrealengine.com/html5/">Unreal Engine</a> demo.</p> + +<p>U ziet nu een venster verdeelt in 3 vensterruiten: een lijst met alle GLSL programma's aan de linkerzijde, de vertex shader voor het momenteel geselecteerde programma in het midden, en de fragment shader voor het momenteel geselecteerde programma aan de rechterzijde:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Programma's_beheren">Programma's beheren</h2> + +<p>De linkerkolom somt alle momenteel WebGL gebruikte programma's op. Als je muis zweeft over een van deze programma's, <span id="result_box" lang="nl"><span class="hps">wordt</span> <span class="hps">de</span><span class="hps"> door</span> <span class="hps">dat programma</span> voorziende geometrie <span class="hps">in het rood gemarkeerd</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Als je op het oog-icoontje klikt naast programma, aan de linkerzijde, wordt dit specifieke programma uitgeschakeld. Dit is handig voor het focussen op bepaalde shaders of het verbergen van overlappende geometrie:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">Wanneer je op een specifiek programma klikt verschijnen de vertex en fragment shaders in de andere kolommen. Deze kunt u bewerken.</p> + +<h2 id="Shaders_bewerken">Shaders bewerken</h2> + +<p>In het middelste en de rechterkolom worden de vertex en fragment shaders getoont van het momenteel geselecteerde programma.<br> + <br> + Deze programma's kunt u bewerken en het resultaat ziet u de volgende keer wanneer WebGL herlaad (bijvoorbeeld, in de volgende animatieframe). Ook kunt u bijvoorbeeld de kleuren aanpassen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">De editor highlights syntax errors in uw code:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Als u de muis op het rode rondje met witte kruis houdt, ziet u meer details over het probleem:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </p> + +<p> </p> diff --git a/files/nl/tools/sneltoetsen/index.html b/files/nl/tools/sneltoetsen/index.html new file mode 100644 index 0000000000..66612a527a --- /dev/null +++ b/files/nl/tools/sneltoetsen/index.html @@ -0,0 +1,1065 @@ +--- +title: Sneltoetsen +slug: Tools/Sneltoetsen +tags: + - Tools + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +<p>Deze pagina vermeldt alle sneltoetsen voor de ontwikkelaarshulpmiddelen die in Firefox zijn ingebouwd.</p> + +<p>De eerste sectie vermeldt de sneltoets voor het openen van elk hulpmiddel, de tweede sectie vermeldt sneltoetsen die van toepassing zijn op de Werkset zelf. Daarna volgt één sectie voor elk hulpmiddel waarin de sneltoetsen worden vermeld die u binnen dat hulpmiddel kunt gebruiken.</p> + +<p>Omdat toegangstoetsen afhankelijk zijn van de locale, worden ze niet op deze pagina vermeld.</p> + +<h2 id="Hulpmiddelen_openen_en_sluiten">Hulpmiddelen openen en sluiten</h2> + +<p>Deze sneltoetsen werken in het hoofdbrowservenster voor het openen van het bepaalde hulpmiddel. Voor hulpmiddelen die door de Werkset worden verzorgd, werken ze voor het sluiten van het hulpmiddel als dit actief is. Voor hulpmiddelen zoals de Browserconsole die in een nieuw venster wordt geopend, moet u het venster sluiten om het hulpmiddel te sluiten.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Werkset openen (met het meest recente hulpmiddel geactiveerd)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Werkset naar voorgrond brengen (als Werkset zich in een apart venster en niet op voorgrond bevindt)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Werkset sluiten (als Werkset zich in een apart venster en wel op voorgrond bevindt)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> of <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Webconsole openen <a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Inspector in-/uitschakelen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Debugger openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Stijleditor openen</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Profiler openen</th> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">Networkmonitor openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td> + </tr> + <tr> + <th scope="row">Ontwikkelaarswerkbalk in-/uitschakelen</th> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Responsive Design-weergave in-/uitschakelen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">Browserconsole openen <a href="#opening-closing-browser-console-note"><sup>2</sup></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Browserwerkset openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Kladblok openen</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">WebIDE openen</th> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Opslag-inspector <a href="#disabled-tools-shortcut"><sup>3</sup></a></th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="opening-closing-web-console-note">1. In tegenstelling tot de andere door de werkset verzorgde hulpmiddelen sluit deze sneltoets niet tevens de Webconsole. In plaats daarvan wordt hierdoor de focus op de opdrachtregel van de Webconsole gelegd. Gebruik de algemene werksetsneltoets <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> op een Mac) om de Webconsole te sluiten.</a></p> + +<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">2. Tot aan Firefox 38 sloot, wanneer de Browserconsole was verborgen door een normaal Firefox-venster, dezelfde toetscombinatie de Browserconsole. In Firefox 38 en hoger brengt, als de Browserconsole wordt verborgen door een normaal Firefox-venster, deze sneltoetscombinatie de Browserconsole weer op de voorgrond en wordt hier de focus op gelegd.</a></p> + +<p><a href="/nl/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">3. Het hulpmiddel is standaard uitgeschakeld, dus de sneltoets zou niet werken voordat deze is ingeschakeld vanuit het paneel Instellingen.</a></p> + +<h2 id="Werkset">Werkset</h2> + +<div id="toolbox-shortcuts"> +<p>Deze sneltoetsen werken zolang de werkset is geopend, ongeacht welk hulpmiddel actief is.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Door hulpmiddelen stappen van links naar rechts</th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row">Door hulpmiddelen stappen van rechts naar links</th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>Wisselen tussen actief hulpmiddel en instellingen</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Wisselen tussen actief hulpmiddel en instellingen (nieuw in Firefox 43)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row"> + <p>Werkset wisselen tussen de laatste 2 <a href="/nl/docs/Tools/Tools_Toolbox#Docking_mode">dockingmodi</a> (nieuw in Firefox 41)</p> + </th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Gesplitste console in-/uitschakelen (behalve als console het huidige geselecteerde hulpmiddel is)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<p>Deze sneltoetsen werken in alle hulpmiddelen die door de werkset worden verzorgd.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Lettergrootte vergroten</th> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + <td><kbd>Cmd</kbd> + <kbd> + </kbd></td> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + </tr> + <tr> + <th scope="row">Lettergrootte verkleinen</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">Lettergrootte herinitialiseren</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Broneditor">Broneditor</h2> + +<div id="source-editor"> +<p>Deze tabel vermeldt de standaardsneltoetsen voor de broneditor.</p> + +<p>In de sectie <a href="/nl/docs/Tools/Tools_Toolbox#Editor_Preferences">Editorvoorkeuren</a> van de instellingen voor de ontwikkelaarshulpmiddelen kunt u in plaats daarvan kiezen voor het gebruik van sneltoetsen van Vim, Emacs of Sublime Text.</p> + +<p>Bezoek <code>about:config</code>, selecteer de instelling <code>devtools.editor.keymap</code> en wijs ‘vim’, ‘emacs’ of ‘sublime’ toe aan die instelling om deze sneltoetsen te selecteren. Als u dit doet, worden de geselecteerde toetsen gebruikt voor alle ontwikkelaarshulpmiddelen die de broneditor gebruiken. U dient de editor opnieuw te openen om de wijziging van kracht te laten worden.</p> + +<p>Vanaf Firefox 33 en hoger is de sneltoetsvoorkeur zichtbaar in de sectie <a href="/nl/docs/Tools/Tools_Toolbox#Editor_Preferences">Editorvoorkeuren</a> van de instellingen voor de ontwikkelaarshulpmiddelen, en kunt u dit daar instellen in plaats van via <code>about:config</code>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Naar regel gaan</th> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken in bestand</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Opnieuw zoeken</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Alles selecteren</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Knippen</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">Kopiëren</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Plakken</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Ongedaan maken</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Opnieuw uitvoeren</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Inspringen</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Inspringen ongedaan maken</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Regel(s) omhoog verplaatsen</th> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + </tr> + <tr> + <th scope="row">Regel(s) omlaag verplaatsen</th> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + </tr> + <tr> + <th scope="row">Regel(s) van opmerking voorzien/ontdoen</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Pagina-inspector">Pagina-inspector</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Element inspecteren</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="HTML-paneel">HTML-paneel</h3> + +<p>Deze sneltoetsen werken terwijl u zich in het <a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML" title="/nl/docs/Tools/Page_Inspector#HTML_pane">HTML-paneel van de Inspector</a> bevindt.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De geselecteerde node verwijderen</th> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + </tr> + <tr> + <th scope="row">Verwijderen van een node ongedaan maken</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Verwijderen van een node opnieuw uitvoeren</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Verder naar volgende node (alleen uitgevouwen nodes)</th> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Terug naar vorige node</th> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Huidige geselecteerde node uitvouwen</th> + <td><kbd>Pijl naar rechts</kbd></td> + <td><kbd>Pijl naar rechts</kbd></td> + <td><kbd>Pijl naar rechts</kbd></td> + </tr> + <tr> + <th scope="row">Huidige geselecteerde node samenvouwen</th> + <td><kbd>Pijl naar rechts</kbd></td> + <td><kbd>Pijl naar rechts</kbd></td> + <td><kbd>Pijl naar rechts</kbd></td> + </tr> + <tr> + <th scope="row">Vooruit stappen door de attributen van een node</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Terug stappen door de attributen van een node</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Beginnen met bewerken van het geselecteerde attribuut</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">De geselecteerde node verbergen/tonen</th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row">Focus op het zoekveld in het HTML-paneel leggen</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Bewerken als HTML</th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">De buitenste HTML van de geselecteerde node kopiëren (nieuw in Firefox 42)</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">De geselecteerde node scrollen in weergave (nieuw in Firefox 44)</th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">De volgende overeenkomst in de opmaak zoeken, als zoeken actief is</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">De vorige overeenkomst in de opmaak zoeken, als zoeken actief is (nieuw in Firefox 48)</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="CSS-paneel">CSS-paneel</h3> + +<p>Deze sneltoetsen werken wanneer u zich in het <a href="/nl/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="/nl/docs/Tools/Page_Inspector#CSS_pane">CSS-paneel van de Inspector</a> bevindt.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Focus op het zoekveld in het CSS-paneel leggen</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Inhoud van zoekveld wissen (alleen wanneer focus op het zoekveld ligt, en inhoud is ingevoerd)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Vooruit stappen door eigenschappen en waarden</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Terug stappen door eigenschappen en waarden</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Beginnen met bewerken van eigenschap of waarde (alleen weergave Regels, wanneer een eigenschap of waarde is geselecteerd, maar nog niet wordt bewerkt)</th> + <td><kbd>Enter</kbd> of <kbd>Spatie</kbd></td> + <td><kbd>Return</kbd> of <kbd>Spatie</kbd></td> + <td><kbd>Enter</kbd> of <kbd>Spatie</kbd></td> + </tr> + <tr> + <th scope="row">Omhoog en omlaag bewegen tussen suggesties voor automatisch aanvullen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)</th> + <td><kbd>Pijl omhoog</kbd> , <kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omhoog</kbd> , <kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omhoog</kbd> , <kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Huidige suggestie voor automatisch aanvullen kiezen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)</th> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Return</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 1 verhogen</th> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 1 verlagen</th> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 100 verhogen</th> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 100 verlagen</th> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 10 verhogen</th> + <td><kbd>Shift</kbd> + <kbd>Pijl omhoog</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Pijl omhoog</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 10 verlagen</th> + <td><kbd>Shift</kbd> + <kbd>Pijl omlaag</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Pijl omlaag</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 0,1 verhogen</th> + <td><kbd>Alt</kbd> + <kbd>Pijl omhoog</kbd></td> + <td><kbd>Opt</kbd> + <kbd>Pijl omhoog</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde waarde met 0,1 verlagen</th> + <td><kbd>Alt</kbd> + <kbd>Pijl omlaag</kbd></td> + <td><kbd>Opt</kbd> + <kbd>Pijl omlaag</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Meer informatie over huidige eigenschap tonen/verbergen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)</th> + <td><kbd>Enter</kbd> of <kbd>Spatie</kbd></td> + <td><kbd>Return</kbd> of <kbd>Spatie</kbd></td> + <td><kbd>Enter</kbd> of <kbd>Spatie</kbd></td> + </tr> + <tr> + <th scope="row">MDN-referentiepagina over huidige eigenschap openen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Huidige CSS-bestand openen in Stijleditor (alleen weergave Berekend, wanneer meer informatie over een eigenschap wordt getoond en focus op een CSS-bestandsreferentie ligt, nieuw in Firefox 49)</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Debugger">Debugger</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De Debugger openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken in de huidige bron via het <a href="/nl/docs/Tools/Debugger/How_to/Search_and_filter" title="/nl/docs/Tools/Debugger/How_to/Search_and_filter">scriptfilter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Volgende zoeken in de huidige bron</th> + <td><kbd>Enter</kbd> / <kbd>Pijl omhoog</kbd></td> + <td><kbd>Return</kbd> / <kbd>Pijl omhoog</kbd></td> + <td><kbd>Enter</kbd> / <kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Vorige zoeken in de huidige bron</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Pijl omlaag</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd> / <kbd>Pijl omlaag</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken in alle bronnen via het <a href="/nl/docs/Tools/Debugger/How_to/Search_and_filter" title="/nl/docs/Tools/Debugger/How_to/Search_and_filter">scriptfilter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken naar scripts op naam</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken naar functiedefinities</th> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Variabelen filteren bij gepauzeerde uitvoering</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Uitvoering hervatten bij een breakpoint</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Overslaan</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Instappen</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Uitstappen</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Breakpoint op de huidige geselecteerde regel in-/uitschakelen</th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Voorwaardelijk breakpoint op de huidige geselecteerde regel in-/uitschakelen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Geselecteerde tekst aan Watch-expressies toevoegen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Naar regel gaan via het <a href="/nl/docs/Tools/Debugger/How_to/Search_and_filter" title="/nl/docs/Tools/Debugger/How_to/Search_and_filter">scriptfilter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken via het <a href="/nl/docs/Tools/Debugger/How_to/Search_and_filter" title="/nl/docs/Tools/Debugger/How_to/Search_and_filter">scriptfilter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">In het <a href="/nl/docs/Tools/Debugger/UI_Tour#Source_pane">bronpaneel</a> naar een functiedefinitie springen (nieuw in Firefox 44)</th> + <td><kbd>Ctrl</kbd> + klikken</td> + <td><kbd>Cmd</kbd> + klikken</td> + <td><kbd>Ctrl</kbd> + klikken</td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. Standaard is op sommige Macs de functietoets anders toegewezen voor het gebruik van een speciale functie: bijvoorbeeld voor het wijzigen van de schermhelderheid of het volume. Bekijk hiervoor deze </a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">handleiding voor het gebruik van deze toetsen als standaard functietoetsen</a>. Houd ook de functietoets ingedrukt om een anders toegewezen toets als een standaard functietoets te gebruiken (gebruik dus <kbd>Shift</kbd> + <kbd>Functie</kbd> + <kbd>F5</kbd> om de Profiler te openen).</p> +</div> + +<h2 id="Webconsole">Webconsole</h2> + +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De Webconsole openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Zoeken in het berichtweergavepaneel</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Het <a href="/nl/docs/Tools/Web_Console#Inspecting_objects" title="/nl/docs/Tools/Web_Console#Inspecting_objects">object-inspector-paneel</a> wissen</th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Focus op de opdrachtregel leggen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Uitvoer wissen</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>Vanaf Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>Vanaf Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Opdrachtregel-interpreter">Opdrachtregel-interpreter</h3> + +<p>Deze sneltoetsen zijn van toepassing wanneer u zich in de <a href="/nl/docs/Tools/Web_Console#The_command_line_interpreter" title="/nl/docs/Tools/Web_Console#The_command_line_interpreter">opdrachtregel-interpreter</a> bevindt.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Scrollen naar begin van console-uitvoer (alleen als de opdrachtregel leeg is)</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Scrollen naar einde van console-uitvoer (alleen als de opdrachtregel leeg is)</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row">Pagina omhoog door console-uitvoer</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Pagina omlaag door console-uitvoer</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Teruggaan door <a href="/nl/docs/Tools/Web_Console#Command_history" title="/nl/docs/Tools/Web_Console#Command_history">opdrachtgeschiedenis</a></th> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Vooruit gaan door opdrachtgeschiedenis</th> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Naar het begin van de regel springen</th> + <td><kbd>Home</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Naar het einde van de regel springen</th> + <td><kbd>End</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">De huidige expressie uitvoeren</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Een nieuwe regel toevoegen, voor het invoeren van meerregelige expressies</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Pop-up_voor_automatisch_aanvullen">Pop-up voor automatisch aanvullen</h3> + +<p>Deze sneltoetsen zijn van toepassing terwijl de <a href="/nl/docs/Tools/Web_Console#Autocomplete">pop-up voor automatisch aanvullen</a> is geopend:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De huidige suggestie voor automatisch aanvullen kiezen</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">De pop-up voor automatisch aanvullen annuleren</th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Naar de vorige suggestie voor automatisch aanvullen springen</th> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + <td><kbd>Pijl omhoog</kbd></td> + </tr> + <tr> + <th scope="row">Naar de volgende suggestie voor automatisch aanvullen springen</th> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + <td><kbd>Pijl omlaag</kbd></td> + </tr> + <tr> + <th scope="row">Pagina omhoog door suggesties voor automatisch aanvullen</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Pagina omlaag door suggesties voor automatisch aanvullen</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Scrollen naar begin van suggesties voor automatisch aanvullen</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Scrollen naar einde van suggesties voor automatisch aanvullen</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Stijleditor">Stijleditor</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De Stijleditor openen</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Pop-up voor automatisch aanvullen openen</th> + <td><kbd>Ctrl</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Spatie</kbd></td> + </tr> + </tbody> +</table> + +<div id="scratchpad"> +<h2 id="Kladblok">Kladblok</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Het Kladblok openen</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Kladbok-code uitvoeren</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Kladblok-code uitvoeren, het resultaat in de <a href="/nl/docs/Tools/Web_Console#Inspecting_objects" title="/nl/docs/Tools/Web_Console#Inspecting_objects">object-inspector</a> weergeven</th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Kladblok-code uitvoeren,het resultaat als een opmerking invoegen</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Huidige functie opnieuw evalueren</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">De huidige pagina laden, daarna Kladblok-code uitvoeren</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Het blok opslaan</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Een bestaand blok openen</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Een nieuw blok maken</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">Kladblok sluiten</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row">De code ‘prettyprinten’ in Kladblok</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Suggesties voor automatisch aanvullen tonen</th> + <td><kbd>Ctrl</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Spatie</kbd></td> + </tr> + <tr> + <th scope="row">Inlinedocumentatie tonen</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Spatie</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Spatie</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Eyedropper">Eyedropper</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Opdracht</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">De huidige kleur selecteren</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">De Eyedropper sluiten</th> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + <td><kbd>Escape</kbd></td> + </tr> + <tr> + <th scope="row">Verplaatsen per 1 pixel</th> + <td><kbd>Pijltoetsen</kbd></td> + <td><kbd>Pijltoetsen</kbd></td> + <td><kbd>Pijltoetsen</kbd></td> + </tr> + <tr> + <th scope="row">Verplaatsen per 10 pixels</th> + <td><kbd>Shift</kbd> + <kbd>pijltoetsen</kbd></td> + <td><kbd>Shift</kbd> + <kbd>pijltoetsen</kbd></td> + <td><kbd>Shift</kbd> + <kbd>pijltoetsen</kbd></td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/tools/web_console/index.html b/files/nl/tools/web_console/index.html new file mode 100644 index 0000000000..350ee3e001 --- /dev/null +++ b/files/nl/tools/web_console/index.html @@ -0,0 +1,50 @@ +--- +title: Webconsole +slug: Tools/Web_Console +tags: + - Beveiliging + - Debugging + - Gids + - Handleiding + - Security + - Tools + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +<p>De Webconsole:</p> + +<ol> + <li>Houdt informatie bij die betrekking heeft op een webpagina: netwerkaanvragen, JavaScript, CSS, beveiligingsfouten en -waarschuwingen, evenals fout-, waarschuwings- en informatieberichten die expliciet worden vastgelegd door JavaScript-code die in de paginacontext wordt uitgevoerd.</li> + <li>Zorgt ervoor dat u interactie met een webpagina kunt hebben door JavaScript-expressies in de context van de pagina uit te voeren.</li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/docs/Tools/Web_Console/Opening_the_Web_Console">De Webconsole openen</a></dt> + <dd>Beginnen met het gebruik van de Webconsole.</dd> + <dt><a href="/docs/Tools/Web_Console/The_command_line_interpreter">De opdrachtregel-interpreter</a></dt> + <dd>Interactie met een document via de Console.</dd> + <dt><a href="/docs/Tools/Web_Console/Split_console">Console splitsen</a></dt> + <dd>De Console naast andere hulpmiddelen gebruiken.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/docs/Tools/Web_Console/Console_messages">Consoleberichten</a></dt> + <dd>Details over de berichten die de Console bijhoudt.</dd> + <dt><a href="/docs/Tools/Web_Console/Rich_output">Rijke uitvoer</a></dt> + <dd>Objecten die door de Console worden bijgehouden zien en interactie hiermee.</dd> + <dt><a href="/docs/Tools/Web_Console/Keyboard_shortcuts">Sneltoetsen</a></dt> + <dd>Referentie naar sneltoetsen.</dd> +</dl> +</div> +</div> + +<dl> +</dl> diff --git a/files/nl/tools/web_console/sneltoetsen/index.html b/files/nl/tools/web_console/sneltoetsen/index.html new file mode 100644 index 0000000000..34c8a2e3a5 --- /dev/null +++ b/files/nl/tools/web_console/sneltoetsen/index.html @@ -0,0 +1,10 @@ +--- +title: Sneltoetsen +slug: Tools/Web_Console/Sneltoetsen +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +<p>{{ Page ("nl/docs/tools/Keyboard_shortcuts", "web-console") }}</p> + +<h2 id="Algemene_sneltoetsen">Algemene sneltoetsen</h2> + +<p>{{ Page ("nl/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/nl/tools/webide/index.html b/files/nl/tools/webide/index.html new file mode 100644 index 0000000000..2c500ad533 --- /dev/null +++ b/files/nl/tools/webide/index.html @@ -0,0 +1,34 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +<div class="summary"> +<p>WebIDE enables you to create, edit, run, and debug web apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p> + +<p>It also enables you to connect the <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p> +</div> + +<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB (or over Wi-Fi since <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p> + +<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. If you're creating a new app you can start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p> + +<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p> + +<hr> +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">Opening WebIDE</a></dt> + <dd>How to open WebIDE from within Firefox.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">Setting up runtimes</a></dt> + <dd>How to connect to a runtime in which you can install apps, including Firefox OS devices, the the Firefox OS Simulator, and Firefox for Android.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">Creating and editing apps</a></dt> + <dd>How to create, open, and develop apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/The_runtime_menu">The runtime menu</a></dt> + <dd>Once you've selected a runtime, use the runtime menu to get information about the runtime and its apps, modify settings, and take a screenshot.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">Running and debugging apps</a></dt> + <dd>How to install apps to a runtime and debug them using the Firefox Developer Tools.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Working with Cordova apps in WebIDE</a></dt> + <dd>From Firefox 39, you can edit and debug Cordova apps using WebIDE.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a></dt> + <dd>Help for problems with WebIDE, especially problems connecting to a runtime.</dd> +</dl> 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> diff --git a/files/nl/zones/index.html b/files/nl/zones/index.html new file mode 100644 index 0000000000..3a5b4a8e8c --- /dev/null +++ b/files/nl/zones/index.html @@ -0,0 +1,51 @@ +--- +title: Zones +slug: Zones +translation_of: Zones +--- +<p>MDN zones provide you one-stop access to information about specific topic areas or products. Here's a list of all the zones available to you.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Web_and_app_development">Web and app development</h2> + +<dl> + <dt><a href="/en-US/Apps">App Center</a></dt> + <dd>Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.</dd> + <dt><a href="/en-US/docs/Tools">Developer tools</a></dt> + <dd>Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.</dd> + <dt><a href="/en-US/Marketplace">Firefox Marketplace</a></dt> + <dd>An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.</dd> + <dt><a href="/en-US/docs/Games">Game development</a></dt> + <dd>Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Products" name="Products">Products and projects</h2> + +<dl> + <dt><a href="/en-US/docs/Emscripten">Emscripten</a></dt> + <dd>An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.</dd> + <dt><a href="/en-US/docs/L20n">L20n</a></dt> + <dd>A JavaScript localization framework for unleashing your natural language's power with simple code.</dd> + <dt><a href="/en-US/docs/Project:MDN">The MDN project</a></dt> + <dd>The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!1</dd> + <dt><a href="/en-US/Persona">Persona</a></dt> + <dd>A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.</dd> +</dl> + +<h2 id="Mozilla_technologies">Mozilla technologies</h2> + +<dl> + <dt><a href="/en-US/Add-ons">Add-ons</a></dt> + <dd>Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.</dd> + <dt><a href="/en-US/Firefox">Firefox</a></dt> + <dd>Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.</dd> + <dt><a href="/en-US/Firefox_OS">Firefox OS</a></dt> + <dd>A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.</dd> +</dl> +</div> +</div> + +<p> </p> |