javascriptGuide/if-else.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
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>If-Else</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>If-Else</h1>

        <ul>
            <li><a href="#vad">Vad är if-else</a></li>
            <li><a href="#jamfora">Jämföra värde</a></li>
            <li><a href="#else-if">If-Else</a></li>
            <li><a href="operators">Logical Operators</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 if-else</h2>
        <p>Det är vanligt i programmering att man vill köra någon kod beroende på ett vilkor. Man kanske vill köra någon kod om en siffra är högre än 100 eller om en text matchar ett specifikt ord.
            Detta kan man göra med if-else, tänk på det som att säga om(if) denna saken händer gör detta, annars(else) gör en annan sak.
           <br> Här är ett exempel på if-else kod:
            </p>
            <pre>
if(myNum == 10){
    console.log("Ditt nummer är 10");
}else{
    console.log("Ditt nummer är inte 10");
}
</pre>
            <p>Med denna kod kollar vi om variabeln myNum har värdet 10, sedan skriver vi ut text beroende på om det är sant eller inte. Koden i parentesen är det vi kollar om det är sant och koden inom dessa <b>{}</b> är där koden är för om det är sant.
                <br>Du kanske undrar varför vi har två likhetstecken, det lär du dig om i nästa del
                </p>
        <h2 id="jamfora">Jämföra värde</h2>
        <p>Det finns flera sätt du kan jämföra värde som du kan använda i din if-else kod, här är en lista med vilka tecken du använder:</p>

        <ul>
            <li><code>==</code>  Jämför om två värden är samma</li>
            <li><code>===</code> Nästan samma som ovan men det kollar också om typerna är samma, oftast används denna</li>
            <li><code>!=</code>  Jämför om två värden <b>inte</b> är samma</li>
            <li><code>></code>   Kollar om första värdet är större än andra värdet</li>
            <li><code><</code>   Kollar om första värdet är mindre än andra värdet</li>
            <li><code>>=</code>  Kollar om först värdet är större eller lika med andra värdet</li>
        </ul>
        <p>Anledningen till att vi använder två likhetstecken är eftersom ett likhetstecken är det vi använder när vi skapar variabler och annat så det är redan taget. Detta är viktigt att komma ihåg, om du använder bara ett i din if-else kod kan det bli helt fel.</p>

        <h2 id="else-if">Else if</h2>
        <p>Det är möjligt att du vill kolla om någonting är sant och sedan kolla om någonting annat är sant, detta kan du göra med <b>else if</b>. Här är ett exempel:</p>
        <pre>
if(myNum > 10){
    console.log("Din siffra är över 10");
}else if(myNum < 10){
    console.log("Din siffra är under 10");
}else{
    console.log("Din siffra är exakt 10");
}
</pre>
        <p>Här kollar vi först om vår variabel är över 10, sedan om det inte är sant så kollar vi i vår else-if om vår variabel är under 10. Om båda dessa två är falskt, då går vi  till vår else och vi vet att siffran är exakt 10. </p>
        <p>Denna koden hade kunnat vara fel eftersom det är möjligt att vår variabel inte ens är en siffra, då kommer vår if vara falsk och vi skriver att siffran är 10, vilket då är fel. Du hade kunnat fixa detta genom att lägga till en till else if som kollar om siffran är lika med 10.</p>

       <h2 id="operators">Logical Operators</h2>
        <p>Ibland behöver man lite extra när man kollar om någonting är sant, då kan du använda dessa tecken:</p>

        <ul>
            <li><b>&&</b> - Med detta kan du kolla om mer än en sak är sant, skriv dessa mellan två påstående och om både är sant så räknas det som sant, om bara ett är sant räknas det som falskt</li>
            <li><b>||</b> - Dessa är liknande men här behöver bara ett påstående vara sant för att det ska räknas som sant.</li>
            <li><b>!</b> - Detta gör att du får motsatt resultat till vad det var innan, så sant blir falskt och falskt blir sant.</li>
        </ul>
        <p>Här är lite exempel:</p>
<pre>
if(myNum > 10 && myNum < 30){
    console.log(“nummer är mer än 10 och mindre än 30”);
}
if(myNum > 10 || mySecondNum > 10){
    console.log("åtminstonde ett av mina nummer är över 10 ”);
}
if(!myNum > 10){
    console.log(“Mitt nummer är INTE mer än 10”);
}
</pre>
        <p>Du kan kombinera dessa på många olika sätt och du kan ha med matematik du lärde dig innan. Du kan vara mycket kreativ. Man kan använda parenteser för att separate om det blir för mycket, t:ex</p>
        <code>if( (myNum > 10 && myNum < 30) || !(myNum == 10) )</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_if_else.asp">https://www.w3schools.com/js/js_if_else.asp</a>

        <br><a href="https://www.w3schools.com/js/js_comparisons.asp">https://www.w3schools.com/js/js_comparisons.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>Skriv if-else kod som kollar om en sträng är lika med "hejsan"</li>
    <li>Skriv if-else kod som först kollar om en siffra är mer en 10 och sedan kollar om en sträng är lika med hejsan</li>
    <li>Skriv if-else kod som kollar om en siffra multiplicerade med 10 är mer än 50</li>
    <li>Skriv if-else kod som kollar om längden på en sträng är längre än 10</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(`//Kolla om sträng har värdet "hejsan"\n\n //Kolla om siffra är mer än 10 och sedan om sträng är lika med hejsan \n\n //Kolla om siffra multiplicerad med 10 är mer än 50 \n\n//Kolla om längden på en sträng är längre än 10, läs string kaptiltet om du fastnar\n\n `);

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