diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/sv-se | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/sv-se')
47 files changed, 5474 insertions, 0 deletions
diff --git a/files/sv-se/_redirects.txt b/files/sv-se/_redirects.txt new file mode 100644 index 0000000000..c38e04b2c6 --- /dev/null +++ b/files/sv-se/_redirects.txt @@ -0,0 +1,2 @@ +# FROM-URL TO-URL +/sv-SE/docs/MDN/Getting_started /sv-SE/docs/MDN/Contribute/Getting_started diff --git a/files/sv-se/_wikihistory.json b/files/sv-se/_wikihistory.json new file mode 100644 index 0000000000..f5f08eea95 --- /dev/null +++ b/files/sv-se/_wikihistory.json @@ -0,0 +1,312 @@ +{ + "Glossary": { + "modified": "2020-10-07T11:14:01.837Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "jhf.087" + ] + }, + "Glossary/404": { + "modified": "2019-03-23T22:04:04.956Z", + "contributors": [ + "jhf.087" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:03:51.377Z", + "contributors": [ + "jhf.087" + ] + }, + "Glossary/IP_Adress": { + "modified": "2019-03-23T22:01:12.779Z", + "contributors": [ + "ChrisPro" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:47.837Z", + "contributors": [ + "bumpis8", + "Dankvardt", + "SphinxKnight", + "davidzki", + "andersrochester", + "AuntYoda", + "ObservantOwl", + "sideshowbarker" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:44.565Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:53.158Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Objects/Object-oriented_JS": { + "modified": "2020-07-16T22:32:08.386Z", + "contributors": [ + "DevelDoe" + ] + }, + "MDN": { + "modified": "2020-02-19T18:38:30.944Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "Jeremie", + "Umeaboy" + ] + }, + "MDN/Community": { + "modified": "2019-09-11T08:01:00.208Z", + "contributors": [ + "SphinxKnight", + "Umeaboy" + ] + }, + "MDN/Contribute": { + "modified": "2019-07-04T06:57:02.244Z", + "contributors": [ + "Evla03", + "wbamberg", + "Umeaboy", + "chrisdavidmills" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:16:06.952Z", + "contributors": [ + "chrisdavidmills", + "Yoof91", + "wbamberg", + "fredrikpaues", + "ObservantOwl" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2020-12-07T19:29:59.049Z", + "contributors": [ + "wbamberg" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-18T21:17:33.735Z", + "contributors": [ + "zutadeli" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T22:05:42.313Z", + "contributors": [ + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-03-23T22:40:05.989Z", + "contributors": [ + "wbamberg", + "jhf.087", + "Umeaboy" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:18.024Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Umeaboy" + ] + }, + "Tools/Prestanda": { + "modified": "2020-07-16T22:36:13.861Z", + "contributors": [ + "wbamberg", + "alpha60", + "FuzzyRoll" + ] + }, + "Web": { + "modified": "2019-03-23T22:48:46.738Z", + "contributors": [ + "vontompers", + "tobiassodergren", + "elof", + "jswisher" + ] + }, + "Web/API": { + "modified": "2019-03-23T22:30:58.641Z", + "contributors": [ + "Mikael-Sundstrom" + ] + }, + "Web/API/FileReader": { + "modified": "2020-10-15T22:09:33.849Z", + "contributors": [ + "en-programmerare", + "fscholz" + ] + }, + "Web/API/FileReader/readAsDataURL": { + "modified": "2020-10-15T22:09:36.432Z", + "contributors": [ + "valterekholm" + ] + }, + "Web/API/KryptoNyckel": { + "modified": "2019-03-18T21:47:07.992Z", + "contributors": [ + "ChrisPro" + ] + }, + "Web/API/KryptoNyckel/typ": { + "modified": "2019-03-18T21:47:05.804Z", + "contributors": [ + "ChrisPro" + ] + }, + "Web/API/SubtleCrypto": { + "modified": "2020-10-15T21:59:23.885Z", + "contributors": [ + "fscholz", + "prebytes" + ] + }, + "Web/API/SubtleCrypto/genereraNyckel": { + "modified": "2019-03-18T21:47:06.975Z", + "contributors": [ + "ChrisPro" + ] + }, + "Web/API/SubtleCrypto/signum": { + "modified": "2019-03-18T21:46:10.267Z", + "contributors": [ + "ChrisPro" + ] + }, + "Web/API/Window": { + "modified": "2020-10-15T22:09:11.784Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/API/Window/getComputedStyle": { + "modified": "2020-10-15T22:09:00.909Z", + "contributors": [ + "valterekholm" + ] + }, + "Web/HTML": { + "modified": "2020-08-13T05:25:38.130Z", + "contributors": [ + "andreaslarssamils", + "SphinxKnight", + "Umeaboy", + "julgran", + "jhf.087" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2019-03-18T21:47:08.909Z", + "contributors": [ + "inad9300" + ] + }, + "Web/HTML/Global_attributes/Kortplats": { + "modified": "2019-03-18T21:47:07.728Z", + "contributors": [ + "ChrisPro" + ] + }, + "Web/HTTP": { + "modified": "2019-03-18T21:20:44.132Z", + "contributors": [ + "kan.a" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-10-15T22:14:53.490Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T22:14:51.654Z", + "contributors": [ + "Evla03" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:42:22.850Z", + "contributors": [ + "SphinxKnight", + "AvocTos", + "LindaOtt", + "ekner", + "DevelDoe", + "piniGitHUB", + "Jailbr3ak" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-03-12T19:45:56.147Z", + "contributors": [ + "DevelDoe" + ] + }, + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:45:54.010Z", + "contributors": [ + "DevelDoe" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:45:07.408Z", + "contributors": [ + "Jeremie" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-03-12T19:45:07.285Z", + "contributors": [ + "kdex" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-03-12T19:45:07.568Z", + "contributors": [ + "Bulan" + ] + }, + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-03-12T19:46:03.829Z", + "contributors": [ + "md2perpe", + "avocadoboi" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:46:24.953Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Security/Osäkra_lösenord": { + "modified": "2019-03-23T22:01:18.095Z", + "contributors": [ + "ScorpionHH" + ] + } +}
\ No newline at end of file diff --git a/files/sv-se/archive/index.html b/files/sv-se/archive/index.html new file mode 100644 index 0000000000..cad124e919 --- /dev/null +++ b/files/sv-se/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p> + +<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p> + +<div class="note"> +<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p> +</div> + +<p>{{SubpagesWithSummaries}}</p> + +<h2 id="Subnav">Subnav</h2> + +<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p> diff --git a/files/sv-se/glossary/404/index.html b/files/sv-se/glossary/404/index.html new file mode 100644 index 0000000000..fc5cd09650 --- /dev/null +++ b/files/sv-se/glossary/404/index.html @@ -0,0 +1,17 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - Infrastruktur + - Navigering + - Ordlista +translation_of: Glossary/404 +--- +<p>404 är en standardsvarskod som betyder att aktuell {{Glossary("Server", "server")}} inte kan hitta den efterfrågade resursen.</p> + +<h2 id="Lär_dig_mer">Lär dig mer</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">Lista över HTTP-svarskoder</a></li> + <li><a href="https://developer.mozilla.org/en-US/Learn/Checking_that_your_web_site_is_working_properly">Nybörjartips för att undvika 404-fel</a></li> +</ul> diff --git a/files/sv-se/glossary/bandwidth/index.html b/files/sv-se/glossary/bandwidth/index.html new file mode 100644 index 0000000000..1a3af48faa --- /dev/null +++ b/files/sv-se/glossary/bandwidth/index.html @@ -0,0 +1,15 @@ +--- +title: Bandbredd +slug: Glossary/Bandwidth +tags: + - Infrastruktur + - Ordlista +translation_of: Glossary/Bandwidth +--- +<p><span style="color: #252525; font-family: sans-serif; line-height: 22.3999996185303px;">Bandbredd är ett mått på hur mycket information som kan passera genom en datakommunikationsförbindelse under ett givet tidsspann. Det mäts vanligtvis i multiplar av bits-per-sekund (Mbps) eller gigabits-per-sekund (Gbps).</span></p> + +<h2 id="Lär_dig_mer">Lär dig mer</h2> + +<ul> + <li>{{Interwiki("wikipedia", "Bandwidth")}} på Wikipedia</li> +</ul> diff --git a/files/sv-se/glossary/index.html b/files/sv-se/glossary/index.html new file mode 100644 index 0000000000..46346631fb --- /dev/null +++ b/files/sv-se/glossary/index.html @@ -0,0 +1,22 @@ +--- +title: Ordlista +slug: Glossary +tags: + - Ordlista +translation_of: Glossary +--- +<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Learn a new term:"})}}</div> + +<p><span class="seoSummary">Webbteknologier innehåller långa listor med jargong och förkortningar som används i dokumentation och kodning. Denna ordlista ger definitioner av ord och förkortningar som du behöver känna till för att framgångsrikt kunna förstå och bygga för webben.</span></p> + +<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> + +<h2 id="Bidra_till_ordlistan">Bidra till ordlistan</h2> + +<p>Denna ordlista är ett ständigt pågående arbete. Du kan hjälpa till att förbättra den genom att lägga till nya uppslagsord eller genom att göra redan existerande definitoner bättre. Det enklaste sättet att börja är att klicka på följande knapp, eller att välja något av nedanstående ord.</p> + +<p><strong><a href="/en-US/docs/new?parent=4391">Add a new entry to the glossary</a></strong></p> + +<p>{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}</p> + +<p>Om du vill veta mer om hur du kan bidra till ordlistan, titta på<a href="/en-US/docs/MDN/Doc_status/Glossary"> ordlistans dokumentationsstatus-sida</a>.</p> diff --git a/files/sv-se/glossary/ip_adress/index.html b/files/sv-se/glossary/ip_adress/index.html new file mode 100644 index 0000000000..3a50d57ea6 --- /dev/null +++ b/files/sv-se/glossary/ip_adress/index.html @@ -0,0 +1,26 @@ +--- +title: IP Adress +slug: Glossary/IP_Adress +tags: + - Glosor + - Infrastruktur + - Internet + - Nybörjare + - Webben +translation_of: Glossary/IP_Address +--- +<p> </p> + +<p>En IP-adress är ett nummer som är tilldelat för varje enhet som är ansluten till ett nätverk som använder Internet-protokollet.</p> + +<p>"IP-adress" refererar vanligtvis fortfarande till 32-bitars IPv4-adresser tills IPv6 distribueras bredare.</p> + +<p> </p> + +<h2 id="Lär_dig_mera">Lär dig mera</h2> + +<h3 id="Allround-kunskaper">Allround-kunskaper</h3> + +<ul> + <li>{{interwiki("wikipedia", "IP adress", "IP adress")}} på Wikipedia</li> +</ul> diff --git a/files/sv-se/learn/index.html b/files/sv-se/learn/index.html new file mode 100644 index 0000000000..14baeade13 --- /dev/null +++ b/files/sv-se/learn/index.html @@ -0,0 +1,121 @@ +--- +title: Lär dig webbutveckling +slug: Learn +tags: + - Beginner + - Index + - Introduktion + - Landing + - Learn + - NeedsTranslation + - Nybörjare + - TopicStub + - Web +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div> +<p class="summary">Välkommen till MDNs Inlärningsportal. De artiklar som återfinns här syftar till att hjälpa nybörjare inom webbutveckling med allt de behöver för att sätta igång och bygga enkla webbsidor.</p> +</div> + +<p>Syftet med denna del av MDN är inte att ta dig från "nybörjare" till "expert" utan att ta dig från "nybörjare" till "bekväm". När du känner dig bekväm kan du själv ta dig vidare genom att fortsätta lära från <a href="https://developer.mozilla.org/en-US/">resten av MDN</a>, och andra resurser med en högre svårighetsnivå som kräver en del bakgrundskunskap.</p> + +<p>Webbutveckling kan vara utmanande när du är en nybörjare, - vi kommer att hålla din hand och ge dig tillräckligt med information så att du kan börja känna dig bekväm och så att du kan lära dig ämnena ordentligt. Du borde känna dig som hemma, oavsett om du är en student som vill lära sig webbutveckling (självmant eller som del av din kurs), en lärare som letar efter kursunderlag, om du gör det som en hobby eller om du bara vill förstå mer om hur webbteknologier fungerar.</p> + +<div class="warning"> +<p><strong>Viktigt</strong>: Innehållet i Inlärningsportalen uppdateras ständigt. Om du har frågor kring ämnen som du vill se här eller som du känner saknas, se {{anch("Kontakt")}} sektionen nedan för information om hur du kan nå oss.</p> +</div> + +<h2 id="Var_börjar_man">Var börjar man</h2> + +<ul class="card-grid"> + <li><span>Nybörjare:</span>Om du är helt ny inom webbutveckling rekommenderar vi att du börjar med att läsa genom vår modul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Kom igång med Webben</a>. Den ger en praktisk introduktion inom webbutveckling.</li> + <li><span>Specifika frågor:</span>Om du har specifika frågor kring webbutveckling kan du kolla igenom våra <a href="/en-US/docs/Learn/Common_questions"> Återkommande frågor</a>.</li> + <li><span>Utöver grunderna:</span>Om du har lite kunskap redan, är nästa steg att lära dig {{glossary("HTML")}} och {{glossary("CSS")}} i mer detalj: börja med vår kurs <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduktion till HTML</a> eller fortsätt med kursen <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduktion till CSS</a>.</li> + <li><span>Fortsätt med skript:</span> Om du är bekväm med HTML och CSS redan, eller om du främst är intresserad av att koda, bör du börja med {{glossary("JavaScript")}} eller server-side-utveckling. Börja med kurserna <a href="/en-US/docs/Learn/JavaScript/First_steps">Javascript första steg</a> och <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side första steg</a>.</li> +</ul> + +<div class="note"> +<p><strong>Notera</strong>: I <a href="/en-US/docs/Glossary">Ordboken</a> finner du definitioner på terminologi.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: We'll publish more core learning material in the future. Our "Advanced learning material" menu on the left points to other learning material on MDN, which isn't necessarily part of the Learning Area, but is still useful.</p> +</div> + +<p>{{LearnBox({"title":"Random glossary entry"})}}</p> + +<h2 id="Behandlade_ämnen">Behandlade ämnen</h2> + +<p>Följande lista innehåller alla de ämnen som du kan finna i inlärningsportalen</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Börja med webbutveckling</a></dt> + <dd>Innehåller en praktisk introduktion till webbutveckling för nybörjare.</dd> + <dt><a href="/sv-SE/docs/Web/HTML">HTML - Strukturera webben</a></dt> + <dd>HTML är språket vi använder för att strukturera olika delar av vårt innehåll och definierar vilken dess mening eller syfte är. Detta ämne lär ut HTML i detalj.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Designa webben</a></dt> + <dd>CSS är språket vi använder för att designa och placera ut vårt innehåll på webben, så väl som lägga till animationer. Detta ämne ger en övergripande beskrivning av CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Dynamiskt skriptande client-side</a></dt> + <dd>JavaScript är skriptspråket som används för att lägga till dynamisk funktionalitet till webbsidor. Detta ämne lär ut grunderna som är nödvändiga för att bli bekväm med att skriva och förstå JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Tillgänglighet — gör webben användbar av alla</a></dt> + <dd>Tillgänglighet handlar om att göra innehåll på webben tillgänglighet till så många människor som möjligt oavsett funktionnedsättning, vilken dator eller mobil du använder, var du bor eller andra faktorer. Detta ämne ger dig allt du behöver veta.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Webbprestanda — gör webbsidor snabba och responsiva</a></dt> + <dd>Webbprestanda är konsten att se till att webbapplikationer laddas ned snabbt och är responsiva för användarinteraktioner, oavsett användarens bandbredd, storlek på skärm, nätverk eller hårdvara.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Verktyg och testande</a></dt> + <dd>Här skrivs det om verktyg som utvecklare använder för att underlätta sitt arbete, såsom verktyg som testar över flera webbläsare.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Server-side website programming</a></dt> + <dd>Even if you are concentrating on client-side web development, it is still useful to know about how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials detailing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd> +</dl> + +<h2 id="Getting_our_code_examples">Getting our code examples</h2> + +<p>The code examples you'll encounter in the Learning Area are all <a href="https://github.com/mdn/learning-area/">available on GitHub</a>. If you want to copy them all to your computer, the easiest way is to:</p> + +<ol> + <li><a href="https://git-scm.com/downloads">Install Git</a> on your machine. This is the underlying version control system software that GitHub works on top of.</li> + <li><a href="https://github.com/join">Sign up for a GitHub account</a>.</li> + <li>Once you've signed up, log in to <a href="https://github.com/">github.com</a> with your username and password.</li> + <li>Open your computer's <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> (Windows) or terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>)</li> + <li>To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: + <pre><code>git clone https://github.com/mdn/learning-area</code></pre> + </li> + <li>You can now enter the directory and find the files you are after (either using your finder/file explorer or the <a href="https://en.wikipedia.org/wiki/Cd_(command)">cd command</a>).</li> +</ol> + +<p>You can update the <code>learning-area</code> repository with any changes made to the master version on GitHub with the following steps:</p> + +<ol> + <li>In your command prompt/terminal, go inside the <code>learning-area</code> directory using <code>cd</code>. For example, if you were in the parent directory: + + <pre><code>cd learning-area</code></pre> + </li> + <li>Update the repository using the following command: + <pre><code>git pull</code></pre> + </li> +</ol> + +<h2 id="Contact_us">Contact us</h2> + +<p>If you want to get in touch with us about anything, the best way is to drop us a message on our <a href="/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">mailing lists</a> or <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a>. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or anything else.</p> + +<p>If you're interested in helping develop/improve the content, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>A great interactive site for learning programming languages from scratch.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd> + <dt><a href="https://www.freecodecamp.com/">FreeCodeCamp.com</a></dt> + <dd>Interactive site with tutorials and projects to learn Web Development.</dd> +</dl> + +<dl> + <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt> + <dd>A framework for entry-level web literacy & 21st Century skills, which also provides access to teaching activities sorted by category.</dd> + <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> + <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd> +</dl> diff --git a/files/sv-se/learn/javascript/index.html b/files/sv-se/learn/javascript/index.html new file mode 100644 index 0000000000..f01ce72c27 --- /dev/null +++ b/files/sv-se/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Having previous experience with other programming languages might also help.</p> + +<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/sv-se/learn/javascript/objects/index.html b/files/sv-se/learn/javascript/objects/index.html new file mode 100644 index 0000000000..a81dfed71a --- /dev/null +++ b/files/sv-se/learn/javascript/objects/index.html @@ -0,0 +1,54 @@ +--- +title: Introducing JavaScript objects +slug: Learn/JavaScript/Objects +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - NeedsTranslation + - Objects + - TopicStub + - Tutorial +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages, and act as handy data containers. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, then look at how to create your own objects.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have some familiarity with HTML and CSS. You are advised to work through the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> modules before starting on JavaScript.</p> + +<p>You should also have some familiarity with JavaScript basics before looking at JavaScript objects in detail. Before attempting this module, work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></dt> + <dd>In the first article looking at JavaScript objects, we'll look at fundamental JavaScript object syntax, and revisit some JavaScript features we've already looked at earlier on in the course, reiterating the fact that many of the features you've already dealt with are in fact objects.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></dt> + <dd>With the basics out of the way, we'll now focus on object-oriented JavaScript (OOJS) — this article presents a basic view of object-oriented programming (OOP) theory, then explores how JavaScript emulates object classes via constructor functions, and how to create object instances.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></dt> + <dd>Prototypes are the mechanism by which JavaScript objects inherit features from one another, and they work differently to inheritance mechanisms in classical object-oriented programming languages. In this article we explore that difference, explain how prototype chains work, and look at how the prototype property can be used to add methods to existing constructors.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></dt> + <dd>With most of the gory details of OOJS now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. In addition, we present some advice on when and where you might use OOJS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></dt> + <dd>JavaScript Object Notation (JSON) is a standard format for representing structured data as JavaScript objects, which is commonly used for representing and transmitting data on web sites (i.e. sending some data from the server to the client, so it can be displayed on a web page). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including accessing data items in a JSON object and writing your own JSON.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></dt> + <dd>In previous articles we looked at all the essential JavaScript object theory and syntax details, giving you a solid base to start from. In this article we dive into a practical exercise, giving you some more practice in building custom JavaScript objects, which produce something fun and colorful — some colored bouncing balls.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></dt> + <dd>In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.</dd> +</dl> diff --git a/files/sv-se/learn/javascript/objects/object-oriented_js/index.html b/files/sv-se/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..4b891d60e4 --- /dev/null +++ b/files/sv-se/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,284 @@ +--- +title: Object-orienterad JavaScript för nybörjare +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Artikel + - Create + - Instans + - JavaScript + - Kod + - Konstruktor + - Lära sig + - Nybörjare + - OOJS + - OOP + - Objekt + - Objekt Orienterat + - Skript + - '|10n:priority' +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Med grunderna ur vägen, kommer vi nu att fokusera på objektorienterad JavaScript (OOJS) - den här artikeln presenterar teorinen för grundläggande syn på objektorienterad programmering (OOP), sedan förklarar vi hur JavaScript emulerar objektklasser via konstruktorfunktioner och hur man skapar objektinstanser.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Förutsättningar:</th> + <td>Grundläggande datakunskap, en grundläggande förståelse för HTML och CSS, och JavaScript (se <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> och <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) och OOJS grunderna (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">Mål:</th> + <td>Att förstå den grundläggande teorin bakom objektorienterad programmering, hur detta relaterar till JavaScript ( "där allt är objekt"), och hur man skapar konstruktörer och objekt instanser.</td> + </tr> + </tbody> +</table> + +<h2 id="Objektorienterad_programmering_från_10.000_meter">Objektorienterad programmering från 10.000 meter</h2> + +<p>Till att börja med, låt oss ge dig en förenklad, hög nivå vy, över vad Objektorienterad programmering (OOP) är.Vi säger förenklat, eftersom OOP snabbt kan bli mycket komplicerat, och ge det en fullständig genomgång, hör och nu, skulle förmodligen förvirra mer än hjälp. Den grundläggande idén med OOP är att vi använder objekt för att modellera verkliga saker som vi vill representera i våra program, och/eller ge ett enkelt sätt att komma åt funktioner som annars skulle vara svårt eller omöjligt att använda sig av.</p> + +<p>Objekt kan innehålla relaterade data och kod, som representerar information om det du försöker att modellera och funktionalitet eller beteende som du vill att den ska ha. Objektdata (och ofta, funktioner) kan lagras prydligt (det officiella order är inkapslad) i ett objekt paket(Som kan ges ett specifikt namn för att referera till, som ibland kallas ett namnutrymme ), vilket gör det lätt att strukturera och tillgång; objekt används också ofta som datalager som lätt kan skickas över nätverket.</p> + +<h3 id="Definiera_en_objekt_mall">Definiera en objekt mall</h3> + +<p>Låt oss betrakta ett enkelt program som visar information om elever och lärare på en skola. Här ska vi titta på OOP teorin i allmänhet, inte i samband med något specifik programmeringsspråk.</p> + +<p>För att börja detta, skulle vi gå tillbaka till vår person objekttyp från vår första objekt artikel, som definierar den generiska data och funktionaliteten hos en person. Det finns massor av saker du kan veta om en person (sin adress, höjd, skostorlek, DNA-profil, passnummer , betydande personlighetsdrag ...), men i detta fall är vi bara intresserade av visar deras namn, ålder, kön och intressen. Vi vill också kunna skriva en kort introduktion om dem utifrån dessa data, och få dem att säga hej. Detta kallas abstraktion - att skapa en enkel modell av en mer komplex sak som representerar de viktigaste aspekterna på ett sätt som är lätt att arbeta med för vår programmets syften.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<p>I vissa OOP språk är det denna generiska objekt typ definition, som kallas en klass (JavaScript använder en annan mekanism och terminologi, som du ser nedan) - vi ser inte på det som ett objekt, utan det en mall som definierar vilka egenskaper ett objekt borde ha.</p> + +<h3 id="Skapa_faktiska_objekt">Skapa faktiska objekt</h3> + +<p>Från vår klass, kan vi skapa objektinstanser - objekt som innehåller data och funktioner som definieras i klassen. Från vår Person klass, kan vi nu skapa några verkliga människor:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13883/MDN-Graphics-instantiation-2.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>När ett objekt instans skapas från en klass, exekveras klassens konstruktorfunktion för att skapa den. Denna process för att skapa en objektinstans från en klass kallas instansiering - objektinstansen instansieras från klassen.</p> + +<h3 id="Specialist_klasser">Specialist klasser</h3> + +<p>I det här fallet vill vi inte använda oss av generiska människor, istället, vill vi ha lärare och elever, som båda är specifika typer av människor. I OOP, kan vi skapa nya klasser baserade på andra klasser — dessa nya barn-klasser kan ärva data och kod egenskaper i en förälder-klass, så att du kan återanvända egenskaper som är gemensam för alla objekttyper i stället för att tvingas kopiera dem. Där egenskaperna skiljer sig mellan klasser, kan du definiera specialiserad funktionallitet direkt på dem, efter behov.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>Detta är verkligen användbart - lärare och elever har många gemensamma egenskaper såsom namn, kön och ålder, så det är användbart att bara behöva definiera dessa egenskaper en gång. Du kan också definiera samma egenskap separat i olika klasser, eftersom varje definition av den egenskapen kommer att vara i ett annan namnområde. Till exempel kan en student hälsning ha formen "Yo, jag är [firstname ]" (t.ex. Yo, jag är Sam), medan en lärare kan använda något mer formell, till exempel "Hej, mitt namn [Prefix ] [lastname ], och jag undervisar [Subject]." (T.ex. Hej, mitt namn Mr Griffiths, och jag undervisar kemi).</p> + +<div class="note"> +<p><strong>Obs! </strong>Finare ord för möjligheten av flera objekttyper för att implementera samma egenskap är<strong> polymorfism.</strong></p> +</div> + +<p>Du kan nu skapa objektinstanser från dina barn-klasser. Till exempel:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>I resten av artikeln kommer vi att börja titta på hur OOP teorin kan omsättas i praktiken i JavaScript.</p> + +<h2 id="Konstruktörer_och_objektinstanser">Konstruktörer och objektinstanser</h2> + +<p>Somliga hävdar att JavaScript inte är ett sannt objektorienterat språk - till exempel har den inte en <code>class</code> uttalande för att skapa klasser som många OO språk. JavaScript använder istället specialfunktioner som kallas konstruktorfunktioner för att definiera objekt och deras egenskaper. De är användbara eftersom du ofta stöter på situationer där du inte vet hur många objekt du vill skapa; konstruktörer ger dig möjlighet att skapa så många objekt som du behöver på ett effektivt sätt, fästa data och funktioner till dem efter behov.</p> + +<p>När ett nytt objekt instans skapas från en konstruktorfunktion är inta alla egenskaper kopierade över till det nya objektet som i "klassiska" OO språk — istället är egenskaperna kopplad via en referenskedja som kallas för prototypkedja<br> + (se <a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>). Så det här är inte sant instansiering, strikt talat - JavaScript använder en annan mekanism för att dela egenskaper mellan objekt.</p> + +<div class="note"> +<p><strong>Obs!</strong> Att inte vara "klassiska OOP" är inte nödvändigtvis en dålig sak; som nämnts ovan, kan OOP snabbt bli myckt komplext och JavaScript har några trevliga sätt att dra nytta av OO egenskaper utan att behöva gå för mycket in på djupet.</p> +</div> + +<p>Låt oss undersöka hur vi skapa klasser via konstruktörer och skapa objekt utifrån från dem i JavaScript. Först och främst vill vi dig att göra en ny lokal kopia av <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> file filen vi såg i vår första Objects artikeln.x</p> + +<h3 id="Ett_enkelt_exempel">Ett enkelt exempel</h3> + +<ol> + <li>Låt oss börja med att titta på hur du kan definiera en person med en normal funktion. Lägg till den här funktionen under den befintliga koden: + <pre class="brush: js">function createNewPerson(name) { + var obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; + return obj; +}</pre> + </li> + <li>Du kan nu skapa en ny person genom att anropa den här funktionen - prova följande rader i webbläsarens JavaScript-konsol: + <pre class="brush: js">var salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + Detta fungerar tillräckligt bra, men det är lite långtradigt; om vi vet att vi vill skapa ett objekt, varför måste vi uttryckligen skapa ett nytt tomt objekt och returnera den? Lyckligtvis get JavaScript oss en praktisk genväg i form av konstruktorfunktioner - låt oss skapa en nu!</li> + <li>Byt ut din tidigare funktion med följande: + <pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>Konstruktorfunktionen är JavaScript's version av en klass. Du ser att den har alla egenskaper du förväntar dig av en funktion, även om den inte returnerar något eller uttryckligen skapa ett objekt— i princip bara definierar den egenskaper och metoder. Du ser också att nyckelordet <code>this</code> används här — I princip säger <code>this</code> att när ett av dessa objektinstanser skapas kommer objektets namn egendom vara lika med namn värdet som skickas till konstruktören via anfop och även greeting () metoden kommer också att använda namnets värde.</p> + +<div class="note"> +<p><strong>Obs! </strong>En konstruktörs funktionsnamn börjar oftast med stor bokstav - denna konvention används för att göra konstruktorfunktioner lättare att känna igen i kod.</p> +</div> + +<p>Så hur ska vi kalla en konstruktör att skapa några objekt?</p> + +<ol> + <li>Lägg till följande rader under din tidigare kod inlägg: + <pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + </li> + <li>Spara din kod och ladda om den i webbläsaren och försök att skriva in följande rader i din textinmatning : + <pre class="brush: js">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Häftigt! Du kommer nu se att vi har två nya objekt på sidan, som vart och ett lagras under olika namnutrymmen - när du tillgår deras egenskaper och metoder, måste du anropa dem med <code>person1</code> eller <code>person2</code>; De är prydligt bort packade så att de inte kollidera med andra funktioner. de har dock samma <code>name</code> egendom och <code>greeting</code>() metod tillgänglig. Obs tatt de använder sitt eget <code>name</code> värde som tilldelades till dem när de skapades; Detta är en anledning till varför det är mycket viktigt att använda this, så de kommer att använda sina egna värden, och inte något annat värde.</p> + +<p>Låt oss titta på konstruktorfunktionens anrop igen:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p>I varje fall är det <code>new</code> nyckelordet som används för att tala om för webbläsaren vi vill skapa en ny objekt-instans, följt av funktionsnamnet med de nödvändiga parametrar som finns inom parentes, resultatet lagras sedan i en variabel - det liknar mycket hur en standard funktionen anropas. Varje instans skapas enligt denna definition:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>Efter att de nya objekten har skapats, har person1 och Person2 variabler som innehåller följande objekt:</p> + +<pre class="brush: js">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>Observera att när vi kallar vår konstruktorfunktion vi definierar greeting() varje gång, vilket inte är idealiskt. För att undvika detta kan vi definiera funktioner på prototypen istället, som vi kommer att titta på senare.</p> + +<h3 id="Färdigtställ_vår_konstruktör">Färdigtställ vår konstruktör</h3> + +<p>Exemplet vi tittade på ovan var bara ett enkelt exempel för att komma igång. Låt oss nu gå vidare och skapa vår sista person() konstruktorfunktion.</p> + +<ol> + <li>Ta bort koden du lagt in hittills, och lägg till denna konstruktör istället - den är exakt densamma som det enkla exempelet i princip, med lite mer komplexitet: + <pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +};</pre> + </li> + <li>För att skapa ett objekt instans, lägg in följande rad: + <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>You'll now see that you can access the properties and methods just like we did with the first object we defined:</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>Obs</strong>: Om du har problem med att få detta att fungera, försök jämföra koden mot vår version— se <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">live</a>).</p> +</div> + +<h3 id="Further_exercises">Further exercises</h3> + +<p>To start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the resulting object instances.</p> + +<p>In addition, there are a couple of problems with our <code>bio()</code> method — the output always includes the pronoun "He", even if your person is female, or some other preferred gender classification. And the bio will only include two interests, even if more are listed in the <code>interests</code> array. Can you work out how to fix this in the class definition (constructor)? You can put any code you like inside a constructor (you'll probably need a few conditionals and a loop). Think about how the sentences should be structured differently depending on gender, and depending on whether the number of listed interests is 1, 2, or more than 2.</p> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck, we have provided an <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — try writing it yourself first though!</p> +</div> + +<h2 id="Andra_sätt_att_skapa_objektinstanser">Andra sätt att skapa objektinstanser</h2> + +<p>Hittills har vi sett två olika sätt att skapa en objekt-instans — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">declaring an object literal</a>, och med hjälp av en konstruktorfunktion (se ovan).</p> + +<p>Dessa är korrekta, men det finns andra sätt - vi vill göra dig förtrogen med dessa om du stöter på dem i dina resor runt webben.</p> + +<h3 id="Object()_Konstruktorn">Object() Konstruktorn</h3> + +<p>Först av allt, kan du använda <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> konstruktorn för att skapa nya objekt . Ja, även generiska objekt har en konstruktör, som genererar ett tomt objekt.</p> + +<ol> + <li>Försök att skriva in detta i din webbläsares JavaScript-konsol: + <pre class="brush: js">var person1 = new Object();</pre> + </li> + <li>Detta lagrar ett tomt objekt i <code>person1</code> variabeln. Du kan sedan lägga till egenskaper och metoder till detta objekt med hjälp av dot eller konsolnotation såsom önskas; prova dessa exempel: + <pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>Du kan också skicka en objektlitteral till <code>Object()</code> konstruktören som en paramete, för att på förhand fylla den med egenskaper/metoder. Prova detta: + <pre class="brush: js">var person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Använda_create()_methoden">Använda create() methoden</h3> + +<p>JavaScript har en inbyggd metod som kallas <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code>, som låter dig skapa en ny objekt-instans baserat på ett befintligt objekt.</p> + +<ol> + <li>Prova detta i JavaScript-konsolen: + <pre class="brush: js">var person2 = Object.create(person1);</pre> + </li> + <li>Proba nu dessa: + <pre class="brush: js">person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Du ser att person2 har skapats baserat på person1 - det har samma egenskaper och metoder som finns tillgängliga för den. Detta är ganska användbart, eftersom det tillåter dig att skapa nya objektinstanser utan att behöva definiera en konstruktör. Dessutom ger konstruktörer din kod mer ordning - du kan skapa dina konstruktörer på ett ställe, sedan skapa de instanser som behövs, på så sätt är det tydligt var de kommer ifrån.</p> + +<p>Nackdelen är att <code>create()</code>stöds inte av IE8. Så konstruktörer kanske inte är rätt väg att gå om du vill stödja äldre webbläsare, eller om du behöver bara ett par kopior av ett objekt. Det är upp till dig vad du föredrar. Vissa tycker helt enkelt att <code>create</code>() är enklare att förstå och använda.</p> + +<p>Vi kommer att undersöka effekterna av <code>create() </code>i mer detalj senare.</p> + +<h2 id="Sammanfattning">Sammanfattning</h2> + +<p>Denna artikel har gett en förenklad bild av objektorienterad teori - detta är inte hela historien, men det ger dig en uppfattning om vad vi har att göra med här. Dessutom har vi börjat titta på hur JavaScript relaterar och hur det skiljer sig från "klassiska OOP". Samt hur man skapar klasser i JavaScript med hjälp av konstruktorfunktioner och olika sätt att generera objektinstanser .</p> + +<p>I nästa artikel kommer vi att undersöka JavaScript Object prototyper.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> diff --git a/files/sv-se/mdn/community/index.html b/files/sv-se/mdn/community/index.html new file mode 100644 index 0000000000..ab5942bf81 --- /dev/null +++ b/files/sv-se/mdn/community/index.html @@ -0,0 +1,54 @@ +--- +title: Join the MDN Web Docs community +slug: MDN/Community +tags: + - Guide + - Landar + - MDN Meta + - Mötesplats +translation_of: MDN/Community +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<div class="summary"> +<p>MDN Web Docs är mer än en wiki: Det är en mötesplats för utvecklare som arbetar tillsammans för att göra MDN till en enastående resurs till utvecklarna som använder öppna webb-teknologier.</p> +</div> + +<p>We'd love it if you contribute to MDN, but we'd love it even more if you participate in the MDN community. Here's how to get connected, in three easy steps:</p> + +<ol> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">Skapa ett MDN-konto</a>.</li> + <li><a href="/en-US/docs/MDN/Community/Conversations">Gå med i konversationer</a>.</li> + <li><a href="/en-US/docs/MDN/Community/Whats_happening">Följ det som händer</a>.</li> +</ol> + +<h2 id="Så_här_fungerar_mötesplatsen">Så här fungerar mötesplatsen</h2> + +<p>The following are more articles that describe the community of MDN.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Community roles</a></dt> + <dd class="landingPageList">There are a number of roles within the MDN community that have specific responsibilities.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt> + <dd class="landingPageList">This is a guide to organizing a documentation sprint. It contains advice and tips from people who have organized doc sprints, to help you in organizing one, too.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Whats_happening">Följ det som händer</a></dt> + <dd class="landingPageList">MDN is brought to you by the <a class="external" href="https://wiki.mozilla.org/MDN">Mozilla Developer Network community</a>. Here are some ways to that we share information about what we're doing.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN community conversations</a></dt> + <dd class="landingPageList">The "work" of MDN happens on the MDN site, but the "community" also happens through (asynchronous) discussion and (synchronous) online chat and meetings.</dd> + <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Working_in_community">Arbeta i mötesplatsen</a></dt> + <dd class="landingPageList">A major part of contributing to MDN documentation on any significant scale is knowing how to work as part of the MDN community. This article offers tips to help you make the most of your interactions with both other writers and with development teams.</dd> +</dl> +</div> +</div> diff --git a/files/sv-se/mdn/contribute/getting_started/index.html b/files/sv-se/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..1fba697ffc --- /dev/null +++ b/files/sv-se/mdn/contribute/getting_started/index.html @@ -0,0 +1,107 @@ +--- +title: Kom igång på MDN +slug: MDN/Contribute/Getting_started +tags: + - Guide + - Introduktion + - Kom igång + - MDN Meta + - Nybörjare +translation_of: MDN/Contribute/Getting_started +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>Vi är en öppen grupp av utvecklare och skribenter som bygger resurser för en bättre Web, oberoende av värumärke, webläsare eller platform. Alla kan bidra och varje person som bidrar gör oss starkare. Tillsammans kan vi fortsätta driva innovation på Webben för allmänhetens bästa. Det börjar här, med dig.</p> + +<p>Varje del av MDN (från koden som gör sidan att fungerar till dokumentation, kodexempel och demos) är skapad av en community av utvecklare och skribenter. Alla har någonting att erbjuda, och vi hoppas att du vill bli en del av det!</p> + +<h2 id="3_Enkla_steg_till_MDN">3 Enkla steg till MDN</h2> + +<p><span class="seoSummary">MDN är en wiki, där <strong>alla</strong> kan lägga till och redigera innehåll. Du behöver inte vara en utvecklare eller veta allt om olika teknologier. Det finns mycket som ska göras, från enkla uppgifter såsom att korrekturläsa och rätta felstavningar till mera komplexa uppdrag som att skriva API-dokumentation. Denna guide kommer att hjälpa dig att komma igång och leda dig till att hitta sätt <em>du </em>kan hjälpa till med att förbättra MDNs innehåll. </span></p> + +<p>Att bidra är enkelt och tryggt. Även om du gör ett misstag, det är lättfixad; om du vet inte precis hur saker och ting ska se ut, eller om din grammatik inte är felfri, det är lugnt! Vi har ett team som ser till att innehållet på MDN är så bra som möjligt. Någon kommer att gå igenom det du har gjort och säkerställa att det blir snyggt och välskrivet. Dela vad du kan och följ dina styrkor, och lita på vår community att hjälpa med att göra ditt bidrag ännu bättre.</p> + +<h3 id="Steg_1_Skapa_ett_MDN_konto">Steg 1: Skapa ett MDN konto</h3> + +<p>För att börja bidra till MDN behöver du ett konto hos oss. För mer information se <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account">hur man skapar ett konto.</a> Tänk på att du kommer att behöva ett <a href="https://github.com/join">GitHub-konto</a> innan du kan skapa ett MDN-konto eftersom vi använder GitHub för autentisering för tillfället.</p> + +<h3 id="Steg_2_Välj_en_uppgift">Steg 2: Välj en uppgift</h3> + +<p>Nu när du är inloggad, du kan läsa beskrivningen för olika typer av uppgifter i {{anch("Möjliga uppgiftsstyper", "listan nedan")}}, och välj den som tilltalar dig mest. Du kan välja vilken uppgift du vill och komma igång med din bidrag.</p> + +<p>Om din uppgift kräver att du skapar nya sidor, se {{SectionOnPage("/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Getting page creation permissions")}} för viktig information om hur man får behörighet att lägga till nya sidor; som en säkerhetsåtgärd, nya konton har inte denna behörighet som standard.</p> + +<h3 id="Steg_3_Gör_uppgiften">Steg 3: Gör uppgiften</h3> + +<p>När du har valt vilken typ av uppgift du vill göra, hitta en specifik sida, kodexempel, etc att jobba på, och bara gör det! </p> + +<p>Bryr dig inte om att det måste bli perfekt; andra MDN bidragsgivare är här för att fixa alla dessa småfel som slinker igenom. Om du har frågor under tiden, se <a href="/en-US/docs/MDN/Community">Community-sidan </a>för info om mailinglistor och chattkanaler där du kan få svar.</p> + +<div class="note"> +<p>Om du vill prova på att redigera på MDN innan du gör någonting "på riktigt". vi har en <strong><a href="/en-US/docs/Sandbox">Sandbox</a></strong> sida för dig att leka med. Vänligen begränsa din experimentering till denna sida. Vänligen gör inga onödiga ändraingar till innehållssidor bara för att se vad som kommer att hända; det blir en röra för andra att städa upp eller, värre, det blir förvirrande för läsare som vill bara lära sig någonting eller leta upp någonting. </p> +</div> + +<p>När du är klar med uppgiften du har valt, kan du alltid välja en till, eller se nedan vilka <a href="#Other_things_you_can_do_on_MDN">andra saker du kan göra på MDN</a>.</p> + +<h2 id="Möjliga_uppgiftsstyper">Möjliga uppgiftsstyper</h2> + +<p>Det finns flera sätt att bidra till MDN beroende på din kompetens- eller intresseområde. Även om vissa uppgifter kan vara lite skrämmande, har vi många enklare aktiviteter tillgängliga också. Vissa kräver bara fem minuter (eller mindre!) av din tid. Nedan kan du hitta en lista av uppgifter, inklusive en beskrivning och en tidsuppskattning som uppgiften brukar ta.</p> + +<h3 id="Val_1_Jag_gillar_ord">Val 1: Jag gillar ord </h3> + +<p>Du kan hjälpa oss korrekturläsa eller redigera olika befintliga dokument, och lägga till lämpliga tags till dom.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Sätta upp en sammanfattning för en sida</a> (5-15 minuter)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">Gör en redaktionell granskning</a> (5–30 minuter)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Gör en ny inlägg i ordlistan</a> (15 minuter-1 timme)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Skriv en artikel för att hjälpa folk lära sig mer om webben</a> (1-3 timmar)</li> +</ul> + +<div class="note">Om du redigerar artiklar eller skriver nya, vänligen läs <a href="/en-US/docs/MDN/Contribute/Guidelines/Style_guide">Stilguiden</a>. Det kommer att hjälpa säkerställa att artiklar är konsekventa.</div> + +<h3 id="Val_2_Jag_gillar_kod">Val 2: Jag gillar kod</h3> + +<p>Vi behöver flera kodexempel! Du kan också hjälpa oss bygga vår platform, <a href="/en-US/docs/MDN/Kuma">Kuma</a>, eller hjälpa oss fylla ut vår databas av webbläsarkompatibilitetsdata. </p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Konvertera kodexempel till "live kod"</a> (30 minuter)</li> + <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Läs "Bli Involverad" guiden</a> (30 minuter)</li> + <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Sätta upp en Kuma utvecklngsmiljö</a> (1 timme)</li> + <li><a href="https://github.com/mozilla/kuma#readme">Skicka din kod patch till Kuma kodbasen</a> (1 timme)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">Lägg till eller uppdatera webbläsarkompatibilitetsdata</a> (30 minuter)</li> +</ul> + +<h3 id="Val_3_Jag_gillar_både_ord_och_kod">Val 3: Jag gillar både ord och kod</h3> + +<p>Vi har uppgifter som kräver både teknisk- och språkkompetens som att skriva ny artiklar, granska för teknisk noggranhet eller anpassa dokumentation.</p> + +<ul> + <li><a href="/en-US/docs/MDN/About/Promote">Främja MDN på din egen sida</a> (5 minuter)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">Ta bort "experimentella" macros </a>från objekt som är inte längre är experimentella (5-30 minuter)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">Gör tekniska granskningar</a> (30 minuter)</li> + <li><a href="/en-US/docs/MDN/Contribute/Contribute_to_docs_that_are_currently_needed">Skriv en artikel om ett ämne som behövs just nu</a> (1 timme eller mer)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Skapa en interaktiv övning som hjälper folk lära sig mer om webben</a> (1 timme eller mer)</li> + <li><a href="/en-US/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">Fixa en dokumentationsbugg </a>från <a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">MDN kategorin i Bugs Ahoy</a> (1 timme eller mer)</li> +</ul> + +<h3 id="Val_4_Jag_vill_ha_MDN_på_mitt_språk">Val 4: Jag vill ha MDN på mitt språk</h3> + +<p>All lokaliserings- och översättningsarbete hos MDN görs av vår fantastiska community av volontärer.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Contribute/Localize/Translating_pages">Översättning av sidor</a> (2 timmar) (Se <a href="/en-US/docs/MDN/Doc_status/l10nPriority">högst prioriterade</a>)</li> + <li>Sammarbeta med andra lokaliseringsvoluntärer listade i <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Lokalisationsprojekt</a> (30 minuter)</li> +</ul> + +<h3 id="Val_5_Jag_hittade_felaktig_information_men_jag_vet_inte_hur_jag_kan_fixa_det">Val 5: Jag hittade felaktig information men jag vet inte hur jag kan fixa det</h3> + +<p>Du kan rapportera problem genom <a class="external" href="https://bugzilla.mozilla.org/form.doc">att lämna in en dokumentationsbug</a>g. (5 minuter)</p> + +<h2 id="Annat_du_kan_göra_på_MDN">Annat du kan göra på MDN</h2> + +<ul> + <li><a href="/en-US/docs/MDN/Community">Gå med i MDN Community</a>.</li> + <li><a href="/en-US/profile">Komplettera din profil </a>så att andra kan lär känna dig.</li> + <li>Läs mer om att <a href="/en-US/docs/MDN/Contribute">bidra till MDN</a>.</li> +</ul> diff --git a/files/sv-se/mdn/contribute/howto/create_an_mdn_account/index.html b/files/sv-se/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..0fcf7d0a6c --- /dev/null +++ b/files/sv-se/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,38 @@ +--- +title: Hur du skapar MDN Konto +slug: MDN/Contribute/Howto/Create_an_MDN_account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +<div>{{MDNSidebar}}</div> + +<p><span class="seoSummary">To edit content on MDN, you need an MDN profile. You don't need a profile if you only want to read and search the MDN docs. This guide will help you set up your MDN profile.</span></p> + +<div class="pull-aside"> +<div class="moreinfo"><strong>Why does MDN need my email address?</strong><br> +<br> +Your email address is used for account recovery and, if needed, by MDN administrators to contact you about your account or your activity on the site.<br> +<br> +In addition, you can sign up for notifications (such as <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">when specific pages are changed</a>) and messages (for example, if you opt to join our beta testing team, you might receive emails about new features that need testing).<br> +<br> +Your email address is never displayed on MDN and will be used only in accordance with our <a href="https://www.mozilla.org/privacy/websites/">privacy policy</a>.<br> + +<div class="note">If you log in to MDN via GitHub, and you use a "noreply" email address on GitHub, you will <em>not</em> receive messages (including notifications when you subscribe to pages) from MDN.</div> +</div> +</div> + +<ol> + <li>At the top of every page on MDN you'll find a button labeled <strong>Sign in</strong>. Point your mouse at this (or tap on it, if you're on a mobile device) to display a list of the authentication services we support for signing in to MDN.</li> + <li>Select a service to sign in with. Currently, only GitHub is available. Note that if you select GitHub, a link to your GitHub profile will be included on your public MDN profile page.</li> + <li>Follow GitHub's prompts to connect your account to MDN.</li> + <li>Once the authentication service returns you to MDN, you'll be prompted to enter a username and email address. <em>Your username will be displayed publicly to credit you for the work you've done. Do not use your email address as your username</em><strong>.</strong></li> + <li>Click <strong>Create my MDN profile</strong>.</li> + <li>If the email address you specified in step 4 isn't the same one you use with the authentication service, please check your email and click the link in the confirmation email we send you.</li> +</ol> + +<p>That's it! You've got an MDN account, and you can immediately edit pages!</p> + +<p>You can click on your name at the top of any MDN page to see your public profile. From there, you can click <strong>Edit</strong> to make changes or additions to your profile.</p> + +<div class="note"> +<p>New usernames can't contain spaces or the "@" character. Keep in mind that your username will be displayed publicly to identify the work you've done.</p> +</div> diff --git a/files/sv-se/mdn/contribute/howto/index.html b/files/sv-se/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..782028400e --- /dev/null +++ b/files/sv-se/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: 'MDN web docs: How-to guides' +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/sv-se/mdn/contribute/index.html b/files/sv-se/mdn/contribute/index.html new file mode 100644 index 0000000000..f09bc1a586 --- /dev/null +++ b/files/sv-se/mdn/contribute/index.html @@ -0,0 +1,21 @@ +--- +title: Bidra till MDN +slug: MDN/Contribute +tags: + - Guider + - Landing + - MDN Meta + - TopicStub +translation_of: MDN/Contribute +--- +<div>{{MDNSidebar}}</div> + +<div>{{IncludeSubnav("/sv-SE/docs/MDN")}}</div> + +<p>Välkommen! Genom att besöka denna sida har du tagit det första steget för att bli en bidragsgivare för MDN. <span class="seoSummary">Guiderna som finns här täcker alla aspekter för att vara med och bidra i MDN. Detta inkluderar stil-guider och guider för hur du använder våra redigeringsverktyg m.m. Se till att du har läst (och följer) <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozillas Villkor</a> före du redigerar eller skapar några sidor. </span></p> + +<p>Om du inte har bidragit till MDN förut så kan <a href="/en-US/docs/MDN/Getting_started">Getting Started</a>-guiden hjälpa dig att välja en uppgift att hoppa in och hjälpa till med.</p> + +<div class="row topicpage-table"></div> + +<p>{{LandingPageListSubPages()}}</p> diff --git a/files/sv-se/mdn/contribute/localize/index.html b/files/sv-se/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..fff4c53f32 --- /dev/null +++ b/files/sv-se/mdn/contribute/localize/index.html @@ -0,0 +1,43 @@ +--- +title: Localizing MDN +slug: MDN/Contribute/Localize +tags: + - Landing + - Localization + - MDN Meta + - NeedsTranslation + - TopicStub + - l10n +translation_of: MDN/Contribute/Localize +--- +<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> + +<p>MDN is used by people all over the world as a reference and guide to Web technologies, as well as to the internals of Firefox itself. Our localization communities are a key part of the Mozilla project; their work in translating and localizing our documentation helps people around the world develop for the open Web. If you'd like to learn more about localization, or even start a new localization, this is the place to begin.</p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Localization_communities_on_MDN">Localization communities on MDN</h2> + +<p>Localization activities on MDN are done both by individuals acting independently, and by groups working together, possibly as part of a larger Mozilla localization community. Localization projects on MDN are led by <strong>Localization drivers</strong>.</p> + +<ul> + <li><a href="/en-US/docs/MDN/Community/Roles/Localization_projects">Localization projects</a></li> + <li><a href="/en-US/docs/MDN/Community/Roles/Localization_driver_role">Localization driver role</a></li> +</ul> + +<h2 id="Localization_tools">Localization tools</h2> + +<p>There are several useful tools that you'll use during localization work:</p> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt> + <dd>Used for translation of strings across multiple Mozilla projects, including the MDN user interface (as well as the Firefox user interface).</dd> + <dt><a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt> + <dd>A utility provided by Mozilla France, which lets you search for occurrences of an English string, finding all the various translations into a target locale that are used throughout Mozilla code. Useful for finding the preferred translations for words or phrases.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li> +</ul> diff --git a/files/sv-se/mdn/contribute/localize/translating_pages/index.html b/files/sv-se/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..f542c51f9d --- /dev/null +++ b/files/sv-se/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,48 @@ +--- +title: Översätta MDN-sidor +slug: MDN/Contribute/Localize/Translating_pages +tags: + - Sidöversättning +translation_of: MDN/Contribute/Localize/Translating_pages +--- +<div>{{MDNSidebar}}</div><p>Denna artikel är en grundläggande guide för översättning av innehåll på MDN, som tar upp både tekniken kring översättningsarbetet och tips på det korrekta sättet att hantera olika typer av innehåll.</p> + +<h2 id="Påbörja_översättning_av_en_sida"><span class="short_text" id="result_box" lang="sv"><span class="alt-edited">Påbörja översättning av en sida</span></span></h2> + +<p>Följ de här stegen när du stöter på en sida som du skulle vilja översätta till ditt språk:</p> + +<ol> + <li>Klicka på Språk-ikonen ({{FontAwesomeIcon("icon-globe")}}) för att öppna menyn för <strong>Språk</strong> och klicka på <strong>Lägg till en översättning</strong>. Du hamnar då på sidan Välj Språk.</li> + <li>Klicka på det språk som du vill översätta sidan till. Vyn Översätter artikel öppnas med originalspråkets text på vänster sida av vyn.</li> + <li>Under <strong>Översätt beskrivning</strong> kan du översätta titeln och även sluggen (frivilligt), till målspråket. Sluggen är den sista delen av en sidas URL (till exempel "Translating_pages" för denna artikel.) Vissa språkgemenskaper översätter inte sluggen, utan låter den vara samma som på engelska. Jämför med andra artiklar på ditt språk för att avgöra vad som är praxis. Du kan klicka på minustecknet bredvid <strong>Översätt beskrivning</strong> för att dölja denna information när du är klar med den, för att göra mer plats för <strong>Översätt innehåll</strong>-sektionen.</li> + <li>Översätt sidans innehåll under <strong>Översätt innehåll</strong>.</li> + <li>Fyll i åtminstone en <strong>tagg</strong> för sidan.</li> + <li>Klicka på <strong>Spara ändringar</strong> när du är färdig.</li> +</ol> + +<div class="note"><strong>Note:</strong> The user interface elements of the Translating Article view are initially shown in English. On subsequent visits to translate a particular article, the UI is shown in the appropriate language if a localization of MDN is available for that language. The MDN user interface can be localized using <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Verbatim</a>. See <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Localizing with Verbatim</a> for details on how to use this tool.</div> + +<h2 id="Redigera_en_sida_som_är_översatt">Redigera en sida som är översatt</h2> + +<ul> + <li>Klicka på <strong>Redigera</strong>-knappen på en redan översatt sida (ibland märkt på mål-språket). Vyn för Översätter artikel öppnas.</li> +</ul> + +<p>Om den engelska versionen har ändrats sedan översättningen senast uppdaterades, kommer Översätter artikel-vyn att visa en källnivå-"diff" på ändringarna i den engelska versionen. Detta hjälper dig att se vad som behöver uppdateras i översättningen.</p> + +<h2 id="Översätta_taggar">Översätta taggar</h2> + +<p>Det är viktigt att varje sida är taggad med minst en tagg. Även om det är översättning. I regel är det en bra idé att använda samma taggar som originalartikeln.</p> + +<p>Vissa taggar används för sökfilter, eller som sedvänja mellan bidragare. Dessa bör inte översättas. För att veta vilka dessa är, läs <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">tagging standards</a>. Du kan också skapa översatta taggar för att gruppera innehåll, om detta inte täcks av någon av standardens taggar.</p> + +<h2 id="Tips_för_nya_lokaliserare">Tips för nya lokaliserare</h2> + +<p>Om du är nybörjare inom lokalisering på MDN kommer här några förslag:</p> + +<ul> + <li>Artiklar i <a href="https://developer.mozilla.org/sv-SE/docs/Glossary">Ordlista</a> är jättebra för nybörjare att översätta då de är korta och enkla.</li> + <li>Artiklar som är taggade med <a href="https://developer.mozilla.org/en-US/docs/tag/l10n%3Apriority">"l10n:priority"</a> anses vara högprioriterade vad gäller översättning. Dessutom har tutorials och konceptuella artiklar generellt sett högre prioritet än referenssidor, då läsare har störst behov av översättningar när de lär sig nya koncept.</li> + <li>Om du ser text mellan dubbla klammerparenteser, som t.ex. <code>\{{some-text("more text")}}</code>, lämna det oöversatt i artikeln, och ändra inte skiljetecknen. Detta är ett <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros">macro</a>, som antagligen skapar en struktur på sidan, eller gör något annat användbart. Du kan komma att se oöversatt text som genereras från ett macro; bry dig inte om det förrän du har mer erfarenhet av MDN. (Att ändra denna typ av text kräver <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/Template_editing">särskilda behörigheter</a> eftersom macros kan vara väldigt kraftfulla.) Om du är nyfiken, titta på <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">Commonly-used macros</a> för att se vilka typer av saker macros kan göra.</li> + <li>Titta på sidan <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Localize/Localization_projects">Localization projects</a> för att veta mer om lokalisering för din "locale".</li> +</ul> diff --git a/files/sv-se/mdn/index.html b/files/sv-se/mdn/index.html new file mode 100644 index 0000000000..a494520cf5 --- /dev/null +++ b/files/sv-se/mdn/index.html @@ -0,0 +1,32 @@ +--- +title: The MDN project +slug: MDN +tags: + - Landing + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN +--- +<div>{{MDNSidebar}}</div> + +<p><strong>Nätverket för Mozilla-utvecklare</strong> (MDN) är en wiki där vi dokumenterar det öppna nätet, Mozilla-teknologier, Firefox OS, och andra ämnen för utveckling. Alla är välkomna att lägga till och redigera innehåll. Du behöver inte vara en programmerare eller kunna mycket om teknik; det finns många olika uppgifter så behöver utföras, från det enkla (korrekturläsning och att rätta till stavfel) till det komplexa (att skriva API-dokumentation).</p> + +<div class="summary"> +<p>Målet för MDN-projektet är att dokumentera den öppna delen av internet, Mozilla-teknologier och Mozilla-projekten. Vi bjuder in dig att hjälpa till!</p> +</div> + +<p>Vi behöver din hjälp! Det är enkelt. Oroa dig inte om att fråga om tillåtelse eller för att göra misstag. Å andra sidan så får du gärna lära känna <a href="/sv-SE/docs/MDN/Community" title="/sv-SE/docs/MDN/Community">MDN-sällskapet</a>; vi finns här för att hjälpa dig! The documentation below should get you started, but don't hesitate to join the discussion in <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a>.</p> + +<ul class="card-grid"> + <li><span><a href="/sv-SE/docs/MDN/Getting_started">Newcomer quick start</a></span> + + <p>Är du ny med MDN och vill lära dig att hjälpa till att göra det bättre? Börja här!</p> + </li> + <li><span><a class="new" href="/sv-SE/docs/MDN/Bidra" rel="nofollow">Jag är en avancerad användare</a></span> + <p>Access our full, in-depth guide for MDN contributors to learn more once you've gotten comfortable.</p> + </li> + <li><span><a class="new" href="/sv-SE/docs/MDN/Marknadsför" rel="nofollow">Sprid ordet</a></span> + <p>Hjälp till med att sprida ut ordet om du älskar MDN! Find art, tools, and guides for promoting MDN.</p> + </li> +</ul> diff --git a/files/sv-se/tools/index.html b/files/sv-se/tools/index.html new file mode 100644 index 0000000000..be281da2bd --- /dev/null +++ b/files/sv-se/tools/index.html @@ -0,0 +1,216 @@ +--- +title: Firefox Developer Tools +slug: Tools +tags: + - Guide + - Utvecklar Mozilla + - Verktyg + - Webbutveckling + - 'Webbutveckling:Verktyg' + - 'l10n:prioritet' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.</p> + +<p>If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.</p> + +<p>Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the <a href="/en-US/docs/Tools#Join_the_Developer_tools_community">community links near the bottom of the page</a>). If you have any feedback or questions specifically about the documentation, the <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> is a good place to post.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are just getting started with web development and using developer tools, our <a href="/en-US/docs/Learn">learning web development</a> docs will help you — see <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> and <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a> for good starting points.</p> +</div> + +<h2 id="The_Core_Tools">The Core Tools</h2> + +<p>You can open the Firefox Developer Tools from the menu by selecting <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> or use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd> on Windows and Linux, or <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on macOS.</p> + +<p>The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>Click this button to take a screenshot of the current page. (<strong>Note:</strong> This feature is not turned on by default and must be enabled in settings before the icon will appear.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>Toggles Responsive Design Mode.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>Closes the Developer Tools</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Page_Inspector">Page Inspector</h3> + +<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.</p> +</div> + +<div class="column-half"> +<h3 id="Web_Console">Web Console</h3> + +<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See messages logged by a web page and interact with the page using JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Stop, step through, examine, and modify the JavaScript running in a page.</p> +</div> + +<div class="column-half"> +<h3 id="Network_Monitor">Network Monitor</h3> + +<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See the network requests made when a page is loaded.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Performance_Tools">Performance Tools</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Analyze your site's general responsiveness, JavaScript, and layout performance.</p> +</div> + +<div class="column-half"> +<h3 id="Responsive_Design_Mode">Responsive Design Mode</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>See how your website or app will look and behave on different devices and network types.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Accessibility_inspector">Accessibility inspector</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.</p> +</div> + +<div class="column-half"></div> +</div> + +<div class="note"> +<p><strong>Note</strong>: The collective term for the UI inside which the DevTools all live is the <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a>.</p> +</div> + +<h2 id="More_Tools">More Tools</h2> + +<p>These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt> + <dd>Figure out which objects are keeping memory in use.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Select a color from the page.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>A text editor built into Firefox that lets you write and execute JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd>View and edit CSS styles for the current page.</dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Taking screenshots</a></dt> + <dd>Take a screenshot of the entire page or of a single element.</dd> + <dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Measure a portion of the page</a></dt> + <dd>Measure a specific area of a web page.</dd> + <dt><a href="/en-US/docs/Tools/Rulers">Rulers</a></dt> + <dd>Overlay horizontal and vertical rulers on a web page</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">For the latest developer tools and features, try Firefox Developer Edition.</p> + +<p><a href="https://www.mozilla.org/en-US/firefox/developer/" style="width: 300px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Download Firefox Developer Edition</a></p> +</div> + +<div class="column-third"></div> +</div> + +<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2> + +<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd>Debug add-ons, content tabs, and workers running in the browser.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Connecting to Firefox for Android</a></dt> + <dd>Connect the developer tools to an instance of Firefox running on an Android device.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Connecting to iframes</a></dt> + <dd>Connect the developer tools to a specific iframe in the current page.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Connecting to other browsers</a></dt> + <dd>Connect the developer tools to Chrome on Android and Safari on iOS.</dd> +</dl> +</div> + +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<h2 id="Extending_the_devtools">Extending the devtools</h2> + +<p>For information on extending the Firefox DevTools, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> over in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> section of MDN.</p> + +<h2 id="Migrating_from_Firebug">Migrating from Firebug</h2> + +<p>Firebug has come to the end of its lifespan (see <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug lives on in Firefox DevTools</a> for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Migrating from Firebug</a>.</p> + +<h2 id="Contribute">Contribute</h2> + +<p>If you want to help improve the developer tools, these resources will get you started.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://docs.firefox-dev.tools/">Get Involved</a></dt> + <dd>Our developer documentation explains how to get involved.</dd> + <dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt> + <dd>A tool helping to find bugs to work on.</dd> +</dl> +</div> diff --git a/files/sv-se/tools/prestanda/index.html b/files/sv-se/tools/prestanda/index.html new file mode 100644 index 0000000000..bf668f8bb1 --- /dev/null +++ b/files/sv-se/tools/prestanda/index.html @@ -0,0 +1,91 @@ +--- +title: Prestanda +slug: Tools/Prestanda +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><p>Prestandaverktyget ger dig insikt i din sidas allmäna tillgänglighet, JavaScript- och layoutprestanda. Med Prestandaverktyget kan du skapa en inspelning, eller profil, av din sida över en tidsperiod. Verktyget visar dig en <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">översikt</a> av de saker webbläsare gjorde för att rendera din sida över profilen, och en graf av <a href="/en-US/docs/Tools/Performance/Frame_rate">bildhastighet</a> över profilen.</p> + +<p>Du får tre sidoverktyg för att undersöka olika lägen av profilen i mer detalj:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Vattenfall</a> visar de olika operationer webbläsaren utförde, som att köra layout, JavaScript, ommåla, och skräp insamling</li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Anropsträd</a> visar JavaScriptets funktion där webbläsaren tillbringar mest tid</li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Eldtabellen</a> visar JavaScript <span class="gt-text"><font><font>anropsstacken</font></font></span> under tiden av inspelningen.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Komma_igång">Komma igång</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">Användargränsnittsguide</a></dt> + <dd> + <p>En snabbguide av användargränsnittet för att hitta runt i Prestandaverktyget.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/How_to">Hur man</a></dt> + <dd>Standarduppgifter: öppna verktyget, skapa, spara, ladda, och konfigurera inspelningar.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Prestandaverktygets_komponenter">Prestandaverktygets komponenter</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Bildhastighet</a></dt> + <dd>Förstå din sidas generella tillgänglighet.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Anropsträd</a></dt> + <dd>Hitta flaskhalsar i din sidas JavaScript.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Vattenfall</a></dt> + <dd>Förstå vad webbläsaren gör medan användaren interagerar med din sida.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Eldtabellen</a></dt> + <dd>Se vilken JavaScripts-funktion som utförs, och när, under tiden för inspelningen.</dd> + <dd> </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Scenarier">Scenarier</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animera CSS-egenskaper</a></dt> + <dd>Använder Vattenfall för att förstå hur webbläsaren uppdaterar en sida, och hur animeringen av olika CSS-egenskaper kan påverka prestandan.</dd> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensiv JavaScript</a></dt> + <dd>Använder bildhastighet och Vattenfallsvertygen för att framhäva prestanda problem orsakade av långvarig JavaScript, och hur användning av arbetare kan hjälpa i denna situation.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div class="column-half"> +<dl> + <dd> </dd> +</dl> +</div> + +<p> </p> diff --git a/files/sv-se/web/api/filereader/index.html b/files/sv-se/web/api/filereader/index.html new file mode 100644 index 0000000000..89ebf980cd --- /dev/null +++ b/files/sv-se/web/api/filereader/index.html @@ -0,0 +1,127 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File API + - Files + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/FileReader +--- +<div>{{APIRef("File API")}}</div> + +<p>Objektet <code>FileReader</code> låter webbapplikationer asynkroniserat läsa innehåll i filer sparade på användarens dator. Man använder objekten {{domxref("File")}} eller {{domxref("Blob")}} för att specificera filerna eller datan som ska läsas.</p> + +<p>Objekt av typen File kan man få av från ett FileList-objekt till följd av att användaren har valt en fil med {{HTMLElement("input")}}, en <em>drag-och-släpp-operations</em> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">DataTransfer</a>-objekt</code>, eller från API:et <code>mozGetAsFile()</code> på ett {{domxref("HTMLCanvasElement")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Konstruktor">Konstruktor</h2> + +<dl> + <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt> + <dd>Returnerar en nykonstruerad <code>FileReader</code>.</dd> +</dl> + +<p>Se <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> för detaljer och exempel (på engelska).</p> + +<h2 id="Egenskaper">Egenskaper</h2> + +<dl> + <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> + <dd>Ett {{domxref("DOMException")}} som representerar ett fel som uppstod vid inläsning av filen.</dd> + <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> + <dd>Ett nummer som indikerar vilket stadie FileReader-objektet är i. Följande värden finns: + <table class="standard-table"> + <tbody> + <tr> + <td><code>EMPTY</code></td> + <td><code>0</code></td> + <td>Ingen data har laddats ännu.</td> + </tr> + <tr> + <td><code>LOADING</code></td> + <td><code>1</code></td> + <td>Datan laddas just nu.</td> + </tr> + <tr> + <td><code>DONE</code></td> + <td><code>2</code></td> + <td>Hela läsförfrågningen är klar.</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> + <dd>Filens innehåll. Denna egenskap är endast giltlig när operationen är färdig. Formatet på datan beror på vilken metod som användes för att initiera läsoperationen.</dd> +</dl> + +<h3 id="Händelsehanterare">Händelsehanterare</h3> + +<dl> + <dt>{{domxref("FileReader.onabort")}}</dt> + <dd>Hanterar händelsen {{event("abort")}}. Denna händelse aktiveras varje gång läsoperationen avbryts.</dd> + <dt>{{domxref("FileReader.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd> + <dt>{{domxref("FileReader.onload")}}</dt> + <dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd> + <dt>{{domxref("FileReader.onloadstart")}}</dt> + <dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd> + <dt>{{domxref("FileReader.onloadend")}}</dt> + <dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd> + <dt>{{domxref("FileReader.onprogress")}}</dt> + <dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd> +</dl> + +<div class="note"> +<p>As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p> +</div> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("FileReader.abort()")}}</dt> + <dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd> + <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd> + <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsText()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.FileReader")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("File")}}</li> + <li>{{domxref("Blob")}}</li> +</ul> diff --git a/files/sv-se/web/api/filereader/readasdataurl/index.html b/files/sv-se/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..b7e4849bb5 --- /dev/null +++ b/files/sv-se/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,124 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +translation_of: Web/API/FileReader/readAsDataURL +--- +<p>Metoden <code>readAsDataURL</code> används för att läsa innehållet i en specificerad {{domxref("Blob")}} eller {{domxref("File")}}. När läsningen har slutförts, så blir {{domxref("FileReader.readyState","readyState")}} <code>DONE</code>, och {{event("loadend")}} utlöses. Vid den tidpunkten så innehåller attributet {{domxref("FileReader.result","result")}} datan som en <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data: URL</a> som representerar filens data som en base64-kodad textsträng.</p> + +<div class="note"> +<p><strong>Märk:</strong> filens {{domxref("FileReader.result","result")}} resulterar i en textsträng som ej direkt kan avkodas som Base64. För att få ut bara en Base64-kodad textsträng, måste du ta bort <code>data:*/*;base64,</code> från textsträngen.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre> + +<h3 id="Parametrar">Parametrar</h3> + +<dl> + <dt><code>blob</code></dt> + <dd>Den {{domxref("Blob")}} eller {{domxref("File")}} som ska läsas från.</dd> +</dl> + +<h2 id="Exempel">Exempel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="file" onchange="previewFile()"><br> +<img src="" height="200" alt="Image preview..."></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function previewFile() { + var preview = document.querySelector('img'); + var file = document.querySelector('input[type=file]').files[0]; + var reader = new FileReader(); + + reader.addEventListener("load", function () { + preview.src = reader.result; + }, false); + + if (file) { + reader.readAsDataURL(file); + } +}</pre> + +<h3 id="Live_Result">Live Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 240)}}</p> + +<h2 id="Exempel_-_läsa_flera_filer">Exempel - läsa flera filer</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><input id="browse" type="file" onchange="previewFiles()" multiple> +<div id="preview"></div></pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js">function previewFiles() { + + var preview = document.querySelector('#preview'); + var files = document.querySelector('input[type=file]').files; + + function readAndPreview(file) { + + // Se till att `file.name` matchar våra fil-extensions kriteria + if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { + var reader = new FileReader(); + + reader.addEventListener("load", function () { + var image = new Image(); + image.height = 100; + image.title = file.name; + image.src = this.result; + preview.appendChild( image ); + }, false); + + reader.readAsDataURL(file); + } + + } + + if (files) { + [].forEach.call(files, readAndPreview); + } + +} +</pre> + +<div class="note"><strong>Märk:</strong> Konstruktorn för <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> stöddes inte av Internet Explorer i versionerna innan 10. För en full kompatibilitetskod kan du gärna gå till <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser möjlig lösning för bild förhandsvisning</a>. Se också <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">detta kraftfullare exempel</a>.</div> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Första definitionen</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsar_kompatibilitet">Webbläsar kompatibilitet</h2> + +<div class="hidden">Tabellen med kompatibilitet på denna sida är genererad från strukturerad data. Om du skulle vilja bidra till denna data, vänligen gå till <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> och skicka en pull-request till oss.</div> + +<p>{{Compat("api.FileReader.readAsDataURL")}}</p> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("FileReader")}}</li> + <li>{{domxref("URL.createObjectURL()")}}</li> +</ul> + +<div>{{APIRef("File API")}}</div> diff --git a/files/sv-se/web/api/index.html b/files/sv-se/web/api/index.html new file mode 100644 index 0000000000..33af530f64 --- /dev/null +++ b/files/sv-se/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: 'Web API:er' +slug: Web/API +tags: + - API + - DOM + - JavaScript + - Referens + - Web + - Översikt +translation_of: Web/API +--- +<p><span class="seoSummary">När du skriver kod för webben med javascript, finns det en mängd olika API:er tillgänliga. Nedan är en lista övar alla gränssnitt (det vill säga, typer av objekt) som du kan använda i samband med utvecklingen av din Web app eller webbplats.</span></p> + +<div>{{APIListAlpha}}</div> diff --git a/files/sv-se/web/api/kryptonyckel/index.html b/files/sv-se/web/api/kryptonyckel/index.html new file mode 100644 index 0000000000..98e7039877 --- /dev/null +++ b/files/sv-se/web/api/kryptonyckel/index.html @@ -0,0 +1,114 @@ +--- +title: KryptoNyckel +slug: Web/API/KryptoNyckel +tags: + - API + - Gränssnitt + - Kryptering + - Referenser + - Webb Krypto API +translation_of: Web/API/CryptoKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>KryptoNyckelns</strong> gränssnitt representerar en kryptografisk {{glossary("key")}} deriverad från en specifik nyckelalgoritm.</p> + +<p>Ett <em>KryptoNyckel</em> objekt kan erhållas med användning av {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} eller{{domxref("SubtleCrypto.importKey()")}}</p> + +<h2 id="Egenskaper">Egenskaper</h2> + +<p><em>Detta gränssnitt ärar inte någon egendom.</em></p> + +<dl> + <dt>{{domxref("CryptoKey.type")}}</dt> + <dd>Returnerar ett uppräknat värde som representerar typ av nyckel, en hemlig nyckel (för symmetrisk algoritm), en offentlig eller en privat nyckel (för en asymmetrisk algoritm)</dd> + <dt>{{domxref("CryptoKey.extractable")}}</dt> + <dd>Returnerar en {{jsxref("Boolean")}} Indikerar om den råa informationen kan exporteras till ansökan eller inte.</dd> + <dt>{{domxref("CryptoKey.algorithm")}}</dt> + <dd>Returnerar ett ogenomskinligt objekt som representerar en viss chiffer som nyckeln ska användas med.</dd> + <dt>{{domxref("CryptoKey.usages")}}</dt> + <dd>Returnerar en uppsättning uppräknade värden som anger vilken nyckel som kan användas för.</dd> +</dl> + +<h2 id="Metoder">Metoder</h2> + +<p><em>Detta gränssnitt arvs inte eller implementerar någon metod.</em></p> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>37</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> +</ul> diff --git a/files/sv-se/web/api/kryptonyckel/typ/index.html b/files/sv-se/web/api/kryptonyckel/typ/index.html new file mode 100644 index 0000000000..bf41113bc2 --- /dev/null +++ b/files/sv-se/web/api/kryptonyckel/typ/index.html @@ -0,0 +1,115 @@ +--- +title: KryptoNyckel.typ +slug: Web/API/KryptoNyckel/typ +tags: + - API + - Egenskaper + - Gränssnitt + - Krypteringar + - KryptoNyckel + - Läs-endast + - Referenser + - Webb Krypto API +translation_of: Web/API/CryptoKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>KryptoNyckel.typ</strong> har en skrivskyddad egenskap som anger typ av nyckel: om det är nyckeln för en symmetrisk algoritm(<code>"hemligt"</code>) eller för en asymmetrisk algoritm(<code>"publik"</code> eller <code>"privat"</code>, är beroende på dess syfte).</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>resultat</em> = nyckel<code>.typ</code> +</pre> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>resultat</em></code> är ett uppräknat värde som kan vara: + + <ul> + <li><code>"hemligt"</code> representerar den unika nyckeln som används för kryptering eller dekryptering av ett meddelande med en symmetrisk algoritm.</li> + <li><code>"publik"</code> representerar en offentligt delbar nyckel som används i en asymmetrisk algoritm.</li> + <li><code>"privat"</code> representerar en nyckel som används i en asymmetrisk algoritm som måste hållas privat.</li> + </ul> + </li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("CryptoKey")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html b/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html new file mode 100644 index 0000000000..b25a00bf7f --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/genereranyckel/index.html @@ -0,0 +1,197 @@ +--- +title: SubtilKrypto.GenereraNyckel() +slug: Web/API/SubtleCrypto/genereraNyckel +tags: + - API + - Metoder + - Referenser + - SubtilKrypto + - Webb Krypto API +translation_of: Web/API/SubtleCrypto/generateKey +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong>SubtilKrypto.genereraNyckel() </strong> metoden returnerar en {{jsxref("Promise")}} av en nybildad {{domxref("CryptoKey")}}, för symmetriska algoritmer, eller en {{domxref("CryptoKeyPair")}}, innehållande två nyutvecklade nycklar, för asymmetrisk algoritm, som matchar algoritmen, användningarna och extraherbarheten ges som parametrar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>resultat</em> = <em>crypto.subtle</em><code>.genereraNyckel(<em>algo</em>, <em>extraherbart</em>,<em>nyckelBruk</em>)</code>; +</pre> + +<h3 id="Parametrar">Parametrar</h3> + +<ul> + <li><em><code>algo</code></em> är ett ordboksobjekt som definierar nyckelgenereringsfunktionen som ska användas. Stödjande algoer är: <a href="/en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms#AES-CBC">AES-CBC</a>, <code>AES-CTR</code>, <code>AES-GCM</code>, <code>RSA-OAEP</code>, <code>AES-KW</code>, <code>HMAC</code>, <code>RSASSA-PKCS1-v1_5</code>, <code>ECDSA</code>, <code>ECDH</code>, och <code>DH</code>. Formatet av ordboksobjekt är: + + <ul> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"namn"</code>, </span></font>vilket motsvarar ett av de stödda algoerna som anges ovan,</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"modulDimension"<code>, </code></span></font>vilket motsvarar antalet siffror som används i modulen</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"publikExponent</code>",</span></font> a {{jsxref("Uint8Array")}} representerar den offentliga exponenten</p> + </li> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"hashFunktion</span></font><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">", </span></font>ett ordbordsobjekt som refererar till hashalgoritmen att använda. Till exempel:</p> + + <ul> + <li> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>{namn: "SHA-512"}</code></span></font></p> + </li> + </ul> + </li> + </ul> + </li> + <li><code><em>extraherbart</em></code> är en {{jsxref("Boolean")}} Indikerar om nyckeln kan extraheras från {{domxref("CryptoKey")}} objekt på ett senare stadium.</li> + <li><code><em>nyckelBruk</em></code> är en {{jsxref("Array")}} vilket indikerar vad som kan göras med den nybildade nyckeln. Möjliga värden för fälten är: + <ul> + <li><code>"enkrypt"</code>, låter nyckeln användas för{{glossary("encryption", "encrypting")}} meddelanden.</li> + <li><code>"dekrypt"</code>, låter nyckeln användas för {{glossary("decryption", "decrypting")}} meddelanden.</li> + <li><code>"signum"</code>, låter nyckeln användas för {{glossary("signature", "signing")}} meddelanden.</li> + <li><code>"verifik"</code>, låter nyckeln användas för {{glossary("verification", "verifying the signature")}} av meddelanden.</li> + <li><code>"deriveKey"</code>, låter nyckeln användas som en basnyckel när en ny nyckel hämtas.</li> + <li><code>"derivBitar"</code>, låter nyckeln användas som en basnyckel när man tar bort bitar av data för användning i kryptografiska primitiver.</li> + <li><code>"vikNyckel"</code>, låter nyckeln slå in en symmetrisk nyckel för användning (överföring, lagring) i osäkra miljöer.</li> + <li><code>"osvepKey"</code>, tillåter nyckeln att packa upp en symmetrisk nyckel för användning (överföring, lagring) i osäkra miljöer.</li> + </ul> + </li> +</ul> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>resultat</em></code> är en{{jsxref("Promise")}} som returnerar den genererade nyckeln som en{{domxref("CryptoKey")}} eller en {{domxref("CryptoKeyPair")}}.</li> +</ul> + +<h3 id="Undantag">Undantag</h3> + +<p>Löftet avvisas när följande undantag uppstår:</p> + +<ul> + <li>{{exception("SyntaxError")}} när <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>nyckelBruk</em></span></font> är tom men den genererade symmetriska nyckeln är av typen <code>"hemlig"</code> eller <code>"privat"</code> eller den genererade privata komponenten av det genererade asymmetriska tangentparet är tomt.</li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-generateKey', 'SubtleCrypto.generateKey()') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Function</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>13</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>ECDSA</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(36) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>DH</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(35) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>ECDSA</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(36) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td><code>DH</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(35) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p> </p> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} och {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("SubtleCrypto")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/index.html b/files/sv-se/web/api/subtlecrypto/index.html new file mode 100644 index 0000000000..881c36812c --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/index.html @@ -0,0 +1,83 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/SubtleCrypto +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p>The <code><strong>SubtleCrypto</strong></code> interface represents a set of cryptographic primitives. It is available via the {{domxref("Crypto.subtle")}} properties available in a window context (via {{domxref("Window.crypto")}}).</p> + +<div class="warning"> +<p>Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."</p> +</div> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface neither inherits, nor implements, any property.</em></p> + +<h2 id="Methods">Methods</h2> + +<p>This interface doesn't inherit any method.</p> + +<dl> + <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the encrypted data corresponding to the clear text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the clear data corresponding to the encrypted text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.sign()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of the signature corresponding to the text, algorithm and key given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.verify()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{jsxref("Boolean")}} value indicating if the signature given as parameter matches the text, algorithm and key also given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.digest()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a digest generated from the algorithm and text given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithm, that matches the algorithm, the usages and the extractability given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated {{domxref("CryptoKey")}} derived from a master key and a specific algorithm given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a newly generated buffer of pseudo-random bits derived from a master key and a specific algorithm given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.importKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.</dd> + <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a buffer containing the key in the format requested.</dd> + <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.</dd> + <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the wrapped key given in parameter.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.SubtleCrypto")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li> +</ul> diff --git a/files/sv-se/web/api/subtlecrypto/signum/index.html b/files/sv-se/web/api/subtlecrypto/signum/index.html new file mode 100644 index 0000000000..f3f07acac8 --- /dev/null +++ b/files/sv-se/web/api/subtlecrypto/signum/index.html @@ -0,0 +1,122 @@ +--- +title: SubtilKrypto.signum() +slug: Web/API/SubtleCrypto/signum +tags: + - API + - Metoder + - Referenser + - Signum + - SubtilKrypto + - Webb Krypto API +translation_of: Web/API/SubtleCrypto/sign +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><code><strong>SubtilKrypto.signum() </strong></code>metoden returnerar en {{jsxref("Promise")}} innehållande {{glossary("signature")}} motsvarar texten, algoritmen och {{glossary("key")}} avkastas som parametrar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>alias</em> = k<em>rypto</em><code>.subtil.signum(<em>algo</em>, <em>nyckel</em>, <em>text2signum</em>)</code>; +</pre> + +<h3 id="Parameterar">Parameterar</h3> + +<ul> + <li><em><code>algo</code></em> är en {{domxref("DOMString")}} definierar signaturfunktionen att använda. Befrämjande värden är: <code>HMAC</code>, <code>RSASSA-PKCS1-v1_5</code>, and <code>ECDSA</code>.</li> + <li><em>nyckel </em> är en {{domxref("CryptoKey")}} innehåller den privata nyckeln som ska användas för signering.</li> + <li><em><code>text2signum</code></em> är en {{jsxref("ArrayBuffer")}} eller en {{jsxref("ArrayBufferView")}} innehållande data som ska signeras.</li> +</ul> + +<h3 id="Returvärde">Returvärde</h3> + +<ul> + <li><code><em>alias</em></code> är en {{jsxref("Promise")}} som returnerar signaturen till succé.</li> +</ul> + +<h3 id="Undantag">Undantag</h3> + +<p>Tillståndet nekas när följande anomali uppstår:</p> + +<ul> + <li>{{exception("InvalidAccessError")}} när signeringsnyckeln inte är en nyckel för begäran signeringsalgoritmen eller när man försöker använda en algoritm som är antingen okänd eller inte lämplig för signering.</li> +</ul> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikationer</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-sign', 'SubtleCrypto.sign()') }}</td> + <td>{{ Spec2('Web Crypto API') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundläggande stöd</td> + <td>{{ CompatChrome(37) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile">Funktion +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundläggande stöd</td> + <td>{{CompatVersionUnknown}}</td> + <td>37</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li> + <li>{{domxref("SubtleCrypto")}}, gränssnittet tillhör det.</li> +</ul> diff --git a/files/sv-se/web/api/window/getcomputedstyle/index.html b/files/sv-se/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..192d16bb23 --- /dev/null +++ b/files/sv-se/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,131 @@ +--- +title: window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +<p class="summary"><span class="seoSummary"><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Metoden </span></font>window.getComputedStyle()</code> returerar ett objekt som rapporterar värdena hos alla CSS-egenskaper hos ett element efter att ha tillämpat aktiva stilmallar och löst ut godtycklig beräkning som dessa värden må innehålla.</span> Individuella CSS-egenskapers värden nås genom API:er som tillhandahålls av objektet eller genom att helt enkelt indexera via namnen på CSS-egenskaper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]); +</pre> + +<dl> + <dt>element</dt> + <dd>Elementet {{domxref("Element")}} för vilket den beräknade css-stilen önskas.</dd> + <dt>pseudoElt{{optional_inline}}</dt> + <dd>En textsträng som specificerar pseudo-elementet att matcha. Måste utelämnas (eller null) för vanliga element.</dd> +</dl> + +<div class="note"><strong>Märk:</strong> Innan Gecko 2.0 {{geckoRelease("2.0")}}, så krävdes <code>pseudoElt</code> parametern. Ingen annan av de stora webbläsarna medförde krav på att denna parameter var specificerad om null. Gecko har gjorts om till att matcha beteendet hos andra webbläsare.</div> + +<p>Den returnerade <code>stilen</code> är ett <em>realtids-</em> {{domxref("CSSStyleDeclaration")}} objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.</p> + +<h2 id="Exempel">Exempel</h2> + +<p>I detta exempel stilger vi ett simpelt {{htmlelement("div")}} element, sen hämtar vi css-stilar med hjälp av <code>getComputedStyle()</code>, skriver ut dem in i text-innehåll hos ett <code><div></code>-element.</p> + +<pre class="brush: html"><p>Hello</p></pre> + +<pre class="brush: css">p { + width: 400px; + margin: 0 auto; + padding: 20px; + line-height: 2; + font-size: 2rem; + font-family: sans-serif; + background: purple; + color: white; + text-align: center; +}</pre> + +<pre class="brush: js">let para = document.querySelector('p'); +let compStyles = window.getComputedStyle(para); +para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Examples', '100%', '240px')}}</p> + +<h2 id="Beskrivning">Beskrivning</h2> + +<p>Det returnerade objektet är av samma {{domxref("CSSStyleDeclaration")}} typ som det objekt som returnerats från elementets {{domxref("HTMLElement.style", "style")}} egenskap; hur som helst, de två objekten har skilda syften. Objektet som returnerats från <code>getComputedStyle</code> är read-only (läs enkom) och kan användas för att inspektera elementets css-stil (inklusive de satta av ett <code><style></code>-element eller en extern stilmall). Objektet <code>elt.style</code> bör användas för att sätta stil på ett specifikt element.</p> + +<p>Det första argumentet måste vara ett Element (att skicka en icke-Element-nod, såsom en #text-nod, kommer orsaka kast av error). Från Gecko 1.9.2 {{geckoRelease("1.9.2")}} och framåt, har returnerade URL-värden nu citattecken runt URL:en, som det här: <code>url("http://foo.com/bar.jpg")</code>.</p> + +<h2 id="defaultView"><code>defaultView</code></h2> + +<p>I många kodexempel online, används <code>getComputedStyle</code> från objektet <code>document.defaultView</code>. I nästan alla förekomster, är detta onödigt, då <code>getComputedStyle</code> existerar i objektet <code>window</code> också. Trolightvis så var "defaultView-möstret" en kombination av (1) folk som inte vill skriva en spec för window och (2) göra ett API som också kunde användas med Java. I vilket fall, det finns <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">ett enda fall</a> då <code>defaultView</code> metoden måste användas: när man använder Firefox 3.6 för att nå stilar i frames.</p> + +<h2 id="Användning_med_pseudo-element">Användning med pseudo-element</h2> + +<p>getComputedStyle kan dra ut stilinfo från pseudo-element (till exempel, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—se <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">spec</a> här).</p> + +<pre class="brush: html"><style> + h3::after { + content: ' rocks!'; + } +</style> + +<h3>generated content</h3> + +<script> + var h3 = document.querySelector('h3'); + var result = getComputedStyle(h3, ':after').content; + + console.log('the generated content is: ', result); // returns ' rocks!' +</script> +</pre> + +<h2 id="Märk">Märk</h2> + +<p>Det returnerade {{domxref("CSSStyleDeclaration")}} objektet kommer att innehålla aktiva värden för alla stödda CSS-egenskapers <u>långhanda</u> namn. Ett exempel på långhanda namn är <code>border-bottom-width</code> där <code>border-width</code> och <code>border</code> är exempel på <a href="/en-US/docs/Web/CSS/Shorthand_properties">korthanda egenskapsnamn</a>. Det är säkrast att söka på värden bara genom långhanda namn liksom <code>font-size</code>. Att söka css med korthanda namn såsom <code>font</code> kommer inte fungera med majoriteten av webbläsare.</p> + +<p>CSS-egenskapens värden kan nås med hjälp av <code>getPropertyValue(propName)</code> API:et eller genom att indexera direkt in i objektet så som <code>cs[' z-index']</code> eller <code>cs.zIndex</code>.</p> + +<p>Värdena som returneras av <code>getComputedStyle</code> är kända som {{cssxref("resolved_value", "resolved values")}}. Dessa är oftast samma som med CSS 2.1 {{cssxref("computed_value","computed values")}}, men för vissa äldre egenskaper som <code>width</code>, <code>height</code> eller <code>padding</code>, är de istället {{cssxref("used_value","used values")}}. Ursprungligen definierade CSS 2.0 de beräknade värdena att vara de "redo att användas" slutliga värdena hos egenskaper efter genomflöde och arv, men CSS 2.1 omdefinierade beräknade värden som för-layout, och använda vädet som efter-layout. För CSS 2.0 egenskaper, så returnerar funktionen <code>getComputedStyle</code> vad som beräknade värden förr innebar, det som nu kallas <strong>begagnade värden</strong>. Ett exempel på skillnad mellan för- och efter-layout-värden innefattar lösning av procentvärden som representerar bredd eller höjd hos ett element (dess s.k. layout), då dessa kommer ersättas av deras pixel-motsvarigheter bara i fallet av begagnade värden.</p> + +<p>Det returnerade värdet är i vissa kända fall ej exakt satta med flit. Närmare bestämt, för att undvika den så kallade CSS History Läckage säkerhets-frågan, så kan webbläsare faktiskt "ljuga" om det begagnade värdet för en länk och alltid returnera värden som om en användare aldrig har besökt webbsidan. Se <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> och <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> för detaljer för examplena på hur detta är implementerat. De flesta andra moderna webbläsare har tillämpat liknande ändringar på användandet av pseudo-selector-stilar och värdena som returneras av <code>getComputedStyle</code>.</p> + +<p>Under en CSS-övergång, så returnerar <code>getComputedStyle</code> original-egenskaps värde i Firefox, men slutlig-egenskaps värde i WebKit.</p> + +<p>I Firefox, så returnerar egenskaper med värdet <code>auto</code> det begangnade värdet, inte värdet <code>auto</code>. Så om du tillämpar <code>top:auto;</code> och <code>bottom:0</code>; på ett element som har <code>height:30px</code> och dess innehållande block har <code>height:100px;</code>, efter att ha begärt den beräknade stilen för <code>top</code>, så kommer Firefox returnera <code>top:70px</code>, som <code>100px-30px=70px</code>.</p> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Kompatibilitet_i_webbläsare">Kompatibilitet i webbläsare</h2> + +<div class="hidden">Tabellen med kompatibilitet på denna sida är genererad från strukturerad data. Om du vill bidra till datat, vänligen besök adressen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> och skicka oss ett pull request.</div> + +<p>{{Compat("api.Window.getComputedStyle")}}</p> + +<h2 id="See_also" name="See_also">Se även</h2> + +<ul> + <li>{{domxref("window.getDefaultComputedStyle")}}</li> + <li>{{cssxref("resolved_value", "Resolved Value")}}</li> +</ul> + +<div>{{APIRef}}</div> diff --git a/files/sv-se/web/api/window/index.html b/files/sv-se/web/api/window/index.html new file mode 100644 index 0000000000..70b807464b --- /dev/null +++ b/files/sv-se/web/api/window/index.html @@ -0,0 +1,509 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - Tab + - TopicStub + - Window +translation_of: Web/API/Window +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p> + +<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p> + +<p>The <code>Window</code> interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> + +<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/sv-se/web/html/global_attributes/index.html b/files/sv-se/web/html/global_attributes/index.html new file mode 100644 index 0000000000..d9b05460d1 --- /dev/null +++ b/files/sv-se/web/html/global_attributes/index.html @@ -0,0 +1,482 @@ +--- +title: Global attributes +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="summary"> +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though the attributes may have no effect on some elements.</p> +</div> + +<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>...<foo></code><code>, </code>even though <code><foo></code> is not a valid HTML element.</p> + +<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> + +<ul> + <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> + <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li> + <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Description">Description</h2> + +<dl> + <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt> + <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd> + <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt> + <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd> + <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt> + <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values: + <ul> + <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> + <li><code>false</code>, which indicates that the element must not be editable.</li> + </ul> + </dd> + <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt> + <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd> + <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt> + <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd> + <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt> + <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values: + <ul> + <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li> + <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> + <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li> + </ul> + </dd> + <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code></dt> + <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>true</code>, which indicates that the element may be dragged</li> + <li><code>false</code>, which indicates that the element may not be dragged.</li> + </ul> + </dd> + <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values: + <ul> + <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li> + <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li> + <li><code>link</code>, will create a link to the dragged data.</li> + </ul> + </dd> + <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt> + <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The following 5 attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt> + <dd>The unique, global identifier of an item.</dd> + <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt> + <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd> + <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt> + <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt> + <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.</dd> + <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt> + <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defined in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> +</dl> + +<dl> + <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt> + <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> +</dl> + +<dl> + <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt> + <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt> + <dd>Is an integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li> + </ul> + </dd> + <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code> {{experimental_inline}}</dt> + <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of its {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no"</code>, which indicates that the element will not be translated.</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>accesskey</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>class</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dir</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>id</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>lang</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>style</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>title</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li> +</ul> diff --git a/files/sv-se/web/html/global_attributes/kortplats/index.html b/files/sv-se/web/html/global_attributes/kortplats/index.html new file mode 100644 index 0000000000..d86b4f0968 --- /dev/null +++ b/files/sv-se/web/html/global_attributes/kortplats/index.html @@ -0,0 +1,95 @@ +--- +title: Kortplats +slug: Web/HTML/Global_attributes/Kortplats +tags: + - DOM + - Global attribut + - HTML + - Referenser +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div> + +<p><strong>Kortplatsens</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> tilldelar en <em>kortpalts</em> i en <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> skuggträdet till ett element: Ett element med ett <em>kortplats</em>attribut tilldelas till kortplatsen skapat av{{HTMLElement("slot")}} vars element{{htmlattrxref("name", "slot")}} attributets värde matchar det här <em>kortplatsens </em>attributets värde.</p> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>53</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>40</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>53</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>40</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li>Alla <a href="/en-US/docs/Web/HTML/Global_attributes">globala attribute</a>r.</li> +</ul> diff --git a/files/sv-se/web/html/index.html b/files/sv-se/web/html/index.html new file mode 100644 index 0000000000..2b16e39a60 --- /dev/null +++ b/files/sv-se/web/html/index.html @@ -0,0 +1,110 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML-handledning + - HTML-lektion + - HTML-programmering + - HTML5 + - Hyper text + - Hypertext + - Lär dig + - Referens + - Referenser + - Vad är HTML + - Webb + - 'i10n:prioritet' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) är webbens mest grundläggande byggsten. <strong>HTML</strong> beskriver och definierar <em>strukturen</em> på en webbsida. Andra tekniker utöver HTML används vanligen för att beskriva en webbsidas utseende (<a href="/en-US/docs/Web/CSS">CSS</a>) eller funktionalitet/beteende (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</span></p> + +<p>"HyperText" refererar till länkar som binder samman webbsidor med varandra, antingen inom en enskild webbsajt eller mellan olika webbsajter. Länkar är en grundläggande aspekt av webben. Genom att ladda upp innehåll på internet och länka det till sidor som skapats av andra människor blir du en aktiv deltagare i World Wide Web.</p> + +<p>HTML använder sig av "uppmärkning" vid annotering av text, bilder och annat innehåll för visning i en webbläsare. HTML märkspråk inkluderar speciella "element" såsom {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, och många andra.</p> + +<p>Taggar i HTML är inte skiftlägeskänsliga. De kan alltså skrivas med stora bokstäver, små bokstäver eller blandat. Exempelvis kan taggen <strong><title> </strong>skrivas som <Title>,<TiTlE>eller på vilket annat sätt som helst.</p> + +<p>Artiklarna nedan hjälper dig att lära dig mer om HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML-introduktion</span> + + <p>Om du är ny inom webbutveckling, se till att läsa vår artikel <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Grunderna i HTML</a> för att lära dig vad HTML är och hur du använder det.</p> + </li> + <li><span>HTML-handledning</span> + <p>För artiklar om hur du använder HTML, handledning/tutorials och fullständiga exempel, kolla in vår <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a>.</p> + </li> + <li><span>HTML-referenser</span> + <p>I vår omfattande <a href="/en-US/docs/Web/HTML/Reference">HTML-referenser</a>-sektion hittar du detaljerad information om alla element och attribut i HTML.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Nybörjarhandledning</h2> + +<p>Vår <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a> innehåller ett flertal moduler som lär ut HTML från grunden — inga förkunskaper krävs.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduktion till HTML</a></dt> + <dd>Denna modul lägger grunden, och introducerar viktiga koncept och syntax, såsom att applicera HTML till text, skapa hyperlänkar och att använda HTML för att strukturera en webbsida.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia och inbäddning</a></dt> + <dd>Denna modul utforskar hur du kan använda HTML för att inkludera multimedia i dina webbsidor, och även de olika sätt som bilder kan inkluderas, samt hur du bäddar in video, ljud, och även kompletta andra hemsidor.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML-tabeller</a></dt> + <dd>Att representera tabelldata på en webbsida på ett förståeligt och tillgängligt sätt kan vara en utmaning. Denna modul innefattar grundläggande tabell-uppmärkning, såväl som mer komplexa funktioner såsom tillämpning av tabellrubriker och sammanfattningar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML-formulär</a></dt> + <dd>Formulär är en väldigt viktig del av webben — de bidrar med mycket av den funktionaliteten som du behöver för att kunna interagera med webbsajter, t.ex. registrering och inloggning, skicka feedback, köpa produkter och mycket mer. Med denna modul kan du komma igång med att skapa de delar av formulär som hör till klient-sidan/front-end.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Använda HTML för att lösa vanliga problem</a></dt> + <dd>Erbjuder länkar till sektioner av innehåll som förklarar hur man använder HTML för att lösa mycket vanliga problem som uppstår när man skapar en webbsida: hantera titlar, lägga till bilder eller videos, betona innehåll, skapa ett enkelt formulär, etc.</dd> +</dl> + +<h2 id="Avancerade_ämnen">Avancerade ämnen</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> + <dd class="landingPageList"><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Attributet </span></font><a href="/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, kombinerat med en lämplig <a class="glossaryLink" href="/en-US/docs/Glossary/CORS">CORS</a> -rubrik tillåter bilder definierade av elementet {{HTMLElement("img")}} att laddas upp från främmande källor och användas i ett {{HTMLElement("canvas")}} element som att de vore hämtade från den egna källan.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS attributinställningar</a></dt> + <dd class="landingPageList">Visssa HTML-element som stödjer <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, såsom {{HTMLElement("img")}} eller {{HTMLElement("video")}}, har ett <code>crossorigin</code> attribut (<code>crossOrigin</code> egendom), som låter dig konfigurera CORS-begäran för elementets hämtade data.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">Fokushantering i HTML</a></dt> + <dd class="landingPageList"><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM-attributet och <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM-metoden hjälper dig att spåra och kontrollera en användares interagerande med element på en webbsida. </dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Using_the_application_cache">Använda application-cachen</a></dt> + <dd class="landingPageList">Applikations-caching låter webb-baserade applikationer köras offline. Du kan använda <strong>Application Cache</strong> (<em>AppCache</em>)-gränssnittet för att specificiera resurser som webbläsaren ska cachea och göras tillgängliga för offlineanvändare. Cacheade applikationer laddas och fungerar som de ska även om användare laddar om sidan när de är offline.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">För-uppladda innehåll med rel="preload"</a></dt> + <dd class="landingPageList"><code>preload</code> värdet för {{htmlelement("link")}} elementets {{htmlattrxref("rel", "link")}} attribut, låter dig skriva deklarativa fetch-begäranden i ditt HTML {{htmlelement("head")}}, som specificierar resurser som dina sidor kommer behöva väldigt snart efter att de laddats, vilka du därför vill börja föruppladda tidigt i livscykeln i en sidladdning, innan webbläsarens huvudmaskineri går igång. Detta säkrar att resurserna är tillgängliggjorda tidigare och då är mindre troliga att blockera sidans första laddning, vilket ger en prestandaförbättring. Denna artikel ger en grundläggande guide till hur <code>preload</code> fungerar.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referenser">Referenser</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML-referenser</a></dt> + <dd class="landingPageList">HTML består av <strong>element</strong>, som vart och ett kan modifieras med ett visst antal <strong>attribut</strong>. HTML-dokument är sammanbundna med varandra med hjälp av <a href="/en-US/docs/Web/HTML/Link_types">länkar</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML-elementreferenser</a></dt> + <dd class="landingPageList">Bläddra igenom en lista på alla <a class="glossaryLink" href="/en-US/docs/Glossary/HTML">HTML</a>-<a class="glossaryLink" href="/en-US/docs/Glossary/Element">element</a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML-attributreferenser</a></dt> + <dd class="landingPageList">Element i HTML har olika <strong>attribut</strong>. Dessa är kompletterande värden som konfigurerar elementen eller justerar deras beteenden på olika sätt.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Globala attribut</a></dt> + <dd class="landingPageList">Globala attribut kan specifieras för alla <a href="/en-US/docs/Web/HTML/Element">HTML element</a>, <em>även de som inte är specifierade i standarden</em>. Detta betyder att alla icke-standardelement ändå måste tillåta dessa attribut, även om de gör dokumentet icke-kompatibelt med HTML5.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline-element</a> och <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level-element</a></dt> + <dd class="landingPageList">HTML-element är vanligtvis "textnivå"- ("inline") eller "blocknivå"-element ("block level"). Ett textnivåelement tar inte upp mer plats än vad som ryms mellan de taggar som definierar det. Ett blocknivåelement tar upp hela sitt föräldraelements (containers) yta, och skapar på så sätt ett "block".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Länktyper</a></dt> + <dd class="landingPageList">I HTML kan flera länktyper användas för att etablera och definiera förhållandet mellan två dokument. Länkelement som länktyper kan användas på inkluderar <a href="/en-US/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/en-US/docs/Web/HTML/Element/area"><code><area></code></a>, och <a href="/en-US/docs/Web/HTML/Element/link"><code><link></code></a>.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">Mediaformat som stöds av HTML-audio- och videoelement</a></dt> + <dd class="landingPageList">Elementen <a href="/en-US/docs/Web/HTML/Element/audio"><code><audio></code></a> och <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> låter dig spela upp ljud och video. Dessa element erbjuder ett webbläsarnativt alternativ till liknande funktioner i Adobe Flash och andra plug-ins.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">Olika typer av HTML-innehåll</a> (Avancerat)</dt> + <dd class="landingPageList">HTML består av flera typer av innehåll, som vart och ett är tillåtet att använda i viss kontext och förbjudet i andra. På samma sätt har alla dessa typer varsin uppsättning av andra innehållskategorier som de kan innehålla och element som kan eller inte kan användas i dem. Detta är en guide till dessa kategorier.</dd> +</dl> + +<h2 class="landingPageList" id="Relaterade_ämnen">Relaterade ämnen</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applicera färg på HTML-element med CSS</a></dt> + <dd>Denna artikel tar upp de flesta sätt som du kan använda CSS för att addera färg till HTML-innehåll. Den listar vilka delar av HTML-dokument som kan färgas och vilka CSS-egenskaper som används då. Den inkluderar exempel, länkar till palettbyggarverktyg, m.m.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/en-US/docs/tag/HTML">View All...</a></span></section> diff --git a/files/sv-se/web/http/index.html b/files/sv-se/web/http/index.html new file mode 100644 index 0000000000..5540dd16e2 --- /dev/null +++ b/files/sv-se/web/http/index.html @@ -0,0 +1,87 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - NeedsTranslation + - Reference + - TopicStub + - Web + - 'l10n:priority' +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> is an <a href="https://en.wikipedia.org/wiki/Application_Layer">application-layer</a> protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server model</a>, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a <a href="https://en.wikipedia.org/wiki/Stateless_protocol">stateless protocol</a>, meaning that the server does not keep any data (state) between two requests. Though often based on a TCP/IP layer, it can be used on any reliable <a href="https://en.wikipedia.org/wiki/Transport_Layer">transport layer</a>; that is, a protocol that doesn't lose messages silently, such as UDP.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutorials">Tutorials</h2> + +<p>Learn how to use HTTP with guides and tutorials.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>The basic features of the client-server protocol: what it can do and its intended uses.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd>How cookies work is defined by <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. When serving an HTTP request, a server can send a <code>Set-Cookie</code> HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a <code>Cookie</code> request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.</dd> + <dt><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests</strong> are HTTP requests for resources from a <strong>different domain</strong> than the domain of the resource making the request. For instance, an HTML page from Domain A (<code>http://domaina.example/</code>) makes a request for an image on Domain B (<code>http://domainb.foo/image.jpg</code>) via the <code>img</code> element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>A brief description of the changes between the early versions of HTTP, to the modern HTTP/2 and beyond.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></dt> + <dd>A collection of tips to help operational teams with creating secure web applications.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Session">A typical HTTP session</a></dt> + <dd>Shows and explains the flow of a usual HTTP session.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Reference">Reference</h2> + +<p>Browse through detailed HTTP reference documentation.</p> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA registry</a>, whose original content was defined in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Methods">HTTP Request Methods</a></dt> + <dd>The different operations that can be done with HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Response_codes">HTTP Status Response Codes</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="Tools_resources">Tools & resources</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/sv-se/web/http/status/200/index.html b/files/sv-se/web/http/status/200/index.html new file mode 100644 index 0000000000..6674dc059c --- /dev/null +++ b/files/sv-se/web/http/status/200/index.html @@ -0,0 +1,54 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +tags: + - HTTP + - Lyckat + - Statuskod +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>En <strong><code>200 OK</code></strong> HTTP status svarskod förmedlar att en förfrågan har lyckats. Ett 200 svar är cacheningsbar som standard.</p> + +<p>Betydelsen för att en förfrågan har lyckats är olika beroende på vilken HTTP förfrågningsmetod du använder:</p> + +<ul> + <li>{{HTTPMethod("GET")}}: Resursen har blivit hämtad och finns med i <span class="tlid-translation translation"><span title="">meddelandekroppen</span></span>.</li> + <li>{{HTTPMethod("HEAD")}}: <span class="tlid-translation translation"><span title="">Enhetsrubrikerna finns i meddelandekroppen</span></span>.</li> + <li>{{HTTPMethod("POST")}}: Resursen som beskriver resultatet för händelsen finns med i <span class="tlid-translation translation"><span title="">meddelandekroppen</span></span>.</li> + <li>{{HTTPMethod("TRACE")}}: <span class="tlid-translation translation"><span title="">Meddelandekroppen </span></span>innehåller förfrågans meddelande som togs emot av servern.</li> +</ul> + +<p>Resultatet för en lyckad {{HTTPMethod("PUT")}} eller en {{HTTPMethod("DELETE")}} förfrågan är oftast inte <code>200</code> <code>OK</code> utan {{HTTPStatus("204")}} <code>No Content</code> (eller {{HTTPStatus("201")}} <code>Created</code> om resursen laddades upp för första gången).</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">200 OK</pre> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Titel</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p class="hidden"><span class="tlid-translation translation"><span title="">Kompatibilitetstabellen på den här sidan genereras av strukturerad data.</span> <span title="">Om du vill bidra till uppgifterna kan du kolla in </span></span><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a><span class="tlid-translation translation"><span title=""> och skicka en pull request.</span></span></p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="Se_också">Se också</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> +</ul> diff --git a/files/sv-se/web/http/status/index.html b/files/sv-se/web/http/status/index.html new file mode 100644 index 0000000000..f8ef6b278e --- /dev/null +++ b/files/sv-se/web/http/status/index.html @@ -0,0 +1,185 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +tags: + - HTTP + - Landing + - NeedsTranslation + - Overview + - Reference + - Status codes + - TopicStub + - Web +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary">HTTP response status codes indicate whether a specific <a href="/en-US/docs/Web/HTTP">HTTP</a> request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirects, client errors, and servers errors.</span> Status codes are defined by <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>.</p> + +<h2 id="Information_responses">Information responses</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>This code is sent in response to an {{HTTPHeader("Upgrade")}} request header by the client, and indicates the protocol the server is switching to.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>This code indicates that the server has received and is processing the request, but no response is available yet.</dd> +<dt>{{HTTPStatus(103, "103 Early Hints")}} +</dt><dd>This status code is primarily intended to be used with the {{HTTPHeader("Link")}} header to allow the user agent to start preloading resources while the server is still preparing a response. +</dd></dl> + +<h2 id="Successful_responses">Successful responses</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>The request has succeeded. The meaning of a success varies depending on the HTTP method:<br> + GET: The resource has been fetched and is transmitted in the message body.<br> + HEAD: The entity headers are in the message body.<br> + PUT or POST: The resource describing the result of the action is transmitted in the message body.<br> + TRACE: The message body contains the request message as received by the server</dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a POST request, or after some PUT requests.</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="Redirection_messages">Redirection messages</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible response. The user-agent or user should choose one of them. There is no standardized way of choosing one of the responses.</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>This response code means that the URI of the requested resource has been changed. Probably, the new URI would be given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that the URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>The server sent this response to direct the client to get the requested resource at another URI with a GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>The server sends this response to direct the client to get the requested resource at another URI with same method that was used in the prior request. This has the same semantics as the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: If a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="Client_error_responses">Client error responses</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>This response means that server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt><code>402 Payment Required</code></dt> + <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(425, "425 Too Early")}}</dt> + <dd>Indicates that the server is unwilling to risk processing a request that might be replayed.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Server_error_responses">Server error responses</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfill it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/sv-se/web/index.html b/files/sv-se/web/index.html new file mode 100644 index 0000000000..493d39a29a --- /dev/null +++ b/files/sv-se/web/index.html @@ -0,0 +1,85 @@ +--- +title: Tekniker för webbutveckling +slug: Web +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web +--- +<p>Öppenheten på Webben ger fantastiska möjligheter för utvecklare. För att kunna använda dessa teknologier till fullo så behöver du förstå hur du kan använda dem. Här nedan hittar du länkar till MDNs dokumentation om Webbteknologier.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Webbteknologier">Webbteknologier</h2> + +<h3 id="Grunden">Grunden</h3> + +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd><strong>HyperText Markup Language</strong> är språket som beskriver och definierar innehållet i en webbsida på ett strukturerat sätt.</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd><strong>Cascading Style Sheets</strong> används för att beskriva utseendet för innehållet i webben.</dd> + <dt><a href="/en-US/docs/Web/HTTP">HTTP</a></dt> + <dd><strong>Hypertext Transfer Protocol</strong> används för att hämta och ändra HTML och andra entiteter och dokument som finns tillgänliga på webben.</dd> +</dl> + +<h3 id="Scripting">Scripting</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong> är ett programspråk som kör i en webbläsare. Språket används för att bland annat bygga avancerade interaktiva webbsidor och applikationer.</dd> + <dt><a href="/en-US/docs/Web/Reference/API">Web APIs</a></dt> + <dd><strong>Web Application Programming Interfaces</strong> används till allehanda uppgifter, till exempelvis ändra <a href="/en-US/docs/DOM">DOM</a> strukturen för ett dokument, spela ljud, video eller generera grafik i 3D. De består av individuella API:er som tillsammans bygger upp den kraftfulla scriptbarheten på webben, inkluderat <a href="/en-US/docs/DOM">DOM</a> och de relaterade API och interface som kan användas för att bygga webbsidor och applikationer. + <ul> + <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API interface reference</a> - beskriver alla interface som är tillgängliga för att utveckla applikationer för webben.</li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a> beskriver kommunikation, hur tillgång ges till hårdvaran, samt de andra API:erna som är tillgängliga för webbaplikationer.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events">Event reference</a> listar alla events som finns tillgängliga för att lyssna till, eller reagera på händelser som sker på en webbsida eller aplikation.</li> + </ul> + </dd> +</dl> + +<h3 id="Graphics">Graphics</h3> + +<dl> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> + <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0, and which can be used in HTML {{HTMLElement("canvas")}} elements.</dd> +</dl> + +<h3 id="Other">Other</h3> + +<dl> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Documentation_by_type">Documentation by type</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt> + <dd>The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd> + <dt><a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt> + <dd>A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd> + <dt><a href="/en-US/docs/Web/Reference">References</a></dt> + <dd><em>This page will offer links to all reference information on MDN, but for now use one of the technology links in the left section.</em></dd> +</dl> + +<h2 id="Other_topics">Other topics</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> + <dd>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd> + <dt><a href="/en-US/docs/Web/Accessibility">Accessibility</a></dt> + <dd>Accessibility in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. Here we provide information on developing Web content to be accessible.</dd> + <dt><a href="/en-US/docs/Web/Security">Security</a></dt> + <dd>Ensuring that your Web site or open Web app is secure is critical.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> diff --git a/files/sv-se/web/javascript/guide/index.html b/files/sv-se/web/javascript/guide/index.html new file mode 100644 index 0000000000..8ae86f324f --- /dev/null +++ b/files/sv-se/web/javascript/guide/index.html @@ -0,0 +1,119 @@ +--- +title: JavaScript Guide +slug: Web/JavaScript/Guide +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">"The JavaScript Guide" går igenom hur du använder <a href="/en-US/docs/Web/JavaScript">JavaScript</a> och ger en överblick över språket. Om du behöver genomgripande information om en språk funktion, ta en titt på <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript referens</a> delen.</p> + +<h2 id="Kapitel">Kapitel</h2> + +<p>Denna guide är indelad i flera kapitel:</p> + +<ul class="card-grid"> + <li><span><a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction">Introduktion</a></span> + + <p><a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">Om denna guide</a><br> + <a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">Om JavaScript</a><br> + <a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript och Java</a><br> + <a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Verktyg</a><br> + <a href="/sv-SE/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/sv-se/web/javascript/guide/introduction/index.html b/files/sv-se/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..c7860d98a1 --- /dev/null +++ b/files/sv-se/web/javascript/guide/introduction/index.html @@ -0,0 +1,139 @@ +--- +title: Introduktion +slug: Web/JavaScript/Guide/Introduction +tags: + - Handbok + - Introduktion + - JavaScript + - Nybörjare +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">I det här kapitlet av JavaScript diskuterar vi några av dess grundläggande begrepp.</p> + +<h2 id="Vad_du_redan_bör_veta">Vad du redan bör veta</h2> + +<p>Denna handbok förutsätter att du har följande grundläggande bakgrund:</p> + +<ul> + <li>En allmän förståelse för Internet och webben ({{Glossary("WWW")}}).</li> + <li>Goda kunskaper i Hypertext Markup Language ({{Glossary("HTML")}}).</li> + <li>Viss erfarenhet av programmering. Om du är ny på programmering, prova en av de guider länkade på huvudsidan om <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</li> +</ul> + +<h2 id="Vart_du_hittar_information_om_JavaScript">Vart du hittar information om JavaScript</h2> + +<p>JavaScript dokumentation på MDN omfattar följande:</p> + +<ul> + <li><a href="/en-US/Learn">Learning the Web</a> ger information för nybörjare och introducerar grundläggande begrepp inom programmering och Internet.</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a> (Den här handboken) ger en översikt om JavaScript och dess objekt.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> tillhandahåller detaljerad referensmaterial för JavaScript.</li> +</ul> + +<p>Om du är ny på JavaScript börja med artiklarna i <a href="/en-US/Learn">learning area</a> och <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>. När du har ett fast grepp om grunderna, kan du använda <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> för att få mer information om enskilda objekt och uttryck.</p> + +<h2 id="Vad_är_JavaScript">Vad är JavaScript?</h2> + +<p>JavaScript är ett plattformsoberoende, objektorienterat skriptspråk. Det är ett litet lättvikt språk som används i en värdmiljön (till exempel en webbläsare), JavaScript kan förbinda sig till värdens miljöobjekt, för att ge programmatisk kontroll över dem.</p> + +<p>JavaScript innehåller ett standardbibliotek av objekt, såsom Array, Date, och Math, och en grundläggande uppsättning av språkelement såsom operatörer, styrstrukturer och uttryck. Kärnan i JavaScript kan förlängas för en mängd olika syften genom att komplettera den med ytterligare objekt, till exempel:</p> + +<ul> + <li><em>JavaScript på klientsidan</em> förlänger kärnspråket genom att tillägga objekt för att styra en webbläsare och dess Document Object Model (DOM). Till exempel, klientsidans förlägning tillåter en applikation placera elementen i ett HTML-formulär och svara på användarhändelser, såsom musklick, formulär input och sid navigering.</li> + <li><em>Server-side JavaScript </em>förlänger huvudspråket genom att leverera objekt som är relevanta för att köra JavaScript på en server. Till exempel, på serversidan tillåter utökningen en applikation kommunicera med en databas, ge kontinuitet av information från ett anrop till en annan applikation, eller utföra fil manipulationer på en server.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript och Java</h2> + +<p>JavaScript och Java är liknande på vissa sätt, men fundamentalt annorlunda i vissa andra. JavaScript liknar Java men har inte Java's statiska typning och starka typkontroll. JavaScript har dock för de mesta samma syntax som Java, som var anledningen till att man döpte om JavaScript från LiveScript.</p> + +<p>Till skillnad från Javas kompilering av system klasser byggda av deklarationer, stöder JavaScript ett runtime system, baserat på ett litet antal datatyper som representerar numeriska, Boolean och strängvärden . JavaScript har en prototyp baserad objektmodell istället för den mer vanliga klassbaserade modell. Prototyp bas modellen ger dynamiskt arv; det vill säga vad som ärvs kan variera för enskilda objekt. JavaScript stöder också funktioner utan några speciella deklarativa krav. Funktioner kan vara egenskaper som tillhör objekt och exekveras såsom löst skrivna metoder.</p> + +<p>JavaScript är ett mycket fritt formspråk jämfört med Java. Du behöver inte deklarera alla variabler, klasser och metoder. Du behöver inte bekymra sig om metoder är offentliga, privata eller skyddade och du behöver inte genomföra gränssnitt. Variabler, parametrar och funktionsreturtyper inte uttryckligen typad.</p> + +<p>Java är ett programmeringsspråk klassbaserad avsedd för snabb exekvering och typsäkerhet. Typsäkerhet betyder, till exempel, att du inte kan kasta ett Java heltal till en objektreferens eller tillgå privat minne genom att korrumpera Java bytekoder . Javas klassbaseradmodell innebär att program består uteslutande av klasser och deras metoder. Java klass arv och stark typning kräver iallmänhet hårt kopplade objekt hierarkier. Dessa krav gör Java-programmering mer komplex än JavaScript programmering.</p> + +<p>I kontrast, JavaScript stiger ned i ande från en linje av mindre, dynamiskt typade språk såsom Hypertalk och dBASE. Dessa skriptspråk ger programmeringsverktyg till en mycket bredare publik på grund av deras lättare syntax, specialiserade inbyggd funktionalitet och minimikrav för att skapa objekt.</p> + +<table class="standard-table"> + <caption>JavaScript jämfört med Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Objektorienterad. Ingen åtskillnad mellan olika typer av objekt. Arv är genom prototypen mekanismen, och egenskaper och metoder kan läggas till alla objekt dynamiskt.</td> + <td>Klass-baserade. Objekt är indelade i klasser och instanser med all arv genom klasshierarkin . Klasser och instanser kan inte ha egenskaper eller metoder tillsatta dynamiskt.</td> + </tr> + <tr> + <td>Variablers datatyper är inte deklarerade (dynamisk typning).</td> + <td>Variablel datatyper måste deklareras (statisk typning).</td> + </tr> + <tr> + <td>Det går inte att automatiskt skriva till hårddisken.</td> + <td>Kan automatiskt skriva till hårddisken.</td> + </tr> + </tbody> +</table> + +<p>För mer information om skillnaderna mellan JavaScript och Java, se kapitlet <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript och ECMAScript specifikationen</h2> + +<p>JavaScript är standardiserad vid <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — den europeiska sammanslutningen för standardisering informations- och kommunikationssystem (ECMA var tidigare en akronym för Europeiska Computer Manufacturers Association) för att leverera en standardiserad internationell programmeringsspråk baserad på JavaScript. Denna standardiserade versionen av JavaScript, kallad ECMAScript, beter sig på samma sätt i alla program som stöder standarden. Företag kan använda den öppna standarden av språket för att utveckla en egen implementation av JavaScript. ECMAScript standard dokumenteras i ECMA-262-specifikationen. Se <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> för att lära dig mer om olika versioner av JavaScript och ECMAScript specifikations upplagor.</p> + +<p>ECMA-262 standarden är också godkänd av <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) som ISO-16262.Du kan också hitta specifikation på<a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> Ecma International</a>'s hemsida. ECMAScript specifikationen beskriver inte Document Object Model (DOM), som standardiserats av <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> och/eller <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a>. DOM definierar det sätt på vilket HTML dokument objekt exponeras för ditt skript. För att få en bättre uppfattning om de olika tekniker som används vid programmering med JavaScript, konsultera artikeln <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript dokumentationen kontra ECMAScript specifikationen</h3> + +<p>ECMAScript specifikationen är en uppsättning regler för att implementera ECMAScript; vilket är användbart om du vill genomföra standard kompatibla språkfunktioner av ECMAScript implementation eller motor (t.ex. Spidermonkey i Firefox eller v8 i Chrome).</p> + +<p>ECMAScript specifikationen är inte avsett att hjälpa skript programmerare; använda JavaScript dokumentationen för information om hur du skriver skript.</p> + +<p>ECMAScript specifikationen använder terminologi och syntax som kan vara främmande för en JavaScript programmerare. Även om beskrivningen av språket kan skilja sig i ECMAScript, förblir själva språket densamma . JavaScript stöder alla funktioner som beskrivs i ECMAScript specifikationen.</p> + +<p>Däremot så finns det i JavaScript dokumentationen aspekter av språket som är lämpligt för en JavaScript programmerare.</p> + +<h2 id="Komma_igång_med_JavaScript">Komma igång med JavaScript</h2> + +<p>Komma igång med JavaScript är enkelt: allt du behöver är en modern webbläsare. Denna guide innehåller några JavaScript funktioner som endast tillgängliga i de senaste versionerna av Firefox, så använder den senaste versionen av Firefox rekommenderas.</p> + +<p>Det finns två verktyg inbyggda i Firefox som är användbara för att experimentera med JavaScript: Webb Konsol och Kladdblocket.</p> + +<h3 id="Webb_Konsol">Webb Konsol</h3> + +<p><a href="/en-US/docs/Tools/Web_Console">Webb Konsol</a> visar information om den aktuellat laddade webbsida och innehåller även en <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">kommandorad</a> som du kan använda för att köra JavaScript uttryck i den aktuella sidan.</p> + +<p>För att öppna webbkonsolen (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> på Windows och Linux eller <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> på Mac), välj "Webb Konsole" från "Webbutvecklare" menyn,som är under menyn "Verktyg" i Firefox. Det visas längst ned i webbläsarfönstret . Längs botten av konsolen är en kommandorad som du kan använda för att komma in JavaScript och utgången visas i rutan ovan:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Kladdblocket">Kladdblocket</h3> + +<p>Webb Konsol är bra för att utföra enkla rader JavaScript, men även om du kan utföra flera rader, är den lite bökig att använda med flera rader. Du kan heller inte spara dina kodexempel när du använder webbkonsolen. För mer komplexa exempel är <a href="/en-US/docs/Tools/Scratchpad">Kladdblocket</a> ett bättre verktyg.</p> + +<p>För att öppna Kladdblocket (<kbd>Shift</kbd>+<kbd>F4</kbd>), och välj "Kladdblocket" from the "Webbutvecklare" menyn, som är under menyn i Firefox. Den öppnas i ett separat fönster och är en editor som du kan använda för att skriva och exekvera JavaScript i webbläsaren. Du kan också läsa/spara in dem från disk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>För att komma igång med att skriva JavaScript öppnar Kladdblocket och skriv din första "Hello world" JavaScript-kod:</p> + +<pre class="brush: js">function greetMe(yourName) { + alert('Hello ' + yourName); +} + +greetMe('World'); +</pre> + +<p>Välj koden i blocket och tryck ner Ctrl+R för att se det utvecklas i din webbläsare!</p> + +<p>På följande sidor kommer den här guiden introducera dig till JavaScript syntax och språkfunktioner, så att du kommer att kunna skriva mer komplexa applikationer.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/sv-se/web/javascript/index.html b/files/sv-se/web/javascript/index.html new file mode 100644 index 0000000000..26adc7f23f --- /dev/null +++ b/files/sv-se/web/javascript/index.html @@ -0,0 +1,104 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - Inlära +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong><sup>®</sup> (ofta förkortat till <strong>JS</strong>) är ett lättviktigt, tolkat, eller "just-in-time"-kompilerat programmeringsspråk med <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class-funktioner</a>, mest känt som skriptspråk för hemsidor, men används även i många sammanhang utanför webbläsaren så som i <a href="/sv-SE/docs/Glossary/Node.js">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> eller <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. Språket är ett <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototyp-</a>baserat multi-paradigmskriptingspråk som är dynamiskt typat och stödjer en objektorienterad, imperativ och funktionell programmeringsstil. Läs mer om JavaScript <a href="/sv-SE/docs/Web/JavaScript/About_JavaScript">här</a>.</p> + +<p>Standarden för JavaScript kallas <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. Från och med 2012 stödjer alla moderna webbläsare ECMAScript 5.1. Äldre webbläsare stödjer åtminstone ECMAScript 3. Den 17:e Juni 2015 publicerades den större versionen av ECMAScript, som officiellt kallas för ECMAScript 2015, men refererad ofta som ECMAScript 6 eller ES6. Sedan 2015-versionen släpps nya standarder årsvis. Denna dokumentation täcker det senaste utkastet, vilket för närvarande är <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p> + +<p>Denna delen av sidan är dedikerad till själva språket JavaScript; delarna som inte är direkt kopplade till hemsidor, eller servermiljö. För information till {{Glossary("API","API:er")}} specifikt för hemsidor, se <a href="/en-US/docs/Web/API">Web APIs</a> och <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>JavaScript skall inte förväxlas med programmeringsspråket <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java</a>. Java och JavaScript har helt olika syntax och används i olika syften. Java är ett varumärke och är registrerat av Oracle i USA och andra länder.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Guider">Guider</h2> + +<p>Lär dig att programmera i JavaScript med våra guider.</p> + +<h3 id="Introduktion">Introduktion</h3> + +<dl> + <dt><a href="/sv-SE/docs/Web/JavaScript/Guide">JavaScript Guide</a></dt> + <dd>Om du är ny på JavaScript, kommer den här guiden ta dig igenom språket.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript teknisk översikt</a></dt> + <dd>Introduktion till JavaScript webbläsarmiljö.</dd> + <dt><a href="/sv-SE/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduktion till Objektorienterad JavaScript</a></dt> + <dd>Introduktion till konceptet av objekt orienterad programmering i JavaScript.</dd> +</dl> + +<h3 id="Intermediär">Intermediär</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">En återintroduktion till JavaScript</a></dt> + <dd>En översikt för dem som tror att de kan JavaScript.</dd> +</dl> + +<dl> + <dt><a href="/sv-SE/docs/Web/JavaScript/Data_structures">Datastrukturer i JavaScript</a></dt> + <dd>Översikt över de tillgängliga datastrukturerna i JavaScript.</dd> + <dt><a href="/sv-SE/docs//Web/JavaScript/Equality_comparisons_and_sameness">Jämförelse och likheter</a></dt> + <dd>JavaScript erbjuder tre olika operatörer för värde-jämförelser: Vid strikt likhet används <code>===</code>, vid mindre strikt likhet används <code>==</code>, och {{jsxref("Global_Objects/Object/is", "Object.is()")}}-metoden.</dd> +</dl> + +<h3 id="Avancerad">Avancerad</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Prototyper och dess arvskedja</a></dt> + <dd>Förklarar hur arv baserat på prototyper fungerar vars begrepp allt som oftast både är missförstått och undervärderat.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strikt läge</a></dt> + <dd>En strikt variant av JavaScript.</dd> + <dt><a href="/sv-SE/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt> + <dd>"JavaScript typed arrays" tillförser en mekanism för att komma åt rå binär-data.</dd> + <dt><a href="/sv-SE/docs/Web/JavaScript/Memory_Management">Minneshantering</a></dt> + <dd>Livscykel för minne och avfallshantering (garbage collection) i JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Concurrency-programmering och Event-loopen</a></dt> + <dd>Javascript har en modell för concurrency ("samtidighet") baserad på en "event-loop".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referens">Referens</h2> + +<p>Bläddra bland vår JavaScript-referens <a href="/en-US/docs/Web/JavaScript/Reference">här</a>.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standardobjekt</a></dt> + <dd>Lär dig om de inbyggda objekten i JavaScript: {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, and others.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Uttryck och operatörer</a></dt> + <dd>Lär dig mer om hur JavaScript behandlar operatörer: {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, och mer.<br> + <br> + Inom programmering är uttryck "expressions" på engelska.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference">Satser och deklarationer</a></dt> + <dd>Lär dig hur {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, och mer JavaScript-satser fungerar.<br> + <br> + Inom programmering är satser "statements" på engelska.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Funktioner</a></dt> + <dd>Lär dig hur man arbetar med JavaScripts funktioner för att utveckla din applikation.</dd> +</dl> + +<h2 id="Verktyg_och_resurser">Verktyg och resurser</h2> + +<p>Hjälpfulla verktyg när du skriver och avlusar ("debuggar") din JavaScript-kod.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, och mer.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> + <dd>Ett JavaScript-skal som tillåter dig att snabbt testa JavaScript-kodsnuttar.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd> + <p>Samarbete gjort enkelt.</p> + </dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow är ett QA-forum för programmerare. Se efter frågor taggade med "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript-versioner och utgivningsanteckningar</a></dt> + <dd>Bläddra bland JavaScripts funktions-historia och implementationsstatus.</dd> +</dl> +</div> +</div> diff --git a/files/sv-se/web/javascript/reference/classes/extends/index.html b/files/sv-se/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..c72398e470 --- /dev/null +++ b/files/sv-se/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,172 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Klasser +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Nyckelorder <strong><code>extends</code></strong> används i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">klassdeklarationer</a> eller <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">klassuttryck</a> för att skapa en klass som är barn till en annan klass.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Beskrivning">Beskrivning</h2> + +<p>Nyckelordet <code>extends</code> kan användas för att subklassa anpassade klasser såväl som inbyggda objekt.</p> + +<p><code>.prototype</code> vid användning av <code>extends</code> måste vara en {{jsxref("Object")}} eller {{jsxref("null")}}.</p> + +<h2 id="Exempel">Exempel</h2> + +<h3 id="Använda_extends">Använda <code>extends</code></h3> + +<p>Första exemplet skapar en klass som heter <code>Square</code> från en klass kallad <code>Polygon</code>. Exemplet är extraherat från denna <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(källkod)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Här anropas föräldraklassens constructor med längd + // angiven för Polygons bredd och höjd + super(length, length); + // Notera: i underliggande klasser, måste super() anropas innan du + // kan använda 'this'. Utelämnande av detta kommer orsaka ett "reference error". + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.height = this.width = Math.sqrt(value); + this.area = value; + } +}</pre> + +<h3 id="Användning_av_extends_med_inbyggda_objekt">Användning av <code>extends</code> med inbyggda objekt</h3> + +<p>Detta exempel utökar det inbyggda objektet {{jsxref("Date")}}. Exemplet är extraherat från denna <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(källkod)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; + return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear(); + } +}</pre> + +<h3 id="Utökning_av_null">Utökning av <code>null</code></h3> + +<p>Utökning från {{jsxref("null")}} fungerar som en normal klass, förutom att prototype objektet inte ärver från {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null</pre> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompabilitet">Browserkompabilitet</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Bassupport</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subklassning</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> +</ul> diff --git a/files/sv-se/web/javascript/reference/classes/index.html b/files/sv-se/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..d3ac6aca7f --- /dev/null +++ b/files/sv-se/web/javascript/reference/classes/index.html @@ -0,0 +1,383 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is <strong>not</strong> introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.</p> + +<h2 id="Defining_classes">Defining classes</h2> + +<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Class_declarations">Class declarations</h3> + +<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Polygon" here).</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError + +class Polygon {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body.</p> + +<pre class="brush: js">// unnamed +var Polygon = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; + +// named +var Polygon = class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +</pre> + +<p><strong>Note:</strong> Class <strong>expressions</strong> also suffer from the same hoisting issues mentioned for Class <strong>declarations</strong>.</p> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructors.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of a parent class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea(); + } + + calcArea() { + return this.height * this.width; + } +} + +const square = new Polygon(10, 10); + +console.log(square.area);</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and are also <strong>not </strong>callable when the class is instantiated. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3> + +<p>When a static or prototype method is called without an object valued "this" (or with "this" as boolean, string, number, undefined or null), then the "this" value will be <strong><code>undefined</code></strong> inside the called function. Autoboxing will not happen. The behaviour will be the same even if we write the code in non-strict mode.</p> + +<pre class="brush: js">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // undefined + +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>If we write the above code using traditional function based classes, then autoboxing will happen based on the "this" value overwhich the function was called.</p> + +<pre class="brush: js">function Animal() { } + +Animal.prototype.speak = function(){ + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>If there is a constructor present in sub-class, it needs to first call super() before using "this".</p> + +<p>One may also extend traditional function-based "classes":</p> + +<pre class="brush: js">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js">var Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } + speak() { + console.log(this.name + ' barks.'); + } +} + +Object.setPrototypeOf(Dog.prototype, Animal); + +var d = new Dog('Mitzie'); +d.speak(); +</pre> + +<h2 id="Species">Species</h2> + +<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> + +<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> + +<pre class="brush: js">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call functions on an object's parent.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js">var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>13</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(9.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/sv-se/web/javascript/reference/classes/static/index.html b/files/sv-se/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..515f4fbfec --- /dev/null +++ b/files/sv-se/web/javascript/reference/classes/static/index.html @@ -0,0 +1,179 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - Klasser + - Metoder + - Statiska funktioner +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Nyckelordet <strong>static</strong> definierar en statisk metod för en klass.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">static methodName() { ... }</pre> + +<h2 id="Beskrivning">Beskrivning</h2> + +<p>Anrop på statiska metoder är gjorda direkt på klassen och kan inte göras genom instanser av klassen. Statiska metoder är ofta använda för att göra verktygsfunktioner.</p> + +<h2 id="Att_anropa_statiska_metoder">Att anropa statiska metoder</h2> + +<h3 id="Från_en_annan_statisk_metod">Från en annan statisk metod</h3> + +<p>För att anropa en statisk metod från en annan statisk metod av samma klass, kan du använda "<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>".</code></p> + +<pre class="brush: js">class StaticMethodCall { + static staticMethod() { + return 'En statisk metod har blivit anropad'; + } + static anotherStaticMethod() { + return this.staticMethod() + ' från en annan statisk metod!'; + } +} +StaticMethodCall.staticMethod(); +// 'En statisk metod har blivit anropad' + +StaticMethodCall.anotherStaticMethod(); +// 'En statisk metod har blivit anropad från en annan statisk metod!'</pre> + +<h3 id="Från_en_klasskonstruktor_och_andra_metoder">Från en klasskonstruktor och andra metoder</h3> + +<p>Statiska metoder är inte tillgängliga genom att använda "<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>"</code> från icke statiska metoder. Du behöver anropa dem genom att antingen använda klassnamnet: ClassName.staticMethodName() eller genom att anropa metoden som en egendom av konstruktorn: this.constructor.staticMethodName().</p> + +<pre class="brush: js">class StaticMethodCall { + constructor() { + console.log(StaticMethod.staticMethod()); + // 'En statisk metod har blivit anropad.' + + console.log(this.constructor.staticMethod()); + // 'En statisk metod har blivit anropad.' + } + + static staticMethod() { + return 'En statisk metod har blivit anropad.'; + } +}</pre> + +<h2 id="Exempel">Exempel</h2> + +<p>Det följande exemplet visar flera saker:</p> + +<ol> + <li>Hur en statisk metod implementeras på en klass.</li> + <li>Att en klass med en statisk medlem kan vara sub-klassad.</li> + <li>Hur en statisk metod kan och inte kan bli anropad.</li> +</ol> + +<pre class="brush: js">class Triple { + static triple(n) { + if (n === undefined) { + n = 1; + } + return n * 3; + } +} + +class BiggerTriple extends Triple { + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 + +var tp = new Triple(); + +console.log(BiggerTriple.triple(3)); +// 81 (Påverkas inte av förälderns instans.) + +console.log(tp.triple()); +// 'tp.triple is not a function'. +</pre> + +<h2 id="Specifikationer">Specifikationer</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Första definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Webbläsarkompatibilitet">Webbläsarkompatibilitet</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlig support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Grundlig support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Läs_också">Läs också</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/sv-se/web/javascript/reference/index.html b/files/sv-se/web/javascript/reference/index.html new file mode 100644 index 0000000000..4205970b93 --- /dev/null +++ b/files/sv-se/web/javascript/reference/index.html @@ -0,0 +1,51 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/sv-se/web/security/index.html b/files/sv-se/web/security/index.html new file mode 100644 index 0000000000..74288398ad --- /dev/null +++ b/files/sv-se/web/security/index.html @@ -0,0 +1,18 @@ +--- +title: Web security +slug: Web/Security +tags: + - Landing + - NeedsTranslation + - Security + - TopicStub + - Web +translation_of: Web/Security +--- +<div class="summary"> +<p>Ensuring that your website or open web application is secure is critical. Even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. <span class="seoSummary">The web security oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.</span></p> +</div> + +<p>{{LandingPageListSubpages}}</p> + +<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/sv-se/web/security/osäkra_lösenord/index.html b/files/sv-se/web/security/osäkra_lösenord/index.html new file mode 100644 index 0000000000..1eea2560da --- /dev/null +++ b/files/sv-se/web/security/osäkra_lösenord/index.html @@ -0,0 +1,68 @@ +--- +title: Osäkra lösenord +slug: Web/Security/Osäkra_lösenord +tags: + - GörLäsareAgnostiker + - Mellanliggande + - Osäker + - Säkerhet + - Webb + - lösenord +translation_of: Web/Security/Insecure_passwords +--- +<p class="summary">Att betjäna inloggningsformulär genom HTTP är särskilt farligt på grund av det stora utbudet av attacker som kan användas mot dem för att extrahera en användares lösenord. Nätverkstjuvlyssnare skulle kunna stjäla en användares lösenord genom att sniffa nätverket, eller genom att ändra den betjänade sidan i genomresa. Denna sida detaljerar säkerhetsmekanismen som Firefox har infört för att varna användare och utvecklare om risker angående osäkra lösenord och lösenordsstöld.</p> + +<p><a href="https://en.wikipedia.org/wiki/HTTP_Secure/en-US/docs/" title="https://en.wikipedia.org/wiki/HTTP_Secure">HTTPS</a>-protokollen är designad för att försvara användardata från tjuvlyssnare (<span class="short_text" id="result_box" lang="sv"><span>konfidentialitet</span></span>) och från ändring (integritet) på nätverket. Webbsidor som hanterar användardata borde använda HTTPS för att försvara deras användare från attackerare. Om en webbsida använder HTTP istället för HTTPS, så är det trivialt att stjäla användarinformation (såsom deras inloggningskreditiv). Detta var känt demonstrerat av <a href="https://codebutler.github.io/firesheep/" title="https://codebutler.github.io/firesheep/">Firesheep</a>.</p> + +<p>För att åtgärda denna problem, installera och konfiguera en SSL/TLS cerifikat till din server. Det finns flera säljare som erbjuder gratis och köpta certifikat. Om du använder en molnplattform, så kan de ha deras egna sätt av att göra HTTPS möjligt.</p> + +<h2 id="Firefox_lösenordssäkerhetsindikatorer">Firefox lösenordssäkerhetsindikatorer</h2> + +<p>För att informera dig om hotet som är beskrivet ovan, genomför Firefox många varningsmekanismer:</p> + +<ol> + <li>Firefox 51+ kommer att visa en låsikon med en röd strykt linje i adressfältet när en inloggningsida inte har en säker anslutning, som visas nedan.<br> + + <p style="text-align: center;"><img alt="Lock Icon" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png" style="height: 25px; width: 25px;"></p> + </li> + <li>Firefox 52+ kommer att visa en tydlig varning i URL-fältet och under en fokuserad lösenordsfält i vilken osäker formulär som helst.<br> + + <p style="text-align: center;"><img alt="Warning" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png" style="height: 133px; width: 328px;"></p> + </li> + <li>Firefox 52+ har också inaktiverat autofyll för osäkra inloggningsformulär. Användare kan fortfarande manuellt autofullborda sparade inloggningar från nedfallslistan.</li> + <li>Varningar om osäkra inloggningsformulär kan också hittas i säkerhetspanelen av utvecklarkonsolen i alla Firefox utsläppningar, som är beskrivet i nästa sektion.</li> +</ol> + +<h2 id="Webbkonsolsmeddelanden"><strong>Webbkonsolsmeddelanden</strong></h2> + +<p>Denna sektion beskriver säkerhetsmeddelanden som är visade i utvecklarkonsolen av Firefox DevTools, i respons till osäkra lösenord.</p> + +<h3 id="Att_betjäna_inloggningsformulären_genom_HTTP">Att betjäna inloggningsformulären genom HTTP</h3> + +<p>Även om formulärshandlingen är en HTTPS URL, så är användarens inloggningsformulär inte försvarad på grund av att en attackerare kan ändra sidan som är mottagen av användaren (till exempel, attackerare kan ändra formulärsdestinationen för att posta den känsliga datan över till en server som de kontrollerar, eller så kan de föra in en nyckelloggningsmanus som slår till deras lösenord medans de skriver den). Säkerhetsfliken av webbkonsolen kommer att varna utvecklare och användare om säkerhetsproblemet.</p> + +<p style="text-align: center;"><img alt="Insecure login form shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14783/Insecure_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p> + +<div class="note"> +<p><strong>Not</strong>: Det är också inte säkert att bädda in en HTTPS inloggningssida i ett HTTP dokument — en attackerare skulle kunna ändra rut-URL:en till att peka mot en illvillig sida.</p> +</div> + +<h3 id="Att_använda_en_HTTP_URL_i_formulärshandlingen"><strong>Att använda en HTTP URL i formulärshandlingen</strong></h3> + +<p>I detta fall, vilken data som helst som användaren skriver in är skickat genom nätverket i form av enkel text.</p> + +<p style="text-align: center;"><img alt="Insecure login form action shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14785/Insecure_Action_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p> + +<h2 id="Not_om_lösenordsåteranvändning">Not om lösenordsåteranvändning</h2> + +<p>Ibland kräver webbplatser användarnamn och lösenord, men faktiskt inte lagrar data som är väldigt känsliga. Till exempel, en nyhetssajt kan spara vilka artiklar en användare vill gå tillbaks till och läsa, men sparar inte något annat data om användaren. Webbutvecklare av nyhetssajter kan vara mindre motiverade till att säkra deras sajter och deras användarkreditiv.</p> + +<p>Tyvärr, <a href="https://www.lightbluetouchpaper.org/2011/02/09/measuring-password-re-use-empirically/">lösenordsåteranvändning är ett stort problem</a>. Användare använder samma lösenord på flera sajter (nyhetswebbplatser, sociala nätverk, e-postsleverantörer, banker). Därför, även om tillträde till användarnamnet och lösenordet till din sajt inte verkar som en enorm risk till dig, så är det en stor risk till användare som har använt samma användarnamn och lösenord för att logga in på deras bankkonton. Attackerare blir smartare; de stjäl par användarnamn/lösenord från en sajt, och sedan försöker att återanvända dem på mer lukrativa sajter.</p> + +<h2 id="Se_även">Se även</h2> + +<ul> + <li class="entry-title"><a href="https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/">No More Passwords over HTTP, Please!</a> — detaljerad blogginlägg med mer information, och FAQ.</li> +</ul> + +<p class="entry-title">{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p> |