tutorials/sida2.html at master · folkol/tutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Crash Course</title>
    <link rel="stylesheet" href="google-code-prettify/prettify.css">
    <link rel="stylesheet" href="css/sons-of-obsidian.css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="google-code-prettify/prettify.js"></script>
    <script src="js/qunit-1.15.0.js"></script>
    <script src="exercises/sida2.js"></script>
    <script src="tests/sida2.js"></script>
  </head>
  <body onload="prettyPrint()">
    <div class='column'>
      <div class="content">
        <div class="button left"><a href="sida1.html">&lt;&lt;PREV</a></div>
        <div class="button right"><a href="sida3.html">NEXT >></a></div>
        <h1>Mer om Objects</h1>
        <p>Ett JavaScript Object är som sagt en samling properties. En property är ett namn associerat med ett värde.</p>
        <p>Det finns lite övriga sorters properties som inte är relevanta just nu, men är man intresserad så kan man slänga ett öga på <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-8.6">specen</a>.</p>
        <p>Det finns som sagt ett antal olika sätt att skapa JavaScript Objects, alla med sina för- och nackdelar.</p>
        <div class='testcaption'>Skapa några Object:</div>
        <pre class="prettyprint linenums">
var foo = {};
var bar = Object.create(null);
var baz = new Object();</pre>
        <div class='testcaption'>Att tilldela objekten properties:</div>
        <pre class="prettyprint linenums">var foo = new Object();
foo.bar = 2;
foo.baz = "Hello";
foo.qux = {};</pre>
        <div class='testcaption'>Att skapa objekt med properties:</div>
        <pre class="prettyprint linenums">var foo = { bar: "Hello" }; // foo.bar = "Hello";</pre>
        <p>Syntaxen med måsvingarna kallas "Object literal syntax", och är helt enkelt objektet beskrivet i <a href="http://json.org/">JSON-format</a>, med undantaget att namnet på de properties man skapar inte behöver vara inom citattecken.</p>
        <p>Kort sagt så är Object literal syntax en startmåsvinge, sedan ett antal kommaseparerade properties på formen namn:value, och sedan en avslutande måsvinge.</p>
        <p>Object.create tar ett argument, som vi i exemplet ovan sätter till null. Vi kommer att gå igenom vad det är för lustig parameter i en senare övning.</p>
        <p>Man måste inte deklarera properties i förväg, de kan skapas på godtyckligt Object genom att bara tilldela ett värde till en property med ett nytt namn. Detta gäller även diverse Objects som JavaScript-runtimen har gjort tillgängliga för oss att kommunicera med.</p>
        <p>Det finns två sätt att läsa / skriva properties, antingen genom den syntax vi såg ovan, eller genom <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.2.1">square bracket notation</a>. Lägg märke till att namnet inom brackets är en string.</p>
        <p>Om man vet namnet på den property som man vill skriva eller läsa så är det ingen skillnad på dessa två syntaxer, men om man har propertynamnet i en variabel så måste man använda sig av sen senare varianten. Lägg märke till att variabelnamnet inte ska vara inom citattecken, för då menar man ju inte längre variabeln utan "Textsträngen med innehållet 'propName'".</p>
        <div class='testcaption'>Properties, både med dot notation och square bracket notation:</div>
        <pre class="prettyprint linenums">var foo = new Object();
foo.bar = 2;
foo['baz'] = 'Hello';

var propName = 'baz';
foo[propName] = 'Hello, again!';</pre>
        <div class='testcaption'>Test results:</div>
        <div class='testresult' id="qunit"></div>
        <div id="qunit-fixture"></div>
      </div>
    </div>
  </body>
</html>