diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/de/_redirects.txt | 4 | ||||
| -rw-r--r-- | files/de/_wikihistory.json | 70 | ||||
| -rw-r--r-- | files/de/learn/javascript/first_steps/useful_string_methods/index.html | 656 | ||||
| -rw-r--r-- | files/de/mdn/guidelines/index.html | 14 | ||||
| -rw-r--r-- | files/de/mdn/structures/compatibility_tables/index.html | 501 | ||||
| -rw-r--r-- | files/de/mozilla/add-ons/webextensions/api/browseraction/index.html | 135 | ||||
| -rw-r--r-- | files/de/mozilla/firefox/releases/16/index.html | 104 | ||||
| -rw-r--r-- | files/de/web/accessibility/understanding_wcag/index.html | 59 | ||||
| -rw-r--r-- | files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html | 788 | ||||
| -rw-r--r-- | files/de/web/html/attributes/index.html | 662 | ||||
| -rw-r--r-- | files/de/web/http/headers/set-cookie/index.html | 223 | ||||
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/object/defineproperty/index.html | 413 |
12 files changed, 0 insertions, 3629 deletions
diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 77321def5b..64912779ec 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -389,15 +389,11 @@ /de/docs/Learn/JavaScript/First_steps/lustige_geschichten_generator /de/docs/Learn/JavaScript/First_steps/Silly_story_generator /de/docs/Learn/Server-side/Erste_Schritte /de/docs/Learn/Server-side/First_steps /de/docs/Lokalisierung /de/docs/Glossary/Localization -/de/docs/MDN/Contribute/Content /de/docs/MDN/Guidelines -/de/docs/MDN/Contribute/Guidelines /de/docs/MDN/Guidelines /de/docs/MDN/Contribute/Structures /de/docs/MDN/Structures -/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables /de/docs/MDN/Erste_Schritte /de/docs/MDN/Contribute/Getting_started /de/docs/MDN/Feedback /de/docs/MDN/Contribute/Feedback /de/docs/MDN/Kuma /de/docs/MDN/Yari /de/docs/MDN/Kuma/Beheben_von_KumaScript_Fehlern /de/docs/MDN/Tools/KumaScript/Troubleshooting -/de/docs/MDN/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables /de/docs/MDN/nutzer_leitfaden /de/docs/MDN/Tools /de/docs/MDN/Über /de/docs/MDN/About /de/docs/MDN_at_ten /de/docs/MDN/At_ten diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 8613fb3af6..30c3dc9b00 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -1433,12 +1433,6 @@ "Strubinator" ] }, - "Learn/JavaScript/First_steps/Useful_string_methods": { - "modified": "2020-07-16T22:30:45.510Z", - "contributors": [ - "Mugges" - ] - }, "Learn/JavaScript/First_steps/What_is_JavaScript": { "modified": "2020-09-29T09:38:57.543Z", "contributors": [ @@ -1611,15 +1605,6 @@ "clone" ] }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:28:44.297Z", - "contributors": [ - "chrisdavidmills", - "wbamberg", - "Jeremie", - "Sheppy" - ] - }, "MDN/Structures": { "modified": "2020-09-30T09:04:48.225Z", "contributors": [ @@ -1629,15 +1614,6 @@ "hartmann2012" ] }, - "MDN/Structures/Compatibility_tables": { - "modified": "2020-10-15T22:06:38.248Z", - "contributors": [ - "chrisdavidmills", - "thunderhook", - "wbamberg", - "jogemu" - ] - }, "MDN/Tools": { "modified": "2019-03-23T22:50:19.741Z", "contributors": [ @@ -1725,9 +1701,6 @@ "matschibatschi" ] }, - "Mozilla/Add-ons/WebExtensions/API/browserAction": { - "modified": "2020-10-15T22:26:32.419Z" - }, "Mozilla/Add-ons/WebExtensions/API/commands": { "modified": "2020-10-15T22:08:08.658Z", "contributors": [ @@ -1859,14 +1832,6 @@ "Doozer" ] }, - "Mozilla/Firefox/Releases/16": { - "modified": "2019-03-23T23:24:48.916Z", - "contributors": [ - "wbamberg", - "mrstork", - "Micky261" - ] - }, "Mozilla/Firefox/Releases/27": { "modified": "2019-03-23T23:24:54.141Z", "contributors": [ @@ -4268,12 +4233,6 @@ "paul_thomann" ] }, - "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { - "modified": "2020-10-15T22:34:13.485Z", - "contributors": [ - "Mellbabe" - ] - }, "Web/API/notification": { "modified": "2019-03-23T22:55:22.604Z", "contributors": [ @@ -4338,9 +4297,6 @@ "eminor" ] }, - "Web/Accessibility/Understanding_WCAG": { - "modified": "2020-01-27T09:01:40.600Z" - }, "Web/CSS": { "modified": "2020-12-03T15:50:42.872Z", "contributors": [ @@ -7733,18 +7689,6 @@ "Timmi" ] }, - "Web/HTML/Attributes": { - "modified": "2020-08-17T16:24:34.561Z", - "contributors": [ - "Gitti039", - "steemit-halloworld", - "lkreimann", - "schlagi123", - "LazerPhil", - "Anonymous", - "StevenS77" - ] - }, "Web/HTML/Block-level_elements": { "modified": "2020-05-07T06:16:30.382Z", "contributors": [ @@ -8761,12 +8705,6 @@ "timmyRS" ] }, - "Web/HTTP/Headers/Set-Cookie": { - "modified": "2020-12-03T07:50:32.705Z", - "contributors": [ - "hamishwillee" - ] - }, "Web/HTTP/Headers/Tk": { "modified": "2019-03-23T22:03:12.387Z", "contributors": [ @@ -11914,14 +11852,6 @@ "Hendrikto" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2019-07-01T07:52:37.430Z", - "contributors": [ - "JanSchuermannPH", - "Univream", - "tvormweg" - ] - }, "Web/JavaScript/Reference/Global_Objects/Object/entries": { "modified": "2020-10-15T22:19:15.987Z", "contributors": [ diff --git a/files/de/learn/javascript/first_steps/useful_string_methods/index.html b/files/de/learn/javascript/first_steps/useful_string_methods/index.html deleted file mode 100644 index e0df907ade..0000000000 --- a/files/de/learn/javascript/first_steps/useful_string_methods/index.html +++ /dev/null @@ -1,656 +0,0 @@ ---- -title: Useful string methods -slug: Learn/JavaScript/First_steps/Useful_string_methods -translation_of: Learn/JavaScript/First_steps/Useful_string_methods ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">Jetzt, da wir die Basics kennengelernt haben, gehen wir einen Schritt weiter und sehen uns hilfreiche Methoden an, die wir im Umgang mit Strings anwenden können. Dazu zählt zum Beispiel die Länge eines Textes, hinzufügen oder splitten von Strings, das Austauschen eines Buchstaben in einem Text-String und mehr...</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Voraussetzungen:</th> - <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, ein Verständnis dafür, was JavaScript ist.</td> - </tr> - <tr> - <th scope="row">Ziel:</th> - <td>Zu verstehen, dass Zeichenketten Objekte sind, und zu lernen, wie man einige der grundlegenden Methoden, die auf diesen Objekten verfügbar sind, verwendet, um Zeichenketten zu manipulieren.</td> - </tr> - </tbody> -</table> - -<h2 id="Zeichenketten_als_Objekte">Zeichenketten als Objekte</h2> - -<p id="Useful_string_methods">Die meisten Dinge in JavaScript sind Objekte. Wenn Sie einen String erstellen, zum Beispiel durch die Verwendung von</p> - -<pre class="brush: js">let string = 'This is my string';</pre> - -<p>wird Ihre Variable zu einer String-Objektinstanz und hat als Ergebnis eine große Anzahl von Eigenschaften und Methoden zur Verfügung. Sie können dies sehen, wenn Sie auf die {{jsxref("String")}} Objektseite gehen und die Liste auf der Seite nach unten scrollen!</p> - -<p><strong>Sooo, <u>bevor</u> Du jetzt Kopfschmerzen bekommst:</strong> Die meisten der Methoden must du jetzt am Anfang noch nicht wirklich kennen. Allerdings gibt es da ein paar, die Du am Anfang und später ziemlich oft nutzen wirst. Werfen wir also einen Blick darauf:</p> - -<p>Starten wir mit ein paar Beispielen in der <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a>.</p> - -<h3 id="Länge_einer_Zeichenkette">Länge einer Zeichenkette</h3> - -<p>Das ist einfach. Nutze einfach {{jsxref("String.prototype.length", "length")}} . Probiere einfach mal folgenden Code:</p> - -<pre class="brush: js">let browserType = 'mozilla'; -browserType.length;</pre> - -<p>Das sollte Dir eine "7" zurückgeben, denn "mozilla" ist 7 Zeichen lang. Das kann man für verschiedene Dinge nutzen; Zum Beispiel: Du möchtest die Zeichenlänge einer Reihe von Namen herausfinden, um diese in der Reihenfolge ihrer Länge auszugeben. Oder lasse einen Nutzer wissen, das seine gerade getätigte Eingabe des Usernamens viel zu lang ist und nicht den Vorgaben entspricht.</p> - -<h3 id="Retrieving_a_specific_string_character">Retrieving a specific string character</h3> - -<p>On a related note, you can return any character inside a string by using <strong>square bracket notation</strong> — this means you include square brackets (<code>[]</code>) on the end of your variable name. Inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:</p> - -<pre class="brush: js">browserType[0];</pre> - -<p>Remember: computers count from 0, not 1! You could use this to, for example, find the first letter of a series of strings and order them alphabetically.</p> - -<p>To retrieve the last character of <em>any</em> string, we could use the following line, combining this technique with the <code>length</code> property we looked at above:</p> - -<pre class="brush: js">browserType[browserType.length-1];</pre> - -<p>The length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using <code>length-1</code> gets us the last character.</p> - -<h3 id="Finding_a_substring_inside_a_string_and_extracting_it">Finding a substring inside a string and extracting it</h3> - -<ol> - <li>Sometimes you'll want to find if a smaller string is present inside a larger one (we generally say <em>if a substring is present inside a string</em>). This can be done using the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, which takes a single {{glossary("parameter")}} — the substring you want to search for. Try this: - - <pre class="brush: js">browserType.indexOf('zilla');</pre> - This gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla". Such code could be used to filter strings. For example, we may have a list of web addresses and only want to print out the ones that contain "mozilla".</li> -</ol> - -<ol start="2"> - <li>This can be done in another way, which is possibly even more effective. Try the following: - <pre class="brush: js">browserType.indexOf('vanilla');</pre> - This should give you a result of <code>-1</code> — this is returned when the substring, in this case 'vanilla', is not found in the main string.<br> - <br> - You could use this to find all instances of strings that <strong>don't</strong> contain the substring 'mozilla', or <strong>do,</strong> if you use the negation operator, as shown below. You could do something like this: - - <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) { - // do stuff with the string -}</pre> - </li> - <li>When you know where a substring starts inside a string, and you know at which character you want it to end, {{jsxref("String.prototype.slice()", "slice()")}} can be used to extract it. Try the following: - <pre class="brush: js">browserType.slice(0,3);</pre> - This returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. So the slice happens from the first position, up to, but not including, the last position. In this example, since the starting index is 0, the second parameter is equal to the length of the string being returned.<br> - </li> - <li>Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter! Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following: - <pre class="brush: js">browserType.slice(2);</pre> - This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. </li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: The second parameter of <code>slice()</code> is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.</p> -</div> - -<h3 id="Changing_case">Changing case</h3> - -<p>The string methods {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} and {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.</p> - -<p>Let's try entering the following lines to see what happens:</p> - -<pre class="brush: js">let radData = 'My NaMe Is MuD'; -radData.toLowerCase(); -radData.toUpperCase();</pre> - -<h3 id="Updating_parts_of_a_string">Updating parts of a string</h3> - -<p>You can replace one substring inside a string with another substring using the {{jsxref("String.prototype.replace()", "replace()")}} method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.</p> - -<p>It takes two parameters — the string you want to replace, and the string you want to replace it with. Try this example:</p> - -<pre class="brush: js">browserType.replace('moz','van');</pre> - -<p>This returns "vanilla" in the console. But if you check the value of <code>browserType</code>, it is still "mozilla'. To actually update the value of the <code>browserType</code> variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. So you'd have to actually write this: <code>browserType = browserType.replace('moz','van');</code></p> - -<h2 id="Active_learning_examples">Active learning examples</h2> - -<p>In this section we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.</p> - -<p>Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.</p> - -<h3 id="Filtering_greeting_messages">Filtering greeting messages</h3> - -<p>In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the <code>if( ... )</code> structure, to test each string and only print it in the list if it is a Christmas message.</p> - -<ol> - <li>First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?</li> - <li>You'll then need to write a conditional test of the form <em>operand1 operator operand2</em>. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?</li> - <li>Hint: In this case it is probably more useful to test whether the method call <em>isn't</em> equal to a certain result.</li> -</ol> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let greetings = ['Happy Birthday!', - 'Merry Christmas my love', - 'A happy Christmas to all the family', - 'You\'re all I want for Christmas', - 'Get well soon']; - -for (let i = 0; i < greetings.length; i++) { - let input = greetings[i]; - // Your conditional test needs to go inside the parentheses - // in the line below, replacing what's currently there - if (greetings[i]) { - let listItem = document.createElement('li'); - listItem.textContent = input; - list.appendChild(listItem); - } -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">const textarea = document.getElementById('code'); -const reset = document.getElementById('reset'); -const solution = document.getElementById('solution'); -let code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -const jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet greetings = [\'Happy Birthday!\',' + -'\n \'Merry Christmas my love\',' + -'\n \'A happy Christmas to all the family\',' + -'\n \'You\\\'re all I want for Christmas\',' + -'\n \'Get well soon\'];' + -'\n' + -'\nfor (let i = 0; i < greetings.length; i++) {' + -'\n let input = greetings[i];' + -'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + -'\n let result = input;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n }' + -'\n}'; - -let solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - const caretPos = textarea.selectionStart; - const front = (textarea.value).substring(0, caretPos); - const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Fixing_capitalization">Fixing capitalization</h3> - -<p>In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:</p> - -<ol> - <li>Convert the whole of the string contained in the <code>input</code> variable to lower case and store it in a new variable.</li> - <li>Grab the first letter of the string in this new variable and store it in another variable.</li> - <li>Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.</li> - <li>Change the value of the <code>result</code> variable to equal to the final result, not the <code>input</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.</p> -</div> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; - -for (let i = 0; i < cities.length; i++) { - let input = cities[i]; - // write your code just below here - - let result = input; - let listItem = document.createElement('li'); - listItem.textContent = result; - list.appendChild(listItem); -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">const textarea = document.getElementById('code'); -const reset = document.getElementById('reset'); -const solution = document.getElementById('solution'); -let code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -const jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + -'\n' + -'\nfor (let i = 0; i < cities.length; i++) {' + -'\n let input = cities[i];' + -'\n let lower = input.toLowerCase();' + -'\n let firstLetter = lower.slice(0,1);' + -'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + -'\n let result = capitalized;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n' + -'\n}'; - -let solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - const caretPos = textarea.selectionStart; - const front = (textarea.value).substring(0, caretPos); - const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Making_new_strings_from_old_parts">Making new strings from old parts</h3> - -<p>In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:</p> - -<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> - -<p>We want to extract the station code and name, and put them together in a string with the following structure:</p> - -<pre>MAN: Manchester Piccadilly</pre> - -<p>We'd recommend doing it like this:</p> - -<ol> - <li>Extract the three-letter station code and store it in a new variable.</li> - <li>Find the character index number of the semicolon.</li> - <li>Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.</li> - <li>Concatenate the two new variables and a string literal to make the final string.</li> - <li>Change the value of the <code>result</code> variable to equal to the final string, not the <code>input</code>.</li> -</ol> - -<div class="hidden"> -<h6 id="Playable_code_3">Playable code 3</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 125px;"> - -<ul> - -</ul> - -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> -const list = document.querySelector('.output ul'); -list.innerHTML = ''; -let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', - 'GNF576746573fhdg4737dh4;Greenfield', - 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', - 'SYB4f65hf75f736463;Stalybridge', - 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; - -for (let i = 0; i < stations.length; i++) { - let input = stations[i]; - // write your code just below here - - let result = input; - let listItem = document.createElement('li'); - listItem.textContent = result; - list.appendChild(listItem); -} -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> -</pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<pre class="brush: js">const textarea = document.getElementById('code'); -const reset = document.getElementById('reset'); -const solution = document.getElementById('solution'); -let code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = jsSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -const jsSolution = 'const list = document.querySelector(\'.output ul\');' + -'\nlist.innerHTML = \'\';' + -'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + -'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + -'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + -'\n \'SYB4f65hf75f736463;Stalybridge\',' + -'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + -'\n' + -'\nfor (let i = 0; i < stations.length; i++) {' + -'\n let input = stations[i];' + -'\n let code = input.slice(0,3);' + -'\n let semiC = input.indexOf(\';\');' + -'\n let name = input.slice(semiC + 1);' + -'\n let result = code + \': \' + name;' + -'\n let listItem = document.createElement(\'li\');' + -'\n listItem.textContent = result;' + -'\n list.appendChild(listItem);' + -'\n}'; - -let solutionEntry = jsSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - const caretPos = textarea.selectionStart; - const front = (textarea.value).substring(0, caretPos); - const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> diff --git a/files/de/mdn/guidelines/index.html b/files/de/mdn/guidelines/index.html deleted file mode 100644 index cbf0c6aa77..0000000000 --- a/files/de/mdn/guidelines/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: MDN content and style guides -slug: MDN/Guidelines -tags: - - Guidelines - - Landing - - MDN Meta -translation_of: MDN/Guidelines ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p><span class="seoSummary">These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/de/mdn/structures/compatibility_tables/index.html b/files/de/mdn/structures/compatibility_tables/index.html deleted file mode 100644 index d235d718a3..0000000000 --- a/files/de/mdn/structures/compatibility_tables/index.html +++ /dev/null @@ -1,501 +0,0 @@ ---- -title: Kompatibilitäts Tabellen -slug: MDN/Structures/Compatibility_tables -tags: - - Browser Kompatibilität -translation_of: MDN/Structures/Compatibility_tables -original_slug: MDN/Structures/Kompatibilitaets_Tabellen ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary">MDN hat ein Standard Format für Kompatibilitätstabellen für unsere Offenes Web Dokumentation; Das beeinhaltet die Dokumentation von Technologien, wie zum Beispiel, DOM, HTML, CSS, JavaScript, SVG und viele weitere, welche in jedem Browsern verwendet werden. Dieser Artikel bearbeitet, wie unsere Features verwendet werden sollen um Kompatibilitätsdaten zu den MDN Seiten hinzuzufügen.</p> - -<div class="warning"> -<p><strong>Wichtig</strong>: <strong><em>Die Art, wie die Daten generiert werden, wurde geändert</em></strong>. Früher wurden unsere Tabellen in die Seite eingefügt und die Daten wurden manuell befüllt. Dies ist Ineffizient, macht die Pflege der Daten schwierig und sorgt für unflexible Daten. Deswegen verschieben wir den Speicher unserer Browserkompatibilitätsdaten in ein Daten Repository (siehe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) und generieren die Tabellen mit einem Programm.<br> - <br> - In dieser Anleitung dokumentieren wir die neue Art Kompatibilitätsdaten zu MDN hinzuzufügen, aber wir haben die Dokumentation der alten Art immer noch behalten, weil du manuelle Tabellen noch länger auf MDN sehen wirst. Wenn du die alte Dokumentation sehen musst, kannst du unseren <a href="/en-US/docs/MDN/Contribute/Structures/Old_compatibility_tables">Alten Kompatibiltätstabellen</a> Artikel besuchen.</p> -</div> - -<div class="note"> -<p><strong>Notiz</strong>: Wenn du Hilfe zu einem der Schritte dieser Anleitung brauchst, würden wir uns freuen, wenn du uns im <a href="https://discourse.mozilla-community.org/c/mdn">MDN Diskussionsforum</a> kontaktierst.</p> -</div> - -<h2 id="Wie_ist_das_Repository_erreichbar">Wie ist das Repository erreichbar?</h2> - -<p>Die Daten sind in einem GitHub Repository gespeichert — siehe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Um darauf zugreifen zu können, musst du einen GitHub Benutzer erstellen,das browser-compat-data Repository in deinen Account forken, und deinen Fork auf deinen Rechner clonen.</p> - -<h2 id="Wähle_ein_Feature_für_das_du_Daten_hinzufügen_willst">Wähle ein Feature für das du Daten hinzufügen willst</h2> - -<p>Such dir zuerst ein Feature aus, zu dem du Browser-Kompatibilitäts-Daten hinzufügen willst. Das könnte, zum Beispiel ein HTML-Element, eine CSS-Eigenschaft, ein JS-Sprachen-Feature oder ein JS-API-Schnittstelle sein. Wir würden uns wünschen, dass du an API Features arbeitest, da wir bereits Leute haben, die an HTML, JS und CSS arbeiten. Du findest den Status eines Features, für das noch Daten auf das Repository hinzugefügt werden müssen, auf unserer <a href="https://docs.google.com/spreadsheets/d/1ivgyPBr9Lj3Wvj5kyndT1rgGbX-pGggrxuMtrgcOmjM/edit#gid=926663640">Browser-Kompatibilitäts-Daten Verschiebungstabelle</a>.</p> - -<p>Der Ablauf für das Hinzufügen von Browser-Kompatibilitäts-Daten lautet:</p> - -<ol> - <li>Öffne die Tabelle und wähle ein Feature an dem nicht schon gearbeitet wird oder bereits übertragen wurde. Schreibe deinen Namen in die "Who" Spalte, wir bevorzugen deinen MDN Nutzernamen, damit wir dich, falls notwendig, über deine E-Mail-Adresse kontaktieren können.</li> - <li>Falls das Feature, an dem du Arbeiten willst noch nicht in der Tabelle ist, füge eine Zeile unter Verwendung mit dem gleichen Format und Bennenung ein (z.B. Getrennte Zeilen für unterschiedliche HTML-Elemente, CSS-Eigenschaften, CSS-Selectoren, JS-Objekt und Schnittstellen einer API).</li> - <li>Sobald du an einem Feature arbeitest, ändere den Status auf "In progress".</li> - <li>Sobald du daten hinzugefügt hast und einen Pull Request zum Main Repo gestellt hast, setze den Status auf "PR done".</li> - <li>Wenn deine Daten in das Repo gemerged und zum npm Package hinzugefügt wurden, ändere den Status dementsprechend.</li> - <li>Sobald du die Dokumentations-Seite(n) das neue Makro angegeben hast, damit die aktualisierten Tabellen generiert werden, setze den Status auf "Article updated". Damit ist deine Arbeit abgeschlossen.</li> -</ol> - -<h2 id="Preparing_to_add_the_data">Preparing to add the data</h2> - -<p>Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:</p> - -<p>Let's look at a simple way to make sure your fork is to-to-date is as follows:</p> - -<h3 id="Adding_the_main_browser-compat-data_repo_as_a_remote">Adding the main browser-compat-data repo as a remote</h3> - -<p>Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):</p> - -<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre> - -<p>If you are unsure whether you've done this, you can check what remotes your repo has using</p> - -<pre class="brush: bash notranslate">git remote -v</pre> - -<h3 id="Updating_your_fork_with_the_remotes_content">Updating your fork with the remote's content</h3> - -<p>Now, whenever you want to update your fork, you can do so by:</p> - -<ol> - <li> - <p>Making sure you are in the master branch:</p> - - <pre class="brush: bash notranslate">git checkout master</pre> - </li> - <li> - <p>fetching the up-to-date repo contents using the following:</p> - - <pre class="brush: bash notranslate">git fetch upstream</pre> - </li> - <li> - <p>rebasing the contents of your master with the main repo's contents:</p> - - <pre class="brush: bash notranslate">git rebase upstream/master</pre> - </li> - <li> - <p>pushing these updates back to your remote fork using this:</p> - - <pre class="brush: bash notranslate">git push -f</pre> - </li> -</ol> - -<h3 id="Creating_a_new_branch_to_do_your_work_in">Creating a new branch to do your work in</h3> - -<p>Next, go to your remote fork (it will be at <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and create a new branch to store your changes for this data addition. This can be done by:</p> - -<ol> - <li>Clicking on the "Branch: Master" button.</li> - <li>Entering a new branch name into the "Find or create a branch..." text field.</li> - <li>Pressing the resulting "Create branch <em>name-of-branch</em> from Master" button.</li> -</ol> - -<p>For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".</p> - -<h3 id="Switching_to_the_new_branch">Switching to the new branch</h3> - -<p>At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:</p> - -<pre class="brush: bash notranslate">git pull</pre> - -<p>Now switch to your new branch using this:</p> - -<pre class="brush: bash notranslate">git checkout<em> name-of-branch</em></pre> - -<p>You should now be ready to start adding your data!</p> - -<h2 id="Adding_the_data">Adding the data</h2> - -<p>To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:</p> - -<ul> - <li>HTML: One file per HTML element, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. The file should be called the name of the element, all in lower case, e.g. <code>div.json</code>.</li> - <li>CSS: One file per CSS property or selector, contained in the appropriate directory (see <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). The file should be called the name of the feature, all in lower case, e.g. <code>background-color.json</code>, or <code>hover.json</code>.</li> - <li>JS: One file per JS object, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. The file should be called the exact name of the object, with the casing preserved, e.g. <code>Date.json</code> or <code>InternalError.json</code>.</li> - <li>APIs: One file per interface contained in the API, put in <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Each file should be called the exact name of the interface, with the casing preserved, e.g. The WebVR API has <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You'll notice that the repo also contains data for <a href="/en-US/Add-ons/WebExtensions">Browser Extensions</a> and <a href="/en-US/docs/Web/HTTP">HTTP</a>. These data sets are basically finished as they stand, but more features may need to be added in the future.</p> -</div> - -<p>Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">detailed schema description here</a>.</p> - -<h3 id="Basic_compat_data_structure">Basic compat data structure</h3> - -<p>Let's look at an example. CSS property JSON files for example need the following basic structure:</p> - -<pre class="brush: json notranslate">{ - "css": { - "properties": { - "border-width": { - "__compat": { - ... - } - } - } - } -}</pre> - -<p>You have the <code>css</code> object, inside of which is a <code>properties</code> object. Inside the <code>properties</code> object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a <code>__compat</code> member, inside of which the actual data goes.</p> - -<p>The above data is found in the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> file — compare this to the <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">rendered border-width support table on MDN</a>.</p> - -<p>Other types of features work in the same way, but with different object names:</p> - -<ul> - <li>CSS selectors work in basically the same way as CSS properties, except that the top-level object structure is <code>css.selectors</code> instead of <code>css.properties</code>. See <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> for an example.</li> - <li>HTML data works in basically the same way, except that the top-level object structure is <code>html.elements</code>. See <code>article.json</code> for an example.</li> - <li>The top level object structure for JS built-in objects is <code>javascript.builtins</code>; see <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> for an example.</li> -</ul> - -<div> -<p>In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).</p> - -<h3 id="Basic_structure_inside_a_feature">Basic structure inside a feature</h3> - -<p>Inside a feature <code>__compat</code> member, you need to include the following members:</p> - -<ul> - <li><code>mdn_url</code>: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. <code>/docs/...</code> not <code>/docs/en-US/...</code> (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.</li> - <li><code>support</code>: Contains members representing the browser support information for this feature in all the different browsers we want to report.</li> - <li><code>status</code>: Contains members reporting the standards track status of this feature.</li> -</ul> - -<p>The names of the browser members are defined in the schema (see <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.</p> - -<p>In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:</p> - -<ul> - <li>A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".</li> - <li><code>true</code>: If a browser supports a feature but you don't know the exact version number, use the value <code>true</code>. This equivalent to the <code>\{{CompatVersionUnknown}}</code> macro call in the old manual tables.</li> - <li><code>false</code>: If a browser does not support a feature, use the value <code>false</code>. This is equivalent to the the <code>\{{CompatNo}}</code> macro call in the old manual tables.</li> - <li><code>null</code>: If you don't know whether a browser supports a feature or not, use the value <code>null</code>. This is equivalent to the <code>\{{CompatUnknown}}</code> macro call in the old manual tables.</li> -</ul> - -<p>Inside the <code>status</code> member, you'll include three submembers:</p> - -<ul> - <li> "experimental": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a>, or <code>false</code> otherwise.</li> - <li>"standard_track": This should be set to <code>true</code> if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or <code>false</code> otherwise.</li> - <li>"deprecated": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">deprecated</a>, or <code>false</code> otherwise.</li> -</ul> - -<p>The feature data for <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">border-width</a> (also see <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) is shown below as an example:</p> - -<pre class="brush: json notranslate">"__compat": { - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width", - "support": { - "chrome": { - "version_added": "1" - }, - "webview_android": { - "version_added": "2" - }, - "edge": { - "version_added": true - }, - "edge_mobile": { - "version_added": true - }, - "firefox": { - "version_added": "1" - }, - "firefox_android": { - "version_added": "1" - }, - "ie": { - "version_added": "4" - }, - "ie_mobile": { - "version_added": "6" - }, - "opera": { - "version_added": "3.5" - }, - "opera_android": { - "version_added": "11" - }, - "safari": { - "version_added": "1" - }, - "safari_ios": { - "version_added": "3" - } - }, - "status": { - "experimental": false, - "standard_track": true, - "deprecated": false - } -}</pre> - -<h4 id="Adding_a_description">Adding a description</h4> - -<p>There is a fourth, optional, member that can go inside the __compat member — <code>description</code>. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:</p> - -<pre class="brush: json notranslate">{ - "api": { - "AbortController": { - "__compat": { - ... - }, - "AbortController": { - "__compat": { - "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController", - "description": "<code>AbortController()</code> constructor", - "support": { - ... - } - } - } - - ... etc. - } - } -}</pre> - -<h3 id="Sub-features">Sub-features</h3> - -<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p> - -<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p> - -<pre class="brush: json notranslate">{ - "css": { - "properties": { - "background-color": { - "__compat": { - ... - }, - "alpha_ch_for_hex": { - "__compat": { - ... - }, - } - } - } - } -}</pre> - -<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p> - -<pre class="brush: json notranslate">{ - "api": { - "VRDisplay": { - "__compat": { - ... - }, - "cancelAnimationFrame": { - "__compat": { - ... - } - }, - "capabilities": { - "__compat": { - ... - } - }, - - ... etc. - - } - } -}</pre> - -<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p> -</div> - -<h2 id="Adding_data_Advanced_cases">Adding data: Advanced cases</h2> - -<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p> - -<h3 id="Including_a_footnote">Including a footnote</h3> - -<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>) (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p> - -<pre class="brush: json notranslate">"chrome_android": { - "version_added": true, - "notes": "Currently supported only by Google Daydream." -}</pre> - -<h3 id="Including_a_vendor_prefix">Including a vendor prefix</h3> - -<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": true, - "prefix": "-moz-" -}</pre> - -<h3 id="Including_browser_preferences_or_flags">Including browser preferences or flags</h3> - -<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p> - -<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p> - -<ul> - <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li> - <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li> - <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li> -</ul> - -<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p> - -<pre class="brush: json notranslate">"chrome": { - "version_added": "50", - "flags": [ - { - "type": "preference", - "name": "Enable Experimental Web Platform Features", - "value_to_set": "true" - } - ] -},</pre> - -<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": "57", - "flags": [ - { - "type": "preference", - "name": "dom.streams.enabled", - "value_to_set": "true" - }, - { - "type": "preference", - "name": "javascript.options.streams", - "value_to_set": "true" - } - ] -},</pre> - -<h3 id="Including_a_version_where_support_was_removed">Including a version where support was removed</h3> - -<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": "35", - "version_removed": "47", -},</pre> - -<h3 id="Including_multiple_support_points_for_the_same_browser_entry">Including multiple support points for the same browser entry</h3> - -<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p> - -<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p> - -<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p> - -<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p> - -<pre class="brush: json notranslate">"chrome": [ - { - "version_added": "47" - }, - { - "version_added": "35", - "version_removed": "47", - "flags": [ - { - "type": "preference", - "name": "Enable Experimental Web Platform Features", - "value_to_set": "true" - } - ] - } -],</pre> - -<div class="note"> -<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p> -</div> - -<h3 id="Including_an_alternative_name">Including an alternative name</h3> - -<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p> - -<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p> - -<div class="note"> -<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p> -</div> - -<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p> - -<ul> - <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li> - <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li> - <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li> -</ul> - -<p>To represent this in the data, we used the following JSON:</p> - -<pre class="brush: json notranslate">"firefox": [ - { - "version_added": "4", - "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0." - }, - { - "prefix": "-webkit-", - "version_added": "49", - "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>." - }, - { - "alternative_name": "-moz-border-radius-topright", - "version_added": "1", - "version_removed": "12" - } -],</pre> - -<h2 id="Pushing_a_change_back_to_the_main_repo">Pushing a change back to the main repo</h2> - -<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p> - -<ul> - <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li> - <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li> - <li><code>npm run render dotted.path.to.feature</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render css.properties.background</code> shows the table markup for the {{cssxref("background")}} property.</li> -</ul> - -<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p> - -<pre class="brush: bash notranslate">git add . -git commit -m 'adding compat data for name-of-feature' -git push</pre> - -<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.</p> - -<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p> - -<h2 id="Inserting_the_data_into_MDN_pages">Inserting the data into MDN pages</h2> - -<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p> - -<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p> - -<pre class="brush: html notranslate"><div class="hidden"> -<p>The compatibility table on 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> -</div></pre> - -<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p> - -<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p> - -<hr> -<div class="hidden"> -<p>The compatibility table on 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> -</div> - -<p>{{Compat("api.VRDisplay.capabilities")}}</p> - -<div class="note"> -<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p> -</div> diff --git a/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html deleted file mode 100644 index 184dccf3d6..0000000000 --- a/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: browserAction -slug: Mozilla/Add-ons/WebExtensions/API/browserAction -tags: - - API - - Add-ons - - Extensions - - Interface - - NeedsTranslation - - Non-standard - - Reference - - TopicStub - - WebExtensions - - browserAction -translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction ---- -<div>{{AddonSidebar}}</div> - -<p>Adds a button to the browser's toolbar.</p> - -<p>A <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> is a button in the browser's toolbar.</p> - -<p>You can associate a popup with the button. The popup is specified using HTML, CSS and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via <a href="/en-US/Add-ons/WebExtensions/Modify_a_web_page#Messaging">messages</a>.</p> - -<p>If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.</p> - -<p>You can define most of a browser action's properties declaratively using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> key in the manifest.json.</p> - -<p>With the <code>browserAction</code> API, you can:</p> - -<ul> - <li>use {{WebExtAPIRef("browserAction.onClicked")}} to listen for clicks on the icon.</li> - <li>get and set the icon's properties — icon, title, popup, and so on. You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.</li> -</ul> - -<h2 id="Types">Types</h2> - -<dl> - <dt>{{WebExtAPIRef("browserAction.ColorArray")}}</dt> - <dd>An array of four integers in the range 0-255 defining an RGBA color.</dd> - <dt>{{WebExtAPIRef("browserAction.ImageDataType")}}</dt> - <dd>Pixel data for an image. Must be an <code><a href="/en-US/docs/Web/API/ImageData">ImageData</a></code> object (for example, from a {{htmlelement("canvas")}} element).</dd> -</dl> - -<h2 id="Functions">Functions</h2> - -<dl> - <dt>{{WebExtAPIRef("browserAction.setTitle()")}}</dt> - <dd>Sets the browser action's title. This will be displayed in a tooltip.</dd> - <dt>{{WebExtAPIRef("browserAction.getTitle()")}}</dt> - <dd>Gets the browser action's title.</dd> - <dt>{{WebExtAPIRef("browserAction.setIcon()")}}</dt> - <dd>Sets the browser action's icon.</dd> - <dt>{{WebExtAPIRef("browserAction.setPopup()")}}</dt> - <dd>Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.</dd> - <dt>{{WebExtAPIRef("browserAction.getPopup()")}}</dt> - <dd>Gets the HTML document set as the browser action's popup.</dd> - <dt>{{WebExtAPIRef("browserAction.openPopup()")}}</dt> - <dd>Open the browser action's popup.</dd> - <dt>{{WebExtAPIRef("browserAction.setBadgeText()")}}</dt> - <dd>Sets the browser action's badge text. The badge is displayed on top of the icon.</dd> - <dt>{{WebExtAPIRef("browserAction.getBadgeText()")}}</dt> - <dd>Gets the browser action's badge text.</dd> - <dt>{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}</dt> - <dd>Sets the badge's background color.</dd> - <dt>{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}</dt> - <dd>Gets the badge's background color.</dd> - <dt>{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}</dt> - <dd>Sets the badge's text color.</dd> - <dt>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}</dt> - <dd>Gets the badge's text color.</dd> - <dt>{{WebExtAPIRef("browserAction.enable()")}}</dt> - <dd>Enables the browser action for a tab. By default, browser actions are enabled for all tabs.</dd> - <dt>{{WebExtAPIRef("browserAction.disable()")}}</dt> - <dd>Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.</dd> - <dt>{{WebExtAPIRef("browserAction.isEnabled()")}}</dt> - <dd>Checks whether the browser action is enabled or not.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<dl> - <dt>{{WebExtAPIRef("browserAction.onClicked")}}</dt> - <dd>Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.</dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.api.browserAction")}}</p> - -<div class="hidden note"> -<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> - -<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> -</div> - -<p>{{WebExtExamples("h2")}}</p> - -<div class="note"><strong>Acknowledgements</strong> - -<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p> - -<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> -</div> - -<div class="hidden"> -<pre>// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> diff --git a/files/de/mozilla/firefox/releases/16/index.html b/files/de/mozilla/firefox/releases/16/index.html deleted file mode 100644 index 1f341acc1e..0000000000 --- a/files/de/mozilla/firefox/releases/16/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Firefox 16 für Entwickler -slug: Mozilla/Firefox/Releases/16 -tags: - - Firefox - - Firefox 16 -translation_of: Mozilla/Firefox/Releases/16 ---- -<div>{{FirefoxSidebar}}</div><p>Firefox 16 erschien am 9. Oktober 2012. Dieser Artikel listet die hauptsächlichen Änderungen auf, welche nicht nur für Web-Entwickler gedacht sind, aber auch Firefox- , Gecko- und AddOn-Entwickler.</p> - -<p>Möchten Sie helfen Firefox 16 zu dokumentieren? Schauen Sie auf die <a href="http://beta.elchi3.de/doctracker/#list=fx&version=16.0">Liste von Bugs, über die geschrieben werden sollte</a> und schreibe Sie dazu.</p> - -<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2> - -<h3 id="HTML">HTML</h3> - -<ul> - <li>Das {{HTMLElement("meter")}}-Element ist nun verfügbar.</li> - - <li>Die HTML Microdata API kann nun genutzt werden. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=591467">bug 591467</a>)</li> - <li>{{HTMLElement("canvas")}} ist nun für alle CSS <code>currentColor</code> verfügbar. ({{bug("629882")}})</li> - <li>{{HTMLElement("input")}} erlaubt nun Filterung durch verschiedene Mimetypes in <code>accept</code>. ({{bug("565274")}})</li> - <li>Die Attribute <code>width</code> and <code>height</code> wurden zum Element {{HTMLElement("input")}} hinzugefügt. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=683855">bug 683855</a>)</li> -</ul> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_transforms">CSS Animations</a> has been landed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=762302">bug 762302</a>)</li> - <li>Support for reverse animation direction (keywords <code>reverse</code> and <code>alternate-reverse</code> on the {{cssxref("animation-direction")}} property) has been added. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=655920">bug 655920</a>)</li> - <li>You can now animate the CSS {{cssxref("height")}} and {{cssxref("width")}} properties.</li> - <li>The {{cssxref("animation-duration")}} and {{cssxref("transition-duration")}} CSS properties now reject negative values (and do not handle them as <code>0s</code> anymore) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=773102" title="https://bugzilla.mozilla.org/show_bug.cgi?id=773102">bug 773102</a>)</li> - <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_transforms" title="CSS/Using_CSS_transforms">CSS Transforms</a> has been landed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=745523">bug 745523</a>)</li> - <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_gradients" title="CSS/Using_CSS_gradients">CSS Gradients</a> has been landed. Note that the syntax has changed significantly since the prefixed version, so you should read up on this. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=752187">bug 752187</a>)</li> - <li>The {{cssxref("box-sizing", "-moz-box-sizing")}} implementation has been updated to apply to table cells too. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=338554">bug 338554</a>)</li> - <li>Support for the standard, unprefixed version of {{cssxref("calc")}} has been landed. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771678" title="https://bugzilla.mozilla.org/show_bug.cgi?id=771678">bug 771678</a>)</li> - <li>The {{cssxref("<resolution>")}} CSS data type has been extended to support the <code>dppx</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=741644" title="https://bugzilla.mozilla.org/show_bug.cgi?id=741644">bug 741644</a>)</li> - <li>On screen, for <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media_queries">media queries</a>, <code>dppx</code>, <code>dpi</code>, and <code>dpcm</code> are now representing values based on CSS pixels and no more with the physical units. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771390" title="https://bugzilla.mozilla.org/show_bug.cgi?id=771390">bug 771390</a>)</li> - <li>Three new pseudo-classes <code>:-moz-meter-optimum</code>, <code>:-moz-meter-sub-optimum</code>, and <code>:-moz-meter-sub-sub-optimum</code> have been added for accessing/styling a {{HTMLElement("meter")}} element in a paraticular state. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=660238" title="https://bugzilla.mozilla.org/show_bug.cgi?id=660238">bug 660238</a>)</li> - <li>The {{cssxref("-moz-appearance")}} property gains two new values: <code>meterbar</code> and <code>meterchunk</code>. They represent components inside the {{HTMLElement("meter")}} element. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=659999" title="https://bugzilla.mozilla.org/show_bug.cgi?id=659999">bug 659999</a>)</li> - <li>The {{cssxref("min-width")}} and {{cssxref("min-height")}} now supports the <code>auto</code> keyword for flex items (and resolves to <code>0</code> for other items). ({{bug("763689")}})</li> -</ul> - -<h3 id="DOM">DOM</h3> - -<ul> - <li>Two new properties <code>width</code> and <code>height</code> have been added to the {{domxref("HTMLInputElement")}} interface (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=683855">bug 683855</a>).</li> - <li>IndexedDB properties and methods have been unprefixed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=726378">bug 726378</a>)</li> - <li>The <a href="/en-US/docs/DOM/window.navigator.battery" title="DOM/window.navigator.battery">Battery API</a> is now unprefixed.</li> - <li>The Vibration API has been unprefixed.</li> - <li>The {{domxref("Keyboard")}} interface, still prefixed as <code>mozKeyboard</code>, now has the {{domxref("Keyboard.setSelectedOption()")}} and {{domxref("Keyboard.setValue()")}} methods, as well as the {{domxref("Keyboard.onfocuschange")}} property.</li> - <li>The <a href="/en-US/docs/LiveConnect_Reference/java" title="/en-US/docs/LiveConnect_Reference/java"><code>java</code></a> and <a href="/en-US/docs/LiveConnect_Reference/Packages" title="/en-US/docs/LiveConnect_Reference/Packages"><code>Packages</code></a> global objects have been removed. See <a href="/en-US/docs/LiveConnect" title="/en-US/docs/LiveConnect">LiveConnect</a>.</li> - <li>The <code>CSSRule.type</code> associated with {{domxref("CSSNamespaceRule")}} has been updated from <code>UNKNOWN_RULE</code> (<code>0</code>) to <code>NAMESPACE_RULE</code> (<code>10</code>). (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=765590" title="https://bugzilla.mozilla.org/show_bug.cgi?id=765590">bug 765590</a>)</li> - <li>WebSMS API: {{domxref("SmsRequest")}} has been superseded by the more general {{domxref("DOMRequest")}}.</li> -</ul> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> objects now offer <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite">isFinite</a>()</code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toInteger">toInteger</a>()</code>, and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger">isInteger</a>()</code> methods. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=761480">bug 761480</a>, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=761495">bug 761495</a>)</li> - <li>The Harmony <a href="http://wiki.ecmascript.org/doku.php?id=harmony:spread" title="http://wiki.ecmascript.org/doku.php?id=harmony:spread">spread operator</a> is now supported in <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> initializers (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=574130">bug 574130</a>). Note it is not yet supported in calls (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=762363" title="https://bugzilla.mozilla.org/show_bug.cgi?id=762363">bug 762363</a>).</li> -</ul> - -<h3 id="WebGL">WebGL</h3> - -<h3 id="SVG">SVG</h3> - -<h3 id="MathML">MathML</h3> - -<ul> - <li>The <code>lspace</code> and <code>rspace</code> attributes of {{MathMLElement("mo")}} now correctly default to <code>thickmathspace</code>.</li> -</ul> - -<h3 id="Network">Network</h3> - -<h3 id="Developer_tools">Developer tools</h3> - -<ul> - <li>There's now a handy developer toolbar you can access by going to Tools > Web Developer > Developer Toolbar, or by pressing Ctrl-Shift-V (Cmd-Opt-V on Mac OS X). This toolbar offers a command line interface as well as buttons for quickly accessing useful tools. The graphical command line interface (<a href="/en-US/docs/Tools/GCLI" title="Tools/GCLI">GCLI</a>) is easy to expand and additional commands are expected in the future. Type "help" to get a list of supported commands.</li> - <li>The Web Console now displays an error count so you can quickly see how much work you have ahead of you.</li> - <li>The Scratchpad now offers a list of recently opened files.</li> -</ul> - -<h2 id="Changes_for_Open_Web_App_developers">Changes for Open Web App developers</h2> - -<ul> - <li>Initial <a href="https://developer.mozilla.org/en-US/docs/Apps/Getting_Started">Open Web App support</a> has been implemented in the desktop versions of Firefox (that is, on Windows, Mac OS X, and Linux).</li> -</ul> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<h3 id="Interface_changes">Interface changes</h3> - -<p>{{interface("nsIPrivateDOMEvent")}} has been merged into {{interface("nsIDOMEvent")}}. ({{bug("761613")}})</p> - -<h4 id="New_interfaces">New interfaces</h4> - -<h4 id="Removed_interfaces">Removed interfaces</h4> - -<p>The following interfaces have been removed.</p> - -<h2 id="See_also">See also</h2> - -<div>{{Firefox_for_developers('15')}}</div> diff --git a/files/de/web/accessibility/understanding_wcag/index.html b/files/de/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index fe71b20ebc..0000000000 --- a/files/de/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - NeedsTranslation - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> - -<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> - -<h2 id="The_four_principles">The four principles</h2> - -<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> - -<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> -</ul> - -<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> - -<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> - -<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> - -<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> - -<p>WCAG 2.1 includes:</p> - -<ul> - <li>all of WCAG 2.0 (verbatim, word-for-word)</li> - <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: - <ul> - <li>Mobile Accessibility </li> - <li>Low Vision</li> - <li>Cognitive</li> - </ul> - </li> - <li>Read more about WCAG 2.1: - <ul> - <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> - <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> - </ul> - </li> -</ul> - -<h2 id="Legal_standing">Legal standing</h2> - -<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> - -<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html deleted file mode 100644 index 5e1287ddac..0000000000 --- a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ /dev/null @@ -1,788 +0,0 @@ ---- -title: Using XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -<div><font><font>{{APIRef ("XMLHttpRequest")}}</font></font></div> - -<p><span class="seoSummary"><font><font>In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP-</font></font></a><font><font> Anforderungen </font><font>ausgeben </font><font>, um Daten zwischen der Website und einem Server auszutauschen</font></font></span><font><font> . </font><font>Beispiele für häufig vorkommende und unklarere Anwendungsfälle </font></font><code>XMLHttpRequest</code><font><font>sind enthalten.</font></font></p> - -<p><font><font>Um eine HTTP-Anfrage zu senden, erstellen Sie ein </font></font><code>XMLHttpRequest</code><font><font>Objekt, öffnen Sie eine URL und senden Sie die Anfrage. </font><font>Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den </font></font><a href="/en-US/docs/Web/HTTP/Status"><font><font>HTTP-Status</font></font></a><font><font> des Ergebnisses.</font></font></p> - -<pre class="brush: js notranslate">function reqListener () { - console.log(this.responseText); -} - -var oReq = new XMLHttpRequest(); -oReq.addEventListener("load", reqListener); -oReq.open("GET", "http://www.example.org/example.txt"); -oReq.send();</pre> - -<h2 id="Arten_von_Anfragen"><font><font>Arten von Anfragen</font></font></h2> - -<div class="blockIndicator note"> -<p><font><font>Eine Anforderung über </font></font><code>XMLHttpRequest</code><font><font>kann die Daten auf zwei Arten asynchron oder synchron abrufen. </font><font>Die Art der Anforderung wird durch das optionale </font></font><code>async</code><font><font>Argument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. </font><font>Wenn dieses Argument angegeben ist </font></font><code>true</code><font><font>oder nicht, </font></font><code>XMLHttpRequest</code><font><font>wird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. </font><font>Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für </font></font><a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests"><font><font>synchrone und asynchrone Anforderungen</font></font></a><font><font> . </font><font>Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.</font></font></p> -</div> - -<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.</font></font></div> - -<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Die Konstruktorfunktion </font></font><code>XMLHttpRequest</code><font><font>ist nicht nur auf XML-Dokumente beschränkt. </font><font>Es beginnt mit </font></font><strong><font><font>"XML",</font></font></strong><font><font> da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war</font></font></div> - -<h2 id="Umgang_mit_Antworten"><font><font>Umgang mit Antworten</font></font></h2> - -<p><font><font>Es gibt verschiedene Arten von </font></font><a href="https://xhr.spec.whatwg.org/"><font><font>Antwortattributen,</font></font></a><font><font> die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. </font><font>Diese teilen dem Kunden die </font></font><code>XMLHttpRequest</code><font><font>wichtigen Informationen über den Status der Antwort mit. </font><font>In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.</font></font></p> - -<h3 id="Analysieren_und_Bearbeiten_der_responseXML-Eigenschaft"><font><font>Analysieren und Bearbeiten der responseXML-Eigenschaft</font></font></h3> - -<p>If you use <code>XMLHttpRequest</code> to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:</p> - -<ol> - <li>Using <a href="/en-US/docs/Web/XPath">XPath</a> to address (or point to) parts of it.</li> - <li>Manually <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li> - <li>Using {{domxref("XMLSerializer")}} to serialize <strong>DOM trees to strings or to files</strong>.</li> - <li>{{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use <code>RegExp</code> to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li> -</ol> - -<div class="note"> -<p><strong>Note:</strong> <code>XMLHttpRequest</code> can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> to learn how to do this.</p> -</div> - -<h3 id="Processing_a_responseText_property_containing_an_HTML_document">Processing a responseText property containing an HTML document</h3> - -<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:</p> - -<ol> - <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li> - <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li> - <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li> -</ol> - -<h2 id="Handling_binary_data">Handling binary data</h2> - -<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p> - -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); -oReq.open("GET", url); -// retrieve data unprocessed as a binary string -oReq.overrideMimeType("text/plain; charset=x-user-defined"); -/* ... */ -</pre> - -<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p> - -<p>For example, consider this snippet, which uses the <code>responseType</code> of "<code>arraybuffer</code>" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p> - -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); - -oReq.onload = function(e) { - var arraybuffer = oReq.response; // not responseText - /* ... */ -} -oReq.open("GET", url); -oReq.responseType = "arraybuffer"; -oReq.send();</pre> - -<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p> - -<h2 id="Monitoring_progress">Monitoring progress</h2> - -<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p> - -<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p> - -<dl> - <dt>{{event("progress")}}</dt> - <dd>The amount of data that has been retrieved has changed.</dd> - <dt>{{event("load")}}</dt> - <dd>The transfer is complete; all data is now in the <code>response</code></dd> -</dl> - -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); - -oReq.addEventListener("progress", updateProgress); -oReq.addEventListener("load", transferComplete); -oReq.addEventListener("error", transferFailed); -oReq.addEventListener("abort", transferCanceled); - -oReq.open(); - -// ... - -// progress on transfers from the server to the client (downloads) -function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total * 100; - // ... - } else { - // Unable to compute progress information since the total size is unknown - } -} - -function transferComplete(evt) { - console.log("The transfer is complete."); -} - -function transferFailed(evt) { - console.log("An error occurred while transferring the file."); -} - -function transferCanceled(evt) { - console.log("The transfer has been canceled by the user."); -}</pre> - -<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p> - -<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div> - -<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p> - -<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p> - -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); - -oReq.upload.addEventListener("progress", updateProgress); -oReq.upload.addEventListener("load", transferComplete); -oReq.upload.addEventListener("error", transferFailed); -oReq.upload.addEventListener("abort", transferCanceled); - -oReq.open(); -</pre> - -<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p> -</div> - -<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p> - -<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd); - -function loadEnd(e) { - console.log("The transfer finished (although we don't know if it succeeded or not)."); -} -</pre> - -<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p> - -<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2> - -<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p> - -<ul> - <li>using only AJAX</li> - <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li> -</ul> - -<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br> - Using only AJAX is more complex, but typically more flexible and powerful.</p> - -<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3> - -<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p> - -<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4> - -<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p> - -<ul> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li> - <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li> - <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li> -</ul> - -<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p> - -<ul> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p> - - <pre class="brush:plain notranslate">Content-Type: application/x-www-form-urlencoded - -foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p> - - <pre class="brush:plain notranslate">Content-Type: text/plain - -foo=bar -baz=The first line. -The second line.</pre> - </li> - <li> - <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p> - - <pre class="brush:plain notranslate">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 - ------------------------------314911788813839 -Content-Disposition: form-data; name="foo" - -bar ------------------------------314911788813839 -Content-Disposition: form-data; name="baz" - -The first line. -The second line. - ------------------------------314911788813839--</pre> - </li> -</ul> - -<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p> - -<pre class="brush:plain notranslate">?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.</pre> - -<h4 id="A_little_vanilla_framework">A little vanilla framework</h4> - -<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p> - -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>Sending forms with pure AJAX &ndash; MDN</title> -<script type="text/javascript"> - -"use strict"; - -/*\ -|*| -|*| :: 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); */ - }; -} - -/*\ -|*| -|*| :: AJAX Form Submit Framework :: -|*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntax: -|*| -|*| AJAXSubmit(HTMLFormElement); -\*/ - -var AJAXSubmit = (function () { - - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - console.log(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* console.log(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, - oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + - oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* How should I treat a text/plain form encoding? - What characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? - this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + - oField.name + "\"; filename=\"" + oFile.name + - "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or - method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; - this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */ - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; - -})(); - -</script> -</head> -<body> - -<h1>Sending forms with pure AJAX</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<form action="register.php" method="post" enctype="text/plain" - onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" - onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> - <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> - <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> - <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> - <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -</body> -</html></pre> -</div> - -<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p> - -<pre class="brush: php notranslate"><?php -/* register.php */ - -header("Content-type: text/plain"); - -/* -NOTE: You should never use `print_r()` in production scripts, or -otherwise output client-submitted data without sanitizing it first. -Failing to sanitize can lead to cross-site scripting vulnerabilities. -*/ - -echo ":: data received via GET ::\n\n"; -print_r($_GET); - -echo "\n\n:: Data received via POST ::\n\n"; -print_r($_POST); - -echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n"; -if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; } - -echo "\n\n:: Files received ::\n\n"; -print_r($_FILES); - -</pre> - -<p>The syntax to activate this script is simply:</p> - -<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre> - -<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div> - -<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div> - -<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div> - -<h3 id="Using_FormData_objects">Using FormData objects</h3> - -<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p> - -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> -<pre class="brush: html notranslate"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" charset="UTF-8" /> -<title>Sending forms with FormData &ndash; MDN</title> -<script> -"use strict"; - -function ajaxSuccess () { - console.log(this.responseText); -} - -function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? - oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; - sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } -} -</script> -</head> -<body> - -<h1>Sending forms with FormData</h1> - -<h2>Using the GET method</h2> - -<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h2>Using the POST method</h2> -<h3>Enctype: application/x-www-form-urlencoded (default)</h3> - -<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> - -<h3>Enctype: text/plain</h3> - -<p>The text/plain encoding is not supported by the FormData API.</p> - -<h3>Enctype: multipart/form-data</h3> - -<form action="register.php" method="post" enctype="multipart/form-data" - onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> - <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> - <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> - <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> - <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> -</form> -</body> -</html></pre> -</div> - -<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div> - -<h2 id="Get_last_modified_date">Get last modified date</h2> - -<pre class="brush: js notranslate">function getHeaderTime () { - console.log(this.getResponseHeader("Last-Modified")); /* A valid GMTString date or null */ -} - -var oReq = new XMLHttpRequest(); -oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html"); -oReq.onload = getHeaderTime; -oReq.send();</pre> - -<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3> - -<p>Let's create two functions:</p> - -<pre class="brush: js notranslate">function getHeaderTime () { - var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)); - var nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } -} - -function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); -}</pre> - -<p>And to test:</p> - -<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */ - -ifHasChanged("yourpage.html", function (nModif, nVisit) { - console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!"); -});</pre> - -<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p> - -<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> - -<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p> - -<h2 id="Bypassing_the_cache">Bypassing the cache</h2> - -<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:</p> - -<pre class="brush:plain notranslate">http://foo.com/bar.html -> http://foo.com/bar.html?12345 -http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 -</pre> - -<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p> - -<p>You can automatically adjust URLs using the following code:</p> - -<pre class="brush:js notranslate">var oReq = new XMLHttpRequest(); - -oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime()); -oReq.send(null);</pre> - -<h2 id="Security">Security</h2> - -<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p> - -<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p> - -<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p> - -<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3> - -<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p> - -<h2 id="Workers">Workers</h2> - -<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</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('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>Live standard, latest version</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - -<p><font><font>{{Compat ("api.XMLHttpRequest")}}</font></font></p> - -<h2 id="Siehe_auch"><font><font>Siehe auch</font></font></h2> - -<ol> - <li><a href="/en-US/docs/AJAX/Getting_Started"><font><font>MDN AJAX Einführung</font></font></a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest"><font><font>HTML in XMLHttpRequest</font></font></a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS"><font><font>HTTP-Zugriffskontrolle</font></font></a></li> - <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL"><font><font>So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL</font></font></a></li> - <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html"><font><font>XMLHttpRequest - REST und die Rich User Experience</font></font></a></li> - <li><a href="https://msdn.microsoft.com/library/ms535874"><font><font>Microsoft-Dokumentation</font></font></a></li> - <li><a href="http://jibbering.com/2002/4/httprequest.html"><font><font>"Verwenden des XMLHttpRequest-Objekts" (jibbering.com)</font></font></a></li> - <li><a href="https://xhr.spec.whatwg.org/"><font><font>Das </font></font><code>XMLHttpRequest</code><font><font>Objekt: WHATWG-Spezifikation</font></font></a></li> -</ol> diff --git a/files/de/web/html/attributes/index.html b/files/de/web/html/attributes/index.html deleted file mode 100644 index 3ec9df8ec7..0000000000 --- a/files/de/web/html/attributes/index.html +++ /dev/null @@ -1,662 +0,0 @@ ---- -title: HTML attribute reference -slug: Web/HTML/Attributes -tags: - - Anfänger - - Attribute - - Einstellungen - - Elemente - - HTML - - Reference - - Web -translation_of: Web/HTML/Attributes ---- -<p>Elemente in HTML haben <strong>Attribute</strong>; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.</p> - -<h2 id="Attributliste">Attributliste</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Attributname</th> - <th>Elemente</th> - <th>Beschreibung</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>accept</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Liste der Typen, die der Server akzeptiert, in der Regel ein Dateityp.</td> - </tr> - <tr> - <td><code>accept-charset</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Liste der unterstützten Zeichensätze.</td> - </tr> - <tr> - <td><code>accesskey</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Definiert eine Tastenkombination zum Aktivieren oder Hinzufügen von Fokus auf das Element.</td> - </tr> - <tr> - <td><code>action</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Die URI eines Programms, das die über das Formular übermittelten Informationen verarbeitet.</td> - </tr> - <tr> - <td><code>align</code></td> - <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> - <td>Gibt die horizontale Ausrichtung des Elements an.</td> - </tr> - <tr> - <td><code>alt</code></td> - <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> - <td>Alternativer Text, falls ein Bild oder ein vergleichbares anderes Element nicht angezeigt werden kann.</td> - </tr> - <tr> - <td><code>async</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Gibt an, dass das Skript asynchron ausgeführt werden soll.</td> - </tr> - <tr> - <td><code>autocomplete</code></td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Gibt an, ob die Kontrollen in diesem Formular standardmäßig ihre Werte automatisch durch den Browser vervollständigen können.</td> - </tr> - <tr> - <td><code>autofocus</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Das Element sollte nach der geladenen Seite automatisch fokussiert werden.</td> - </tr> - <tr> - <td><code>autoplay</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Das Audio oder Video sollte so schnell wie möglich spielen.</td> - </tr> - <tr> - <td><code>autosave</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Bisherige Werte sollten Dropdowns von auswählbaren Werten über Seitenlasten bestehen bleiben.</td> - </tr> - <tr> - <td><code>bgcolor</code></td> - <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> - <td> - <p>Hintergrundfarbe des Elements</p> - - <div class="note"> - <p><strong>Hinweis:</strong> Dies ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("background-color") }} Eigenschachaft.</p> - </div> - </td> - </tr> - <tr> - <td><code>border</code></td> - <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> - <td> - <p>Die Randbreite eines Elements</p> - - <div class="note"> - <p><strong>Hinweis:</strong> Die ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("border") }} Eigenschaft.</p> - </div> - </td> - </tr> - <tr> - <td><code>buffered</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Enthält den Zeitbereich von bereits gepufferten Medien.</td> - </tr> - <tr> - <td><code>challenge</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Eine Herausforderung, die zusammen mit dem öffentlichen Schlüssel eingereicht wird.</td> - </tr> - <tr> - <td><code>charset</code></td> - <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> - <td>Deklariert die Zeichencodierung der Seite oder des Skripts.</td> - </tr> - <tr> - <td><code>checked</code></td> - <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> - <td>Gibt an, ob das Element auf Seitenladung überprüft werden soll.</td> - </tr> - <tr> - <td><code>cite</code></td> - <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> - <td>Enthält einen URI, der auf die Quelle des Angebots oder der Änderung verweist.</td> - </tr> - <tr> - <td><code>class</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Oft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu gestalten.</td> - </tr> - <tr> - <td><code>code</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>Gibt die URL der zu ladenden und ausgeführten Klassendatei des Applets an.</td> - </tr> - <tr> - <td><code>codebase</code></td> - <td>{{ HTMLElement("applet") }}</td> - <td>Dieses Attribut gibt die absolute oder relative URL des Verzeichnisses an, in dem Applets '.class-Dateien, die durch das Codeattribut referenziert werden, gespeichert sind.</td> - </tr> - <tr> - <td><code>color</code></td> - <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> - <td> - <p>Dieses Attribut setzt die Textfarbe entweder mit einer benannten Farbe oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.</p> - - <div class="note"> - <p><strong>Hinweis:</strong> Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("color") }} Eigenschaft.</p> - </div> - </td> - </tr> - <tr> - <td><code>cols</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Definiert die Anzahl der Spalten in einem Textbereich.</td> - </tr> - <tr> - <td><code>colspan</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll.</td> - </tr> - <tr> - <td><code>content</code></td> - <td>{{ HTMLElement("meta") }}</td> - <td>Ein Wert, der mit <code>http-equiv</code> oder dem Namen verbunden ist, abhängig vom Kontext.</td> - </tr> - <tr> - <td><code>contenteditable</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Gibt an, ob der Inhalt des Elements bearbeitet werden kann.</td> - </tr> - <tr> - <td><code>contextmenu</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Definiert die ID eines {{HTMLElement("menu")}} - Elements, das als Kontextmenü des Elements dient.</td> - </tr> - <tr> - <td><code>controls</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Gibt an, ob der Browser dem Benutzer die Wiedergabesteuerung anzeigen soll.</td> - </tr> - <tr> - <td><code>coords</code></td> - <td>{{ HTMLElement("area") }}</td> - <td>Ein Satz von Werten, die die Koordinaten des Hot-Spot-Bereichs angeben.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> - <td>Wie das Element grenzüberschreitende Anfragen behandelt.</td> - </tr> - <tr> - <td><code>data</code></td> - <td>{{ HTMLElement("object") }}</td> - <td>Gibt die URL der Ressource an.</td> - </tr> - <tr> - <td><code>data-*</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Ermöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen.</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> - <td>Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind.</td> - </tr> - <tr> - <td><code>default</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Zeigt an, dass die Spur aktiviert werden soll, es sei denn, die Einstellungen des Benutzers zeigen etwas anderes an.</td> - </tr> - <tr> - <td><code>defer</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Gibt an, dass das Skript nach dem Analysieren der Seite ausgeführt werden soll.</td> - </tr> - <tr> - <td><code>dir</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Definiert die Textrichtung. Zulässige Werte sind (links-nach-rechts oder rechts-nach-links)</td> - </tr> - <tr> - <td><code>dirname</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td></td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Gibt an, ob der Benutzer mit dem Element interagieren kann.</td> - </tr> - <tr> - <td><code>download</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td>Zeigt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll.</td> - </tr> - <tr> - <td><code>draggable</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Legt fest, ob das Element gezogen werden kann.</td> - </tr> - <tr> - <td><code>dropzone</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Gibt an, dass das Element das Fallenlassen von Inhalt auf ihm akzeptiert.</td> - </tr> - <tr> - <td><code>enctype</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Definiert den Inhaltstyp des Formulars, wenn die Methode POST ist.</td> - </tr> - <tr> - <td><code>for</code></td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Beschreibt Elemente, die zu diesem gehören.</td> - </tr> - <tr> - <td><code>form</code></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>Gibt das Formular an, das der Besitzer des Elements ist.</td> - </tr> - <tr> - <td><code>formaction</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> - <td>Gibt die Aktion des Elements an und überschreibt die im {{HTMLElement ("Formular")}} definierte Aktion.</td> - </tr> - <tr> - <td><code>headers</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>IDs der <code><th></code> -Elemente, die für dieses Element gelten.</td> - </tr> - <tr> - <td><code>height</code></td> - <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> - <td> - <p>Gibt die Höhe der hier aufgeführten Elemente an. Für alle anderen Elemente verwenden Sie die Eigenschaft CSS {{cssxref ("height")}}.</p> - - <div class="note"> - <p><strong>Hinweis:</strong> In einigen Fällen wie {{HTMLElement ("div")}} ist dies ein Legacy-Attribut, in welchem Fall die CSS {{Cssxref ("height")}} Eigenschaft stattdessen verwendet werden soll.</p> - </div> - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Verhindert das Rendering des gegebenen Elements, während Kinderelemente, z.B. Script-Elemente, aktiv.</td> - </tr> - <tr> - <td><code>high</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Zeigt die untere Schranke des oberen Bereichs an.</td> - </tr> - <tr> - <td><code>href</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> - <td>Gibt die URL einer verknüpften Ressource an.</td> - </tr> - <tr> - <td><code>hreflang</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> - <td>Gibt die Sprache der verknüpften Ressource an.</td> - </tr> - <tr> - <td><code>http-equiv</code></td> - <td>{{ HTMLElement("meta") }}</td> - <td></td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{ HTMLElement("command") }}</td> - <td>Gibt ein Bild an, das den Befehl darstellt.</td> - </tr> - <tr> - <td><code>id</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein.</td> - </tr> - <tr> - <td><code>integrity</code></td> - <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td> - <td> - <p>Sicherheits-Feature, das Browsern ermöglicht zu verifizieren, was sie abrufen.</p> - - <p><a href="https://developer.mozilla.org/de/docs/Web">MDN Link</a></p> - </td> - </tr> - <tr> - <td><code>ismap</code></td> - <td>{{ HTMLElement("img") }}</td> - <td>Gibt an, dass das Bild Teil einer Server-seitigen Image-Map ist.</td> - </tr> - <tr> - <td><code>itemprop</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td></td> - </tr> - <tr> - <td><code>keytype</code></td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Spezifiziert den Typ des generierten Schlüssels.</td> - </tr> - <tr> - <td><code>kind</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Spezifiziert die Art der Textspur.</td> - </tr> - <tr> - <td><code>label</code></td> - <td>{{ HTMLElement("track") }}</td> - <td>Definiert einen für den Nutzer lesbaren Titel der Textspur.</td> - </tr> - <tr> - <td><code>lang</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Definiert die im Element genutzte Sprache.</td> - </tr> - <tr> - <td><code>language</code></td> - <td>{{ HTMLElement("script") }}</td> - <td>Definiert die im Element genutzte Skriptsprache.</td> - </tr> - <tr> - <td><code>list</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifiziert eine dem Nutzer vorzuschlagende Liste vordefinierter Optionen.</td> - </tr> - <tr> - <td><code>loop</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> - <td>Gibt an, ob das Medium ab dem Start beginnen soll, wenn es fertig ist.</td> - </tr> - <tr> - <td><code>low</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Zeigt die obere Schranke des unteren Bereiches an.</td> - </tr> - <tr> - <td><code>manifest</code></td> - <td>{{ HTMLElement("html") }}</td> - <td>Gibt die URL des Cache-Manifests des Dokuments an.</td> - </tr> - <tr> - <td><code>max</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Gibt den maximal zulässigen Wert an.</td> - </tr> - <tr> - <td><code>maxlength</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Definiert die maximal zulässige Anzahl von Zeichen im Element.</td> - </tr> - <tr> - <td><code>media</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> - <td>Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource entworfen wurde.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Legt fest, welche HTTP-Methode bei der Übermittlung des Formulars verwendet werden soll. Kann GET (Standard) oder POST sein.</td> - </tr> - <tr> - <td><code>min</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Gibt den zulässigen Mindestwert an.</td> - </tr> - <tr> - <td><code>multiple</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Gibt an, ob mehrere Werte in einer Eingabe des Typs E-Mail oder Datei eingegeben werden können.</td> - </tr> - <tr> - <td><code>muted</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>Zeigt an, ob der Ton anfänglich auf Seitenladung ausgeschaltet wird.</td> - </tr> - <tr> - <td><code>name</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> - <td>Name des Elements. Zum Beispiel von dem Server verwendet, um die Felder in Form zu übermitteln.</td> - </tr> - <tr> - <td><code>novalidate</code></td> - <td>{{ HTMLElement("form") }}</td> - <td>Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden darf.</td> - </tr> - <tr> - <td><code>open</code></td> - <td>{{ HTMLElement("details") }}</td> - <td>Gibt an, ob die Details auf Seite geladen werden sollen.</td> - </tr> - <tr> - <td><code>optimum</code></td> - <td>{{ HTMLElement("meter") }}</td> - <td>Zeigt den optimalen numerischen Wert an.</td> - </tr> - <tr> - <td><code>pattern</code></td> - <td>{{ HTMLElement("input") }}</td> - <td>Definiert einen regulären Ausdruck, den der Wert des Elements validiert.</td> - </tr> - <tr> - <td><code>ping</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td></td> - </tr> - <tr> - <td><code>placeholder</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Bietet dem Benutzer einen Hinweis darauf, was im Feld eingegeben werden kann.</td> - </tr> - <tr> - <td><code>poster</code></td> - <td>{{ HTMLElement("video") }}</td> - <td>Eine URL, die einen Posterrahmen anzeigt, bis der Benutzer spielt oder sucht.</td> - </tr> - <tr> - <td><code>preload</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> - <td>Indicates whether the whole resource, parts of it or nothing should be preloaded.</td> - </tr> - <tr> - <td><code>radiogroup</code></td> - <td>{{ HTMLElement("command") }}</td> - <td></td> - </tr> - <tr> - <td><code>readonly</code></td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the element can be edited.</td> - </tr> - <tr> - <td><code>rel</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> - <td>Specifies the relationship of the target object to the link object.</td> - </tr> - <tr> - <td><code>required</code></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><code>reversed</code></td> - <td>{{ HTMLElement("ol") }}</td> - <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td> - </tr> - <tr> - <td><code>rows</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a text area.</td> - </tr> - <tr> - <td><code>rowspan</code></td> - <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> - <td>Defines the number of rows a table cell should span over.</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td></td> - </tr> - <tr> - <td><code>scope</code></td> - <td>{{ HTMLElement("th") }}</td> - <td></td> - </tr> - <tr> - <td><code>scoped</code></td> - <td>{{ HTMLElement("style") }}</td> - <td></td> - </tr> - <tr> - <td><code>seamless</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td></td> - </tr> - <tr> - <td><code>selected</code></td> - <td>{{ HTMLElement("option") }}</td> - <td>Defines a value which will be selected on page load.</td> - </tr> - <tr> - <td><code>shape</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> - <td></td> - </tr> - <tr> - <td><code>size</code></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><code>sizes</code></td> - <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> - <td></td> - </tr> - <tr> - <td><code>slot</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Assigns a slot in a shadow DOM shadow tree to an element.</td> - </tr> - <tr> - <td><code>span</code></td> - <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> - <td></td> - </tr> - <tr> - <td><code>spellcheck</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Indicates whether spell checking is allowed for the element.</td> - </tr> - <tr> - <td><code>src</code></td> - <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> - <td>Die URL des einbettbaren Inhalts.</td> - </tr> - <tr> - <td><code>srcdoc</code></td> - <td>{{ HTMLElement("iframe") }}</td> - <td></td> - </tr> - <tr> - <td><code>srclang</code></td> - <td>{{ HTMLElement("track") }}</td> - <td></td> - </tr> - <tr> - <td><code>srcset</code></td> - <td>{{ HTMLElement("img") }}</td> - <td></td> - </tr> - <tr> - <td><code>start</code></td> - <td>{{ HTMLElement("ol") }}</td> - <td>Definiert die erste Zahl, wenn sie anders als 1 ist.</td> - </tr> - <tr> - <td><code>step</code></td> - <td>{{ HTMLElement("input") }}</td> - <td></td> - </tr> - <tr> - <td><code>style</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Definiert CSS Stile für das Element und überschreibt andere Stile, welche z.B. in einem Stylesheet für das Element festgelegt sind.</td> - </tr> - <tr> - <td><code>summary</code></td> - <td>{{ HTMLElement("table") }}</td> - <td></td> - </tr> - <tr> - <td><code>tabindex</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Overrides the browser's default tab order and follows the one specified instead.</td> - </tr> - <tr> - <td><code>target</code></td> - <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> - <td></td> - </tr> - <tr> - <td><code>title</code></td> - <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td> - <td>Text to be displayed in a tooltip when hovering over the element.</td> - </tr> - <tr> - <td><code>type</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> - <td>Definiert den Typ eines Elements.</td> - </tr> - <tr> - <td><code>usemap</code></td> - <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> - <td></td> - </tr> - <tr> - <td><code>value</code></td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> - <td>Defines a default value which will be displayed in the element on page load.</td> - </tr> - <tr> - <td><code>width</code></td> - <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> - <td> - <p>For the elements listed here, this establishes the element's width.</p> - - <div class="note"> - <p><strong>Note:</strong> For all other instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>wrap</code></td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Indicates whether the text should be wrapped.</td> - </tr> - </tbody> -</table> - -<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2> - -<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> - -<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> - -<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p> - -<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> - -<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p> - -<p>IDL attributes can <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li><a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML-Elemente</a></li> -</ul> diff --git a/files/de/web/http/headers/set-cookie/index.html b/files/de/web/http/headers/set-cookie/index.html deleted file mode 100644 index d82bd2a816..0000000000 --- a/files/de/web/http/headers/set-cookie/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Set-Cookie -slug: Web/HTTP/Headers/Set-Cookie -tags: - - Cookies - - HTTP - - NeedsTranslation - - Reference - - Response - - TopicStub - - header - - samesite -translation_of: Web/HTTP/Headers/Set-Cookie ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary">The <strong><code>Set-Cookie</code></strong> HTTP response header is used to send a cookie from the server to the user agent, so the user agent can send it back to the server later. To send multiple cookies, multiple <strong><code>Set-Cookie</code></strong></span> headers should be sent in the same response.</p> - -<div class="blockIndicator warning"> -<p>Browsers block frontend JavaScript code from accessing the <code>Set Cookie</code> header, as required by the Fetch spec, which defines <code>Set-Cookie</code> as a <a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">forbidden response-header name</a> that <a href="https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0">must be filtered out</a> from any response exposed to frontend code.</p> -</div> - -<p>For more information, see the guide on <a href="/en-US/docs/Web/HTTP/Cookies">Using HTTP cookies</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>no</td> - </tr> - <tr> - <th scope="row"><a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">Forbidden response-header name</a></th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">Set-Cookie: <cookie-name>=<cookie-value> -Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> -Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> -Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> -Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> -Set-Cookie: <cookie-name>=<cookie-value>; Secure -Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly - -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax -Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure - -// Multiple attributes are also possible, for example: -Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly -</pre> - -<h2 id="Attributes">Attributes</h2> - -<dl> - <dt><code><cookie-name>=<cookie-value></code></dt> - <dd>A cookie begins with a name-value pair: - <ul> - <li>A <code><cookie-name></code> can be any US-ASCII characters, except control characters, spaces, or tabs. It also must not contain a separator character like the following: <code>( ) < > @ , ; : \ " / [ ] ? = { }</code>.</li> - <li>A <code><cookie-value></code> can optionally be wrapped in double quotes and include any US-ASCII characters excluding control characters, {{glossary("Whitespace")}}, double quotes, comma, semicolon, and backslash. <strong>Encoding</strong>: Many implementations perform URL encoding on cookie values, however it is not required per the RFC specification. It does help satisfying the requirements about which characters are allowed for <cookie-value> though.</li> - <li><strong><code>__Secure-</code> prefix</strong>: Cookies names starting with<code> __Secure-</code> (dash is part of the prefix) must be set with the <code>secure</code> flag from a secure page (HTTPS).</li> - <li><strong><code>__Host-</code> prefix</strong>: Cookies with names starting with <code>__Host-</code> must be set with the <code>secure</code> flag, must be from a secure page (HTTPS), must not have a domain specified (and therefore aren't sent to subdomains) and the path must be <code>/</code>.</li> - </ul> - </dd> - <dt><code>Expires=<date></code> {{optional_inline}}</dt> - <dd> - <p>The maximum lifetime of the cookie as an HTTP-date timestamp. See {{HTTPHeader("Date")}} for the required formatting.</p> - - <p>If unspecified, the cookie becomes a <strong>session cookie</strong>. A session finishes when the client shuts down, and session cookies will be removed.</p> - - <div class="blockIndicator warning"> - <p><strong>Warning:</strong> Many web browsers have a <em>session restore</em> feature that will save all tabs and restore them next time the browser is used. Session cookies will also be restored, as if the browser was never closed.</p> - </div> - - <p>When an Expires date is set, the deadline is relative to the <em>client</em> the cookie is being set on, not the server.</p> - </dd> - <dt><code>Max-Age=<number> </code>{{optional_inline}}</dt> - <dd>Number of seconds until the cookie expires. A zero or negative number will expire the cookie immediately. If both <code>Expires</code> and <code>Max-Age</code> are set, <code>Max-Age</code> has precedence.</dd> - <dt><code>Domain=<domain-value></code> {{optional_inline}}</dt> - <dd>Host to which the cookie will be sent. - <ul> - <li>If omitted, defaults to the host of the current document URL, not including subdomains.</li> - <li>Contrary to earlier specifications, leading dots in domain names (<code>.example.com</code>) are ignored.</li> - <li>Multiple host/domain values are <em>not</em> allowed, but if a domain <em>is</em> specified, then subdomains are always included.</li> - </ul> - </dd> - <dt><code>Path=<path-value></code> {{optional_inline}}</dt> - <dd>A path that must exist in the requested URL, or the browser won't send the <code>Cookie</code> header.</dd> - <dd>The forward slash (<code>/</code>) character is interpreted as a directory separator, and subdirectories will be matched as well: for <code>Path=/docs</code>, <code>/docs</code>, <code>/docs/Web/</code>, and <code>/docs/Web/HTTP</code> will all match.</dd> - <dt id="Secure"><code>Secure</code> {{optional_inline}}</dt> - <dd>Cookie is only sent to the server when a request is made with the <code>https:</code> scheme (except on localhost), and therefore is more resistent to <a href="/en-US/docs/Glossary/MitM">man-in-the-middle</a> attacks. - <p class="note"><strong>Note:</strong> Do not assume that <code>Secure</code> prevents all access to sensitive information in cookies (session keys, login details, etc.). Cookies with this attribute can still be read/modified with access to the client's hard disk, or from JavaScript if the <code>HttpOnly</code> cookie attribute is not set.</p> - - <p class="note"><strong>Note:</strong> Insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> attribute (since Chrome 52 and Firefox 52). For Firefox, the <code>https:</code> requirements are ignored when the <code>Secure</code> attribute is set by localhost (since Firefox 75).</p> - </dd> - <dt id="HttpOnly"><code>HttpOnly</code> {{optional_inline}}</dt> - <dd>Forbids JavaScript from accessing the cookie, for example, through the {{domxref("Document.cookie")}} property. Note that a cookie that has been created with HttpOnly will still be sent with JavaScript-initiated requests, e.g. when calling {{domxref("XMLHttpRequest.send()")}} or {{domxref("fetch()")}}. This mitigates attacks against cross-site scripting ({{Glossary("XSS")}}).</dd> - <dt id="SameSite"><code>SameSite=<samesite-value></code> {{optional_inline}}</dt> - <dd>Controls whether a cookie is sent with cross-origin requests, providing some protection against cross-site request forgery attacks ({{Glossary("CSRF")}}).</dd> - <dd> - <div class="note"> - <p>Standards related to the <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite">SameSite Cookies</a> recently changed such that:</p> - - <ol> - <li>The cookie-sending behaviour if <code>SameSite</code> is not specified is <code>SameSite=Lax</code>. Previously the default was that cookies were sent for all requests.</li> - <li>Cookies with <code>SameSite=None</code> must now<br> - also specify the <code>Secure</code> attribute (i.e. they require a secure context).</li> - </ol> - - <p>The options below covers the new behaviour. See the <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#Browser_compatibility">Browser compatibility</a> table for information about specific browser implementation (rows: "<code>SameSite</code>: Defaults to <code>Lax</code>" and "<code>SameSite</code>: Secure context required").</p> - </div> - Inline options are: - - <ul> - <li><code>Strict</code>: The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the <code>SameSite=Strict</code> attribute are sent.</li> - <li><code>Lax</code>: The cookie is not sent on cross-site requests, such as calls to load images or frames, but is sent when a user is navigating to the origin site from an external site (e.g. if following a link).<br> - This is the default behaviour if the <code>SameSite</code> attribute is not specified.</li> - <li><code>None</code>: The browser sends the cookie with both cross-site and same-site requests. The <code>Secure</code> attribute must also be set when <code>SameSite=None</code>!</li> - </ul> - </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Session_cookie">Session cookie</h3> - -<p><strong>Session cookies</strong> are removed when the client shuts down. Cookies are session cookies if they don't specify the <code>Expires</code> or <code>Max-Age</code> attributes.</p> - -<pre class="notranslate">Set-Cookie: sessionId=38afes7a8</pre> - -<h3 id="Permanent_cookie">Permanent cookie</h3> - -<p>Instead of expiring when the client is closed, <strong>permanent cookies</strong> expire at a specific date (<code>Expires</code>) or after a specific length of time (<code>Max-Age</code>).</p> - -<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT -</pre> - -<pre class="notranslate">Set-Cookie: id=a3fWa; Max-Age=2592000</pre> - -<h3 id="Invalid_domains">Invalid domains</h3> - -<p>A cookie for a domain that does not include the server that set it <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">should be rejected by the user agent</a>.</p> - -<p>The following cookie will be rejected if set by a server hosted on <code>originalcompany.com</code>:</p> - -<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk</pre> - -<p>A cookie for a sub domain of the serving domain will be rejected.</p> - -<p>The following cookie will be rejected if set by a server hosted on <code>example.com</code>:</p> - -<pre class="notranslate">Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com</pre> - -<h3 id="Cookie_prefixes">Cookie prefixes</h3> - -<p>Cookies names prefixed with <code>__Secure-</code> or <code>__Host-</code> can be used only if they are set with the <code>secure</code> attribute from a secure (HTTPS) origin.</p> - -<p>In addition, cookies with the <code>__Host-</code> prefix must have a path of <code>/</code> (meaning any path at the host) and must not have a <code>Domain</code> attribute.</p> - -<div class="blockIndicator warning"> -<p>For clients that don't implement cookie prefixes, you cannot count on these additional assurances, and prefixed cookies will always be accepted.</p> -</div> - -<pre class="notranslate">// Both accepted when from a secure origin (HTTPS) -Set-Cookie: __Secure-ID=123; Secure; Domain=example.com -Set-Cookie: __Host-ID=123; Secure; Path=/ - -// Rejected due to missing Secure attribute -Set-Cookie: __Secure-id=1 - -// Rejected due to the missing Path=/ attribute -Set-Cookie: __Host-id=1; Secure - -// Rejected due to setting a Domain -Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td> - <td>HTTP State Management Mechanism</td> - </tr> - <tr> - <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td> - <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("http.headers.Set-Cookie", 5)}}</p> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<ul> - <li>Starting with Chrome 52 and Firefox 52, insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> attribute anymore.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li> - <li>{{HTTPHeader("Cookie")}}</li> - <li>{{domxref("Document.cookie")}}</li> - <li><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite">SameSite cookies</a></li> -</ul> diff --git a/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html deleted file mode 100644 index 7120abb08e..0000000000 --- a/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html +++ /dev/null @@ -1,413 +0,0 @@ ---- -title: Object.defineProperty() -slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty -tags: - - Méthode - - Objekt -translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty ---- -<div>{{JSRef}}</div> - -<p>Die Methode <code><strong>Object.defineProperty()</strong></code> definiert eine neue Eigenschaft direkt auf ein Objekt, oder modifiziert eine Eigenschaft. Schließlich gibt die Funktion das Objekt zurück.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> - -<h3 id="Parameter">Parameter</h3> - -<dl> - <dt><code>obj</code></dt> - <dd>Das Objekt, welchem die neue Eigenschaft zugewiesen werden soll.</dd> - <dt><code>prop</code></dt> - <dd>Der Name der Eigenschaft, welche hinzugefügt oder modifiziert werden soll.</dd> - <dt><code>descriptor</code></dt> - <dd>Die Beschreibung/ der Wert, welche die neue Eigenschaft annehmen soll.</dd> -</dl> - -<h3 id="Rückgabewert">Rückgabewert</h3> - -<p>Das Objekt, welches behandelt wurde.</p> - -<h2 id="Beschreibung">Beschreibung</h2> - -<p>Diese Methode erlaubt präzises Hinzufügen oder Modifizieren von Eigenschaften eines Objektes. Normal property addition through assignment creates properties which show up during property enumeration ({{jsxref("Statements/for...in", "for...in")}} loop or {{jsxref("Object.keys")}} method), whose values may be changed, and which may be {{jsxref("Operators/delete", "deleted", "", 1)}}. This method allows these extra details to be changed from their defaults. Standardmäßig sind Werte die mit <code>Object.defineProperty()</code> hinzugefügt wurden unveränderbar.</p> - -<p>Attribut Deskriptoren unterscheiden sich in zwei Varianten: Daten Deskriptoren und Zugiffsdeskriptoren. Ein <em>Datendeskriptor</em> ist ein Attribut welches einen Wert hat das schreibbar oder nicht schreibbar sein kann. Ein <em>Zugriffsdeskriptor</em> ist ein Attribut das mit einem "getter/setter Paar" beschrieben wird. Ein Deskriptor muss von einer dieser beiden Arten sein, er kann nicht beides sein.</p> - -<p>Beide, Daten- und Zugriffsdeskriptoren sind Objekte. Sie teilen die folgenden benötigten Objektschlüssel:</p> - -<dl> - <dt><code>configurable</code></dt> - <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br> - <strong>Defaults to <code>false</code>.</strong></dd> - <dt><code>enumerable</code></dt> - <dd><code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.<br> - <strong>Defaults to <code>false</code>.</strong></dd> -</dl> - -<p>Ein Datendeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p> - -<dl> - <dt><code>value</code></dt> - <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> - <dt><code>writable</code></dt> - <dd><code>true</code> if and only if the value associated with the property may be changed with an {{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}.<br> - <strong>Defaults to <code>false</code>.</strong></dd> -</dl> - -<p>Ein Zugriffsdeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p> - -<dl> - <dt><code>get</code></dt> - <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> - <dt><code>set</code></dt> - <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br> - <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> -</dl> - -<p>Bear in mind that these options are not necessarily the descriptor's own properties, and properties inherited from the prototype chain will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront or specify all options explicitly.</p> - -<pre class="brush: js">// being explicit -Object.defineProperty(obj, 'key', { - enumerable: false, - configurable: false, - writable: false, - value: 'static' -}); - -// recycling same object -function withValue(value) { - var d = withValue.d || ( - withValue.d = { - enumerable: false, - writable: false, - configurable: false, - value: null - } - ); - d.value = value; - return d; -} -// ... and ... -Object.defineProperty(obj, 'key', withValue('static')); - -// if freeze is available, prevents adding or -// removing the object prototype properties -// (value, get, set, enumerable, writable, configurable) -(Object.freeze || Object)(Object.prototype); -</pre> - -<h2 id="Examples">Examples</h2> - -<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p> - -<h3 id="Creating_a_property">Creating a property</h3> - -<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p> - -<pre class="brush: js">var o = {}; // Creates a new object - -// Example of an object property added with defineProperty with a data property descriptor -Object.defineProperty(o, 'a', { - value: 37, - writable: true, - enumerable: true, - configurable: true -}); -// 'a' property exists in the o object and its value is 37 - -// Example of an object property added with defineProperty with an accessor property descriptor -var bValue = 38; -Object.defineProperty(o, 'b', { - get: function() { return bValue; }, - set: function(newValue) { bValue = newValue; }, - enumerable: true, - configurable: true -}); -o.b; // 38 -// 'b' property exists in the o object and its value is 38 -// The value of o.b is now always identical to bValue, unless o.b is redefined - -// You cannot try to mix both: -Object.defineProperty(o, 'conflict', { - value: 0x9f91102, - get: function() { return 0xdeadbeef; } -}); -// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors -</pre> - -<h3 id="Modifying_a_property">Modifying a property</h3> - -<p>When the property already exists, <code>Object.defineProperty()</code> attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its <code>configurable</code> attribute set to <code>false</code> (the property is said to be “non-configurable”), then no attribute besides <code>writable</code> can be changed. In that case, it is also not possible to switch back and forth between the data and accessor property types.</p> - -<p>If a property is non-configurable, its <code>writable</code> attribute can only be changed to <code>false</code>.</p> - -<p>A {{jsxref("TypeError")}} is thrown when attempts are made to change non-configurable property attributes (besides the <code>writable</code> attribute) unless the current and new values are the same.</p> - -<h4 id="Writable_attribute">Writable attribute</h4> - -<p>When the <code>writable</code> property attribute is set to <code>false</code>, the property is said to be “non-writable”. It cannot be reassigned.</p> - -<pre class="brush: js">var o = {}; // Creates a new object - -Object.defineProperty(o, 'a', { - value: 37, - writable: false -}); - -console.log(o.a); // logs 37 -o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same) -console.log(o.a); // logs 37. The assignment didn't work. -</pre> - -<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p> - -<h4 id="Enumerable_attribute">Enumerable attribute</h4> - -<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { value: 1, enumerable: true }); -Object.defineProperty(o, 'b', { value: 2, enumerable: false }); -Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false -o.d = 4; // enumerable defaults to true when creating a property by setting it - -for (var i in o) { - console.log(i); -} -// logs 'a' and 'd' (in undefined order) - -Object.keys(o); // ['a', 'd'] - -o.propertyIsEnumerable('a'); // true -o.propertyIsEnumerable('b'); // false -o.propertyIsEnumerable('c'); // false -</pre> - -<h4 id="Configurable_attribute">Configurable attribute</h4> - -<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p> - -<pre class="brush: js">var o = {}; -Object.defineProperty(o, 'a', { - get: function() { return 1; }, - configurable: false -}); - -Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError -Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError -Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously) -Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing) -Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError - -console.log(o.a); // logs 1 -delete o.a; // Nothing happens -console.log(o.a); // logs 1 -</pre> - -<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p> - -<h3 id="Adding_properties_and_default_values">Adding properties and default values</h3> - -<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p> - -<pre class="brush: js">var o = {}; - -o.a = 1; -// is equivalent to: -Object.defineProperty(o, 'a', { - value: 1, - writable: true, - configurable: true, - enumerable: true -}); - - -// On the other hand, -Object.defineProperty(o, 'a', { value: 1 }); -// is equivalent to: -Object.defineProperty(o, 'a', { - value: 1, - writable: false, - configurable: false, - enumerable: false -}); -</pre> - -<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3> - -<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p> - -<pre class="brush: js">function Archiver() { - var temperature = null; - var archive = []; - - Object.defineProperty(this, 'temperature', { - get: function() { - console.log('get!'); - return temperature; - }, - set: function(value) { - temperature = value; - archive.push({ val: temperature }); - } - }); - - this.getArchive = function() { return archive; }; -} - -var arc = new Archiver(); -arc.temperature; // 'get!' -arc.temperature = 11; -arc.temperature = 13; -arc.getArchive(); // [{ val: 11 }, { val: 13 }] -</pre> - -<p>or</p> - -<pre class="brush: js">var pattern = { - get: function () { - return 'I always return this string, whatever you have assigned'; - }, - set: function () { - this.myname = 'this is my name string'; - } -}; - - -function TestDefineSetAndGet() { - Object.defineProperty(this, 'myproperty', pattern); -} - - -var instance = new TestDefineSetAndGet(); -instance.myproperty = 'test'; -console.log(instance.myproperty); // I always return this string, whatever you have assigned - -console.log(instance.myname); // this is my name string - -</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.2.3.6', 'Object.defineProperty')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.8.5.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</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>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")}}</td> - <td>{{CompatChrome("5")}}</td> - <td>{{CompatIE("9")}} [1]</td> - <td>{{CompatOpera("11.60")}}</td> - <td>{{CompatSafari("5.1")}} [2]</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>{{CompatGeckoMobile("2")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatIE("9")}}</td> - <td>{{CompatOperaMobile("11.5")}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In Internet Explorer 8 only on DOM objects and with some non-standard behaviors.</p> - -<p>[2] Also supported in Safari 5, but not on DOM objects.</p> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> - -<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> - -<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> - -<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> - -<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> - -<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> - -<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3> - -<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p> - -<ul> - <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li> - <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li> - <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> - <li>{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> - <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> - <li>{{jsxref("Object.prototype.watch()")}}</li> - <li>{{jsxref("Object.prototype.unwatch()")}}</li> - <li>{{jsxref("Operators/get", "get")}}</li> - <li>{{jsxref("Operators/set", "set")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> - <li>{{jsxref("Reflect.defineProperty()")}}</li> -</ul> |