-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
114 lines (100 loc) · 7.17 KB
/
intro.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guide - Page 1</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<main>
<h1>Intro</h1>
<ul>
<li><a href="#var-ar-javascript">Vad är javascript</a></li>
<li><a href="#front-end">Javascript är ett front-end språk</a></li>
<li><a href="#semikolon">Avsluta kod med semikolon</a></li>
<li><a href="#kommentarer">Kommentarer</a></li>
<li><a href="#case-sensitive">Stor Bokstav är inte samma som liten bokstav</a></li>
<li><a href="#inspect">Inspektera en hemsida</a>
<li><a href="#fastnar">Vad gör man när man fastnar</a></li>
<li><a href="#extra">Frivillig extra läsning</a></li>
</ul>
<h2 id="var-ar-javascript">Vad är Javascript</h2>
<p>
Javascript är ett programmeringsspråk som används av (nästan) alla
hemsidor i världen. Javascript kommer med i webbläsare så man behöver
inte installera det. <br />
<br />Javascript används tillsammans med HTML och CSS för att skapa
hemsidor. Man kan säga att HTML lägger strukturen på hemsidan, CSS gör
sidan fin och Javascript gör att man kan interagera med hemsidan. <br />
<br />Alla programmeringsspråk ser ganska lika ut men har vissa
skillnader, om man kan ett språk så har man en bra start för att lära
sig andra. Några saker som alla språk använder sig av är till exempel
variabler, loopar, villkor, händelse, operator, funktioner och mer. Alla
dessa förklarar jag i detta dokument. <br />
</p>
<h2 id="front-end">Javascript är ett front-end språk</h2>
<p>
Man kan dela upp programmeringsspråk i front-end eller back-end. <br />
<br />Backend språk används av en server som ofta är kopplat till en
databas. Den hämtar data från databasen och skickar den till
klienten(den som använder hemsidan eller programmet). Om du är på en
sida så har du inte tillgång till backend-koden, den finns på en server
av den som äger hemsidan. <br />
<br />Frontend språk är inte kopplade till databasen, den får data från
backend och visar det till användaren. Ett frontend språk ligger inte på
servern, den ligger på användarens dator. När du använder en hemsida så
är det din dator som har fått en javascript fil och läser den, du har
full tillgång till javascript koden. <br />
<br />Det är faktiskt möjligt att använda javascript som backend språk
med något som heter node.js, men det är överkurs.
</p>
<h2 id="semikolon">Avsluta kod med semikolon</h2>
<p>
I Javascript så avslutar man en bit kod med ett semikolon(;). Detta
berättar för datorn att denna delen av koden är klar och nästa del
kommer börja. Det är väldigt vanligt att när man har problem i
javascript så har man glömt ett semikolon så se upp efter det om koden
inte funkar.
</p>
<h2 id="kommentarer">Kommentarer</h2>
<p>I din Javascript kod kan du lämna kommentarer. En kommentar kommer inte att köra någon kod utan är bara för den som läser din kod och vill förstå vad som händer. Det finns två sätt att skriva kommentarer antigen med två snedstreck
<br> <code> // Detta är en kommentar</code>
<br>Eller omringa med ett snedstreck och en stjärna
<br>
<pre>
/*
Detta är en kommentar
Detta är fortfarande en kommentar
*/
</pre>
</p>
<h2 id="case-sensitive">Stor Bokstav är inte samma som liten bokstav</h2>
<p>Javascript är ett språk som är “case sensitive", det betyder att ett namn som har stora bokstäver kommer vara annorlunda från samma namn med små bokstäver. Därför är det viktigt att hålla koll på små och stora bokstäver i din kod.
<br> Till exempel: <b>Hejsan</b> är inte samma som <b>hejsan</b> </p>
<h2 id="inspect">Inspektera en hemsida</h2>
<p>Något du kanske känner till är att på alla sidor kan du högerklicka och sedan trycka på “inspect”, detta öppnar ett nytt fönster på höger sida. Här kan du se mycket information om en sida och det är uppdelat i olika tabbar(elements, console, sources, osv).
<br> <b>Elements</b> är där du kan se html koden för den sidan vilket ofta kan vara användbart. Du kan hitta id och klasser för olika html element som du sedan kan använda javascript för att ändra.
<br> <b>Console</b> är där du kan hitta felmeddelande om det finns några eller om det är fel på din javascript kod. Det är också möjligt att skriva ut information till denna konsol vilket är ofta användbart. Koden för det ser ut så här: <code>Console.log(“Detta skrivs ut i konsolen”); </code>
<br> <b>Sources</b> är där du kan se all front-end kod. Detta inkluderar HTML, CSS, Javascript, bilder, mm. Det kan vara bra om du vill lära dig från någon annans Javascript kod.</p>
<h2 id="fastnar">Vad gör man när man fastnar</h2>
<p>Alla programmerare har tider då någonting går fel och man håller på att bli galen. Det finns flera sätt att försöka fixa detta. Här är några länkar som kan hjälpa i sådana situationer:
<ul>
<li> <a href="www.google.com">www.google.com</a> - Det är väldigt vanligt att använda google för att söka på problemet</li>
<li> <a href="https://stackoverflow.com/">https://stackoverflow.com/</a> - När man söker på google är det stor chans att man hamnar på denna hemsida, det är en sida för programmerare att ställa frågor och få svar </li>
<li> <a href="https://chatgpt.com/">https://chatgpt.com/</a> - På sistånde har AI blivit ett stort ämne, en av sakerna AI är bäst på är programmering. Skriv en fråga precis som du hade frågat en människa och var inte rädd att ställa uppföljningsfrågor </li>
<li> <a href="https://www.w3schools.com/js/">https://www.w3schools.com/js/</a> - Denna sida har mycket bra info om javascript och på vänster sida kan du välja den exakta delen av javascript du har problem med för att lära dig mer. </li>
</ul>
Om ingenting annat fungerar så rekommenderar jag att ta en paus och göra någonting annat ett tag så din hjärna kan jobba på det i bakgrunden, när du kommer tillbaka kanske du vet exakt hur du ska göra.
</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://en.wikipedia.org/wiki/JavaScript">https://en.wikipedia.org/wiki/JavaScript</a> <br>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">https://developer.mozilla.org/en-US/docs/Web/JavaScript</a> <br>
<a href="https://www.w3schools.com/js/">https://www.w3schools.com/js/</a>
<hr>
</main>
<div id="navContainer"></div>
<script src="codeEditor.js"></script>
</body>
</html>