-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvariablar.html
More file actions
135 lines (111 loc) · 7.38 KB
/
Copy pathvariablar.html
File metadata and controls
135 lines (111 loc) · 7.38 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variablar</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>Variablar</h1>
<ul>
<li><a href="#vad-ar-en-variabel">Vad är en variabel</a></li>
<li><a href="#skapa-en-variabel">Skapa en variabel</a></li>
<li><a href="#variabel-namn">Variabel namn</a></li>
<li><a href="#anvanda-en-variabel">Använda en variabel</a></li>
<li><a href="#andra-en-variabel">Ändra en variabel</a></li>
<li><a href="#variabel-typer">Variabel typer</a></li>
<li><a href="#testa-sjalv">Testa själv</a></li>
<li><a href="#extra">Frivillig extra läsning</a></li>
</ul>
<h2 id="vad-ar-en-variabel">Vad är en variabel</h2>
<p>En variabel är en bit data(text, nummer, osv) som man har gett ett namn för att kunna använda senare. En variabel består av 3 delar,
<strong>typ</strong>, <strong>namn</strong> och <strong>data</strong>.</p>
<p>I andra programmeringsspråk är det vanligt att man behöver säga vilken typ av data det är, i javascript behöver man inte det för javascript vet vilken typ det är automatiskt.
Man använder istället ordet <strong>let</strong>, ibland kan man använda <strong>var</strong> eller <strong>const</strong> men det är överkurs för nu.</p>
<h2 id="skapa-en-variabel">Skapa en variabel</h2>
<p>Här är ett exempel på att skapa en javascript variabel:</p>
<code>let myNumber = 15;</code>
<p>I detta exempel är namnet <code>"myNumber"</code> och datan är 15. Typen är nummer vilket brukar kallas int, men vi behöver inte säga typen i javascript,
vi använder <strong>let</strong> istället.</p>
<h2 id="variabel-namn">Variabel namn</h2>
<p>Det är bra att veta vad man kan ge en variabel för namn. Namnet kan innehålla bokstäver, siffror, understreck, och dollartecken, men kan inte börja på en siffra.
Det finns också vissa namn som javascript redan använder så du kan inte använda dem, ett exempel på detta är var</p>
<p>Exempel på korrekta variabel namn:</p>
<pre>
mittnummer
myVariable123
this$is$a$var
_aVariabel
</pre>
<p>Exempel på felaktiga variabel namn:</p>
<pre>
123myVariabel
var
15
</pre>
<h2 id="anvanda-en-variabel">Använda en variabel</h2>
<p>När du har skapat en variabel kan du sedan använda den med hjälp av namnet. Om vi nu ville skriva ut vårt nummer till konsolen kan vi göra så här:</p>
<code>console.log(myNumber);</code>
<p>Vi kommer till mer sätt att använda variabler i senare kapitel.</p>
<h2 id="andra-en-variabel">Ändra en variabel</h2>
<p>Om du har skapat en variabel och sedan vill ändra den kan det se ut så här:</p>
<code>myNumber = 10;</code>
<p>När variabeln redan finns behöver man inte använda <strong>var</strong> ordet, man behöver bara namnet och den nya datan.</p>
<p>Eftersom javascript inte använder typer på samma sätt som andra språk kan du även ändra din variabel till en helt ny typ så här:</p>
<code>myNumber = "Nu är jag text"</code>
<h2 id="variabel-typer">Variabel typer</h2>
<p>Nu vet du att javascript inte kräver att du skriver typen men alla variabler har fortfarande en typ som javascript håller koll på, den typen bestämmer javascript själv baserat på hur datan ser ut.</p>
<p>Det finns ganska många typer för variabler men vi börjar med 3 stycken: <strong>int(nummer)</strong>, <strong>string(text)</strong>, <strong>boolean(sant/falskt)</strong>.</p>
<h3 id="int">Int</h3>
<p>Int är kort för Integer vilket är heltal på engelska. Alla heltal upp till 2147483647 räknas som int. Negativa tal är också int.
Tal som inte är heltal är inte int, de är en annan typ som kallas float.</p>
<p>Exempel:</p>
<code>let myInt = 20;</code>
<h3 id="string">String</h3>
<p>För att någonting ska bli en string måste det vara inom citattecken <code>"Detta är en string"</code>. Du kan även lägga siffor inom citattecken och så blir det en string istället för en int.
Alla tecken inom citattecken blir en string, inte bara bokstäver.</p>
<p>Exempel:</p>
<code>let myString = "string text här, 123!";</code>
<h3 id="boolean">Boolean</h3>
<p>Detta är en variabel som bara kan ha ett av två värde, true(sant) eller false(falskt).
Detta kan vara bra att för kod brukar ofta kolla om någonting är sant eller falskt.</p>
<p>Exempel:</p>
<code>let isThisTrue = true;</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_variables.asp">https://www.w3schools.com/js/js_variables.asp</a> <br>
<a href="https://www.w3schools.com/js/js_datatypes.asp">https://www.w3schools.com/js/js_datatypes.asp</a> <br>
<a href="https://www.javascript.com/learn/variables">https://www.javascript.com/learn/variables</a>
<h2 id="testa-sjalv">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
data till genom att använda <code>console.log("text eller en variabel här");</code>
kom ihåg om du ska skriva ut en variabel ska du inte använda citat tecken <code>console.log(minVariabel);</code>.</p>
<p>Testa följande utmaningar:</p>
<ol>
<li>Skapa en variabel som har värdet 10, skriv ut den till konsolen</li>
<li>Skapa en variabel som har värdet "hejsan världen" skriv ut den till konsolen</li>
<li>Ändra värdet på en av dina variablar och skriv ut det nya värdet</li>
</ol>
<textarea id="code-editor"></textarea>
<button id="run-button">Run Code</button>
<div id="output"></div>
</main>
<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(`//Använd console.log(); för att skriva ut din data. Kom ihåg att ge din variabel ett namn och att avsluta med semicolon \n//Skapa en variabel med värde 10 här \n\n //Skriv ut den här \n\n //Skapa en variabel med värde "hejsan världen" här \n\n//Skriv ut den här\n\n//Ändra värdet på en av dem \n\n//Skriv ut den igen`);
});
</script>
</body>
</html>