diff options
Diffstat (limited to 'files/sv-se/learn')
| -rw-r--r-- | files/sv-se/learn/index.html | 121 | ||||
| -rw-r--r-- | files/sv-se/learn/javascript/index.html | 66 | ||||
| -rw-r--r-- | files/sv-se/learn/javascript/objects/index.html | 54 | ||||
| -rw-r--r-- | files/sv-se/learn/javascript/objects/object-oriented_js/index.html | 284 |
4 files changed, 525 insertions, 0 deletions
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> |