javascriptGuide/array.html at master · joipoi/javascriptGuide · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrays</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/theme/monokai.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <main>
        <h1>Arrays</h1>

        <ul>
            <li><a href="#vad">Vad är en array</a></li>
            <li><a href="#anvanda">Använda arrays</a></li>
            <li><a href="#func">Array funktioner</a></li>
            <li><a href="#length">Array Length</a></li>
            <li><a href="#extra">Frivillig extra läsning</a></li>
            <li><a href="#testa">Testa själv</a></li>

        </ul>

        <h2 id="vad">Vad är en array</h2>
        <p>En array är en variabel typ, det är en variabel som istället för att hålla ett värde, håller en lista av värde. Här är två exempel på hur en array kan se ut i javascript:</p>
<pre>
let fruits = [“äpple”, “apelsin”, “päron”];
let numbers = [5, 10, 15, 20];
</pre>
        <p>Alla värde i en array är inom fyrkantiga parenteser [] och det är ett komma mellan varje.
            Du kan använda vilka variabeltyper som helst i din array, sträng, int och boolean fungerar alla bra.
            </p>

        <h2 id="anvanda">Använda arrays</h2>
        <p>Alla värden i en array har en position, den börjar på 0 och går upp en i taget. I vår fruits array ovan så hade det blivit: äpple 0, apelsin 1, päron 2. Det kan skapa förvirring  att positionen börjar på 0 istället för 1, detta är något du måste komma ihåg, det är lätt att glömma.
            Du kan använda denna position för att få värdet, på detta sätt:
            </p>
<pre>
console.log(fruits[0]); //skriver ut äpple
console.log(fruits[2]); //skriver ut päron
</pre>
        <p>Det är vanligt att du vill gå igenom alla värde i en array och göra något med varje, detta kommer du lära dig om i nästa kapitel “Loops”.
            Du kan ändra värde i en array på samma sätt som en variabel:
            </p>
        <code>fruits[1] = grapefrukt;</code>
        <p>Nu är värde på position 1 grapefrukt istället för apelsin.</p>
        <h2 id="func">Array funktioner</h2>
        <p>Det finns en mängd inbyggda javascript funktioner som man kan använda på arrays. Här är en lista på några av de vanligaste</p>
        <li><b>push()</b> - Lägger till ett värde till arrayen(på sista position)</li>
        <li><b>pop()</b> - Tar bort värdet på sista positionen</li>
        <li><b>sort()</b> - Sorterar en array(Fungerar bra på strings, är lite mer komplicerat för int)</li>
        <li><b>toString()</b> - Omvandlar en array till en sträng </li>

        <h2 id="length">Array length</h2>
        <p>Precis som med strängar så kan du använda length för att få längden på en array. Detta är igen inte en funktion, det är en property, men du har inte lärt dig om property än.
            Du kan använda detta om du till exempel vill skriva ut det sista värdet i din array. Men kom ihåg att positioner börjar på 0 vilket gör det svårare, se här:
            </p>
<pre>
Let fruits = ["äpple", "päron"];
console.log(fruits.length); //skriver ut 2
console.log(fruits[fruits.length]); //Ger ett felmedelande
</pre>
        <p>I din fruits array här så är äpple 0 och päron 1. Position 2 finns inte, så det blir fel om du försöker skriva ut den. Det du behöver göra är att ta en mindre än längden, då får du sista värdet:</p>
        <code>console.log(fruits[fruits.length-1]);</code>


        <h2 id="extra">Frivillig extra läsning</h2>

        <p>Här kan du gå djupare in i detta kapitlet om du vill:</p>

        <a href="https://www.w3schools.com/js/js_arrays.asp">https://www.w3schools.com/js/js_arrays.asp</a>

        <br><a href="https://www.w3schools.com/js/js_array_methods.asp">https://www.w3schools.com/js/js_array_methods.asp</a>

        <h2 id="testa">Testa själv</h2>
        <p>Nu är det din tur att testa själv. Du kan skriva din kod här under och det finns även en konsol som du kan skriva ut till
<p>Testa följande utmaningar:</p>
<ol>
    <li>Skapa en array med strängar</li>
    <li>Skriv en array med ints</li>
    <li>Skriv ut det sista värdet i din array av strängar</li>
    <li>Ändra första värdet på din array av ints och skriv sedan ut det</li>
</ol>
        <textarea id="code-editor"></textarea>
        <button id="run-button">Run Code</button>
        <div id="output"></div>
    </main>
    <br>
   <div id="navContainer"></div>

    <script src="codeEditor.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const editor = new CodeEditor("code-editor", {
                outputId: "output",
                runButtonId: "run-button"
            });
            editor.setValue(`//Skapa en array med strängar\n\n//Skapa en array med ints \n\n//Skriv ut det sista värdet av din sträng array, kom ihåg hur du kan använda length för detta \n\n//Ändra första värdet på din int array och skriv ut sedan ut det\n\n `);

        });
    </script>
</body>
</html>