javascriptGuide/string.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</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>String</h1>
        <ul>
            <li><a href="#vad">Vad är en string</a></li>
            <li><a href="#length">Hur många tecken är min string</a></li>
            <li><a href="#concat">Sätta ihop flera strings</a></li>
            <li><a href="func">Javascripts string funktioner</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 string</h2>
        <p>I variabler kapitlet lärde du dig att string är en av de vanligaste variabla typerna. String är text, alla bokstäver, siffror och andra tecken kan vara string.
            <br>En string är alltid i citattecken<b>"string här"</b>, man kan också använda enkla citattecken istället för dubbla <b>‘också en string’</b>.</p>

        <h2 id="length">Hur många tecken är min string</h2>
        <p>Hur många tecken en string har kallas längd. Du kan få längden på din string genom att använda length på detta vis:</p>
<pre>
let exampleText = "här är lite text"
let textLength = exampleText.length;
</pre>
        <p>I detta sammanhang är <b>length</b> någonting som kallas<b> property</b>, det är överkurs för nu, men du kan tänka på dem som ganska liknande till funktioner men du använder inte parentes och kan inte ge den någon data.
            <br>Properties är kopplade till objekt vilket du kommer lära dig om senare.</p>

        <h2 id="concat">Sätta ihop flera strings</h2>
        <p>När man använder nummer(int) så betyder plustecken(+) addition, men när du använder strings betyder det att du sätter ihop två strings till en. Här är ett exempel:</p>
<pre>let hello = "hejsan";
let world = " världen";
let helloWorld = hello + world;
//värdet på helloWorld blir "hejsan världen"
</pre>
        <p>Det är bra att komma ihåg att om du vill ha ett mellanrum behöver det vara med antigen i slutet av den första eller början av den andra strängen. </p>
        <p>Att plustecken fungerar olika på olika typer kan bli förvirrande och leda till fel, ta detta som exempel:</p>
<pre>
let myNum = 10;
let myString = "10"
let result = myNum + myString
</pre>
        <p>När du tittar på detta kanske du tror att resultatet blir 20, det är fel, resultatet blir “1010”. Det som händer är att om en av variablerna är en string och du använder plustecken så tror javascript att allt ska bli string.
            Så den tänker på det som text och inte siffror och sätter ihop dem.</p>

        <h2 id="func">Javascripts string funktioner</h2>

        <p>I funktioner kapitlet så nämnde jag att javascript har många standardfunktioner som du kan använda. Det finns många som används för att hantera strings. Här är en lista på några som är bra att kunna:</p>
        <ul>
            <li><code>toUpperCase()</code> - omvandlar text till stora bokstäver</li>
            <li><code>toLowerCase()</code> - omvandlar text till små bokstäver</li>
            <li><code>substr()</code> - hämtar ut en del av en string</li>
            <li><code>replace()</code> - ersätter en del av en string med en annan string</li>
        </ul>
        <p>En full lista av javascripts string funktioner kan du hitta här: </p>
        <a href="https://www.w3schools.com/jsref/jsref_obj_string.asp">https://www.w3schools.com/jsref/jsref_obj_string.asp</a>
        <br>
        <p>Du använder dessa funktioner genom att skriva variabel namnet, sedan en punkt och sedan funktion namnet. Här är ett exempel:</p>
<pre>
let myString = "Hejsan Världen"
let upperString = myString.toUpperCase();
//värdet på upperString blir "HEJSAN VÄRLDEN"
</pre>
        <p>Denna funktionen <b>toUpperCase()</b> behöver ingen extra data(parameter) så därför är parenteserna tumma. Här är ett exempel på en funktion som behöver parameter:</p>
        <pre>
let myString = "Hejsan Världen"
let extractedString = myString.substr(7)
//värdet på extractedString blir "Världen"
</pre>
        <p>I detta exempel så hämtar vi ut en del av vår string, den parameter vi skickar med är var vi ska börja hämta från. Så vi börjar hämta från tecken nummer 7 och hämtar resten av texten så vi får “världen”. (Vissa funktioner börjar räkna från 0 istället för 1 vilket kan bli förvirrande)</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://www.w3schools.com/jsref/jsref_obj_string.asp">https://www.w3schools.com/jsref/jsref_obj_string.asp</a>

        <br> <a href="https://www.freecodecamp.org/news/javascript-string-tutorial-string-methods-in-js/">https://www.freecodecamp.org/news/javascript-string-tutorial-string-methods-in-js/</a>

        <br> <a href="https://javascript.info/string">https://javascript.info/string</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 variabel som är två strängar ihopsatta</li>
    <li>Lägg längden av din variabel i en ny variabel</li>
    <li>Skapa en string och omvandla sedan alla bokstäver till små bokstäver</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 variabel som är två strängar ihopsatta\n\n//Få längden av en string\n\n//Omvandla till små bokstäver`);

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