javascriptGuide/events.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</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>Events</h1>

        <ul>
            <li><a href="#vad">Vad är Events</a></li>
            <li><a href="#kod">Kod Exempel</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 Events</h2>
        <p>Ofta vill du att Javascript kod ska köras när någonting specifikt händer, då behöver du använda Events(händelser). Några av dessa event kan vara: sidan laddas in, användaren trycker på en knapp, ett formulär fylls i, användaren trycker på tangentbordet. </p>

        <h2 id="kod">Kod Exempel</h2>
        <p>Det finns några olika sätt att skriva koden som hanterar events, men jag tror den du kommer se mest ser ut så här:</p>
        <pre>
let myButton = document.getElementById("myButton");
function knappFunktion(){
    console.log("Någon tryckte på knappen");
}
myButton.addEventListener("click", knappFunktion);
</pre>
        <p>I denna kod så skapar vi en variabel som håller en html button med id "myButton". Vi använder en funktion som heter addEventListener(), denna funktion säger till javascript att den ska kolla efter ett event på detta html element. Den parameter denna funktion behöver är vilken typ av event den ska kolla efter och en funktion som ska köras när det händer.
        </p>
        <p>
        I detta exempel så har vi skapat en funktion tidigare som heter knappFunktion och det är den som kommer köras, det finns ett annat sätt att skriva detta om du inte redan har en funktion:
        </p>
        <pre>
let myButton = document.getElementById("myButton");
myButton.addEventListener("click", new function(){
    console.log("Någon tryckte på knappen");
});
</pre>
        <p>Denna kod kommer att göra exakt samma sak men vi skapar en funktion utan ett namn som bara används för just detta. Detta sättet att skriva är ganska vanligt.</p>
        <p>Det går också att göra samma sak men att göra det i ditt html element, det ser ut så här:</p>
        <code>&#60;button onclick="KnappFunktion()">Klicka mig&#60;/button></code>
        <p>Detta fungerar lika bra, det handlar om hur du vill göra det och tycker är enklast att hålla koll på.</p>
        <p>Man vill ofta att någon kod ska hända när sidan har laddats, det gör man så här:</p>
        <code>window.addEventListener("load", myLoadFunction);</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_events.asp">https://www.w3schools.com/js/js_events.asp</a>

        <br> <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events">https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events</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>Nedan finns en knapp med id myButton, skriv ut lite text när någon trycker på denna knap</li>
    <li>Nu lägg till så att när man trycker på knappen så ändras knappens färg, kom ihåg vad du lärde dig i förra kapitelet</li>
</ol>
        <textarea id="code-editor"></textarea>
        <button id="run-button">Run Code</button>
        <button id="myButton">knapp med id myButton</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(`//Skriv ut lite text när någon trycker på knappen\n\n//Ändra färg på knappen när man trycker(knappen har id myButton)`);

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