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/web/javascript | |
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/web/javascript')
-rw-r--r-- | files/sv-se/web/javascript/guide/index.html | 119 | ||||
-rw-r--r-- | files/sv-se/web/javascript/guide/introduction/index.html | 139 | ||||
-rw-r--r-- | files/sv-se/web/javascript/index.html | 104 | ||||
-rw-r--r-- | files/sv-se/web/javascript/reference/classes/extends/index.html | 172 | ||||
-rw-r--r-- | files/sv-se/web/javascript/reference/classes/index.html | 383 | ||||
-rw-r--r-- | files/sv-se/web/javascript/reference/classes/static/index.html | 179 | ||||
-rw-r--r-- | files/sv-se/web/javascript/reference/index.html | 51 |
7 files changed, 1147 insertions, 0 deletions
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> |