javascriptGuide/loops.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loops</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>Loops</h1>

        <ul>
            <li><a href="#vad">Vad är en loop</a></li>
            <li><a href="#for">for loop</a></li>
            <li><a href="#while">while loop</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 loop</h2>
        <p>Loops är ett sätt att köra lite kod om och om igen till du tycker den är klar och ska sluta. Detta är väldigt vanligt att behöva göra med arrays. Det finns flera olika sorters loops i javascript men det finns två som är vanligast, "for loop" och "while loop".</p>
        <ul>
            <li><b>for</b> - När du skapar en for loop så skapar först en int variabel som börjar på en siffra. Sedan säger du när den ska fortsätta loopa och till sist säger du vad siffran ska öka med varje loop. En enkel version hade kunnat vara, börja på 1, öka med 1 varje loop, sluta när du har kommit till 5.</li>
            <li><b>while</b> - En while loop är ganska lik if kod som du lärde dig om innan. Du säger om(if) detta är sant, fortsätt loopen och när det inte är sant längre så slutar loopen.</li>
        </ul>
        <h2 id="for">for loop</h2>

        <p>För någon som aldrig sett en for loop innan kan den se konstig och förvirrande ut, jag visar ett exempel och förklarar efteråt:</p>
        <pre>
//En for loop som skriver ut 0-9
for(let i = 0; i < 10; i++){
    console.log(i);
}
</pre>
        <p>Du kan se att denna loopen är väldigt kort och kompakt. Som jag nämnde innan, behöver du göra 3 saker i din for loop och det är ett semikolon mellan varje sak du gör.</p>
        <ol>
            <li>Skapa en int variabel som börjar på en siffra. I vårt exempel ovan så skapar vi en variabel som heter i och som har är siffran 0. Den måste inte heta i och den måste inte börja på 0.</li>
            <li>Sedan säger du när loopen ska fortsätta. I vårt exempel säger vi att loopen ska fortsätta så länge vår variabel i är mindre än 10(i < 10). Denna loop kommer inte skriva ut 10 eftersom symbolen <b><</b>  är bara sant om det är under 10, inte om det är lika med. Du hade kunnat använda <b><=</b> för att fixa det.</li>
            <li>Till sist säger vi hur mycket i ska öka med varje loop. I vårt exempel vill vi att den ska öka med ett varje loop(i++), detta kanske du kommer ihåg från integer kapitlet. Det hade varit möjligt att öka med mer än 1 så här i+=3. Det såg du också i integer kapitlet.</li>
        </ol>
        <p>Dessa tre saker ligger i en parentes och sedan lägger du koden som ska köras varje loop i dessa {}. I din loop kan du nu använda variabeln som du skapade, den heter i i vårt exempel. Det är ett vanligt namn på den när du gör en for loop. </p>
        <p>Här är ett extra exempel som visar hur du kan använda for loop med en variabel:</p>
        <pre>
let fruits =  ["äpple", "päron", "apelsin"];
for(let i = 0; i < fruits.length; i++){
    console.log("Positionen är " + i);
    console.log("Frukten är " + fruits[i])
}
</pre>
        <p>I detta exempel så börjar vi på 0 och går igenom hela vår array genom att kolla om i är mindre än längden. I varje loop går vi igenom ett  värde i vår array så att vår variabel har positionen för frukten. Vi använder fruits[i] för att få den frukten vi är på just då.</p>

        <h2 id="while">while loop</h2>

        <p>En while loop är lite enklare att förstå, vi kollar om någonting är sant och fortsätter tills det slutar vara sant, här är ett exempel:</p>
<pre>
//En while loop som skriver ut 0-9
let i = 0;
while(i < 10){
    console.log(i);
    i++;
}
</pre>
        <p>I detta exempel är vår variabel skapad utanför vår while loop, till skillnad från en for loop. I varje loop kollar den om <b>i < 10</b> fortfarande är sant och slutar så fort det inte är sant. Strukturen på en while loop är precis som if kod, du behöver inte förstå något extra som i for loop. </p>
        <p>En viktigt sak att komma ihåg med en while loop är att om du skriver fel så är det möjligt att den aldrig slutar loopa. Detta kallas en infinite loop(oändlig loop) och kommer att krascha hela ditt program. Detta hade hänt till exempel om vi tog bort raden <b>i++;</b> i ovan exempel. Då hade vår variabel aldrig ökat och hade alltid varit 0 och därför alltid mindre än 10. Var försiktig med detta.</p>
        <p>Här är ett extra exempel med while loop och array:</p>
<pre>
let fruits =  ["äpple", "päron", "apelsin"];
let i = 0;
while(i < fruits.length){
    console.log("Positionen är " + i);
    console.log("Frukten är " + fruits[i])
}
</pre>
        <p>Som du kan se så kan man använda de olika looparna för samma uppgift, det är upp till dig att bestämma vilken loop som passar bäst för vad du vill åstadkomma.</p>

        <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://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration</a>

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

        <br> <a href="https://www.w3schools.com/js/js_loop_for.asp">https://www.w3schools.com/js/js_loop_for.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 for loop som ökar med 2 varje loop</li>
    <li>Skapa en while loop som bara loopar igenom en halv array</li>
    <li>Skapa en for loop som print baklänglse(börjar högt och går ner)</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 for loop som ökar med 2\n\n//Skapa while loop som loopar igenom en halv array \n\n//Skapa en for loop som printar baklänglse, tips: sätt variablen till något högre än 0, använd i-- `);

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