# 🚧 Js - Programmera med javascript

__ author: krm created: 2020-01-09 image: ../../../Image/Slice/cup-of-coffee.png
status: alpha icon: ☕️ __

En enkel introduktion till programmering.

- [Prov](./examination.sv.html)
- 🕺 Hitt har alla uppgifter kontrolleras för denna gång.
- 🔔 Uppgiften laddes till rätt så sent.
- 🍓 Uppgiften är ett bra exempel på något som förekommer ofta.
- 🎖️ Uppgiften anses skärskilt intressant. Oftast svårare uppgifter.
- ⚠️ Uppgiften kan vara svår att lösas p.g.a. tekniska problem t.ex. H1 eftersom
  många många moderna tolkare ger fel svar.

# 1. En översikt över JavaScript

- Varför javascript?
- För det finns över allt
- Enkelt att börja programmer
- Liknande syntax som för andra språk.
- Finns många tillämpningar.
- Historia

# 2. Att komma igång med JS

- W3Schools
- MDN
- Stack Overflow
- Khan academy
- [Introm bok om programmering, vi gör kapitel ett här.](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/up%20&%20going/README.md#you-dont-know-js-up--going)
- 🔗[Programmera i js](https://www.khanacademy.org/computing/computer-programming)
- 🔗 [spelprogrammering.nu](http://spelprogrammering.nu)
- 🔗 [Youtube](https://www.youtube.com/watch?v=mvLdugZHHL8)
- 🔗 [Coding train](https://www.youtube.com/user/shiffman)
- 🎥 [Snake spel](https://www.youtube.com/watch?v=AaGK-fj-BAM)
- 🔗 [Programmeringsproblem](https://htsit.se/p)
- 🔗 [Flems](https://flems.io/)
- Chromebook
- 🔗 [Caret](https://caret.io/)
- 🔗
  [Chroome web store for Caret](https://chrome.google.com/webstore/detail/caret/fljalecfjciodhpcledpamjachpmelml)
- 🔗
  [Text](https://chrome.google.com/webstore/detail/text/mmfbcljfglbokpmkimbfghdkjmjhdgbg)
- 🔗 [Linux beta](https://support.google.com/chromebook/answer/9145439?hl=en-GB)

# 3. Structuren på ett program

- Kod block {}
- Radslut och semikolon.
- Paranteser
- 🔗
  [Paranteser](https://docs.google.com/document/d/1smxIpBAW8PpJc-zwS1jojDzH5gHVhFynl5JQkXf6Bzo/edit?usp=sharing)
- 🔗
  [Hur du löser programmeringsproblem](https://docs.google.com/document/d/1Y2Nhs4OuDrxNeHJGDeXXo9R5NNx33R2twp-1wWl4Q8g/edit?usp=sharing)
- 💚 [VE1](/p/ve1), [VE11](/p/ve11)
- 🔷 [VE21](/p/ve21), [E1](/p/e1)
- ⬛ [N41](/p/N41)
- 🎥 [Space vs. tabs](https://www.youtube.com/watch?v=SsoOG6ZeyUI)

# 4. Olika typer av värden

- byte
- String
- Number
- Boolean
- undefined
- null
- 💚
- 🔷 🔔[VE2](/p/ve2)
- ⬛ [N22](/p/n22), ⚠️[H1](/p/h1)

# 5. Att anropa funktioner

- anrop till funktioner
- parameter
- returnvärde
- sidoeffekter
- defaultvärde
- 🖋
  [Exempel](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4AOiACucGAAI4xAE4RqxCWLQawktKoj1ZAQQAUADwC86ygE9LIQxICUs4BtmzFMYpMVpZp2QBqWWsAbg1WDS0dPQMAITM7CQpbCTinFzcPLx8-AOCwiKi0bV1ifT8AYUSrFLtKjNc-bO9ffyCQ8LRIzTRYYmy4SSgB8yNjBJME6sdZ2a6NIThaWHwoWgBzY08hkcdQyhAZWFi0BB4ARgBmRAAGNg4QTBw8fGo4ARp6RmYeNgBdVhAA)
- 💚 [VE7](/p/ve7), [VE17](/p/ve17)
- 🔷 [VE27](/p/ve27), [E7](/p/e7), [E54](/p/e54), [E77](/p/e77)
- ⬛

# 6. Variabler

- deklarera
- tilldela
- let
- const
- var => undvik
- "use strict"
- konvertera datatype
- 🖋
  [Exempel](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J5YxAASMAHsQD6xDFAkBeCQB0QAJi2aA3OrRC4tWPii0A5gAoZ8xVADUARgCUBtOKlLVEgHIArlgARjAATrYwsgpK7obGpjDmVrZKLu6UIHAwsNTEEPQIPADMiM4A7GwcIJg4ePjUcAI09IzMPGwAuqxAA)
- 🖋
  [Exempel2](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4AOiACucGAAI4xAE4RqxCWLQbgG2MVkZZAXlkAmANwaAbhkWzqR2QDZnFtEIWyARkYDMrjIYA7K6sGjowegZBru563sYADDH0cLSw+FC0AOYAFBgAlMloqemZuZ6FGu5pMBnZOdSFlCAysKoQKXgAjCaIPWwcIJg4ePjUcAI09IzMPGwAuqxAA)
- 💚 🔔[VE2](/p/VE2), [VE12](/p/ve12), [VE32](/p/ve32),
- 🔷 [E21](/p/e21)
- ⬛ 🍓[E31](/p/e31)

🕺

# 7. Att interagera med användaren

- input
- output
- prompt;
- console.log;
- console.error;
- Glöm inte typomvandling!
- Testning
- 🖋
  [Exempel 0](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J5YxAASYcEgLwSADgCdaWBcQAUAHRAA1GFgkATpRIAmAVwD8OgJQBuLWidC4tWPii0A5hukwHShA4GFhqYgh6BB4ABkQAZhiAWjiARgAONg4Qfzx8ajgBGnpGZh42AF1WIA)
- 🖋
  [Exempel 1](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABFDzaAvNoByEJgCMEAJwAUAByswmdqDYA6IAOIJtTMgHNtBCgdPSQAfg8ASiiAbjd6BK1dAA8dIzDtAGptAEZ4+iF6fBhKdmtHWyg0uP4QQkoBKDJhagUABkwAFi6AWk72qRkQRhY2dgF8FRAi9SgJSQBdSSA)
- 🖋
  [Exempel 2](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABGG0BebQDkITAEYIATgAoADpZhNbUawB0QAcQTamZAObaCFA6AILuAJThANyu9EL0+DCU7FYONmDRsVraZgbGphY29o7Obp7evgFBOgBCEZlxwonJqTA2Zg3ZAnkm5lZ2Dk4u7l4+-oHB2gDC9TGNCUkIKZZp1gINWUHaUAAeOoZgAFQAjAAMp9oA1Dknp5cCc-HNS602u1DR-CCElAJQZE02MdMMcAMxSGQgRgsNjsAT4FQgeLqKASSQAXUkQA)
- 🖋
  [Exempel 3](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABIxbaAvNoA6IALJgA5vQj5TAbmP0nQ+vhiV2KSwApTACQRFExAASkd6V3dPbx89BHCXYWiELxhfUwBCU0Tnei1tACcqCCQdIwCgkO0Aal05WqyHJLcPVNji-FKocP4QQkoBKDJktgA2TAAmSakZEHi2dgF8FRBXdSgJSQBdSSA)
- 💚 [VE22](/p/ve22), [VE33](/p/ve33), [E3](/p/e3)
- 🔷 [VE3](/p/ve3), [E2](/p/e2), [E13](/p/e13), [E23](/p/e23), [E52](/p/e52),
  [E53](/p/e53), [E73](/p/e73)
- ⬛ [H17](/p/h17)

# 8. Aritmetik och beräkningar

- Beräkningar!
- % - resten
- Exempel med slumptal för att simulera en tärning.
- Vanliga beräkningar.
- 💚 [VE4](/p/ve4), [VE14](/p/ve14)
- 🔷 [E14](/p/e14), [E22](/p/e22), [E32](/p/e32), [E74](/p/e74)
- ⬛

# 9. Logik med vilkor och jämförelser

- Jämförelser - sant om jämförelsen är sann.
- >, <, <=, >=
- Använd rätt = (tilldelning) eller === (jämförelse)
- Undvik ==
- Olika är !==
- Logiska operator
- || - eller
- && - och
- ! - inte
- Inte ett &, Tex 5 & 12 blir 4.
- Villkor - Sätt ihop jämförelser med logiska operatorer
- 💚 [VE5](/p/ve5), [E44](/p/e44)
- 🔷 [E74](/p/e74), [E84](/p/e84)
- ⬛ [H5](/p/h5), [H15](/p/h15)

# 10. Vilkorsatser

- Att kunna välja väg är centralt
- Kan också kallas grenar(“branch”)
- if
- else
- 🖋
  [Exempel](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J5YxAAQYJAXgkBZDMUL4AThjQATWlgAUASgBUARgAMAbgA6aaxDC7pAHgkAWfRODWJEoXFqx8KFoAc11LEAAJXlpCWnD9a1YJGCg4GA8vH3o-AKDQ8IiYXgBCeMTKEDTYamIIbLwANkRjNg4QTBw8fGo4ARp6RmYeNgBdViA)
- 🖋
  [Exempel2](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J5YxAAQYJAXgkBZDMUL4AThjQATWlgAUASgBUARgAMAbgA6acRIBGcxcrUbteo2atprEMLukAPBIAHBIAZGH2EkHB+hLA1hISQnC0sPhQtADmupYgABK8tIS0efrWrBIwUHAw8YnJ9KnpmTl5+TC8AIRlFZQgtbDUxBBNeADsiMYAtKaIpmwcIJg4ePjUcAI09IzMPGwAuqxAA)
- 🖋
  [Med data från en användare](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABGHr4A7ggBO2gLzaADsZhNLUABQAdEAHEyANwTaWu7QHJLMHxDGGM0fxcASgBuJ3p4smwHPUMTczMLFyCQgzC0aO1geO1tIX0YSnYUAHNnEABlKjltMnxtGEsxaLj6SW1kQiKSsuF8SoRqmDqXAHUbehqAQh74yXj48vGq2vqAIwBPBBWQKP4QQkoBKDIxtgAGTABme6kZEEYWNnYBEPPy9RQCSSAC6kiAA)
- 💚 [E25](/p/e25), [E35](/p/e35)
- 🔷 [E5](/p/e5), [E55](/p/e55), [N15](/p/n15),
- ⬛ [H25](/p/h25)

# 12. Mer om if-satser

- else if
- 🖋
  [Exempel3](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J5YxAAQYJAXgkBZDMUL4AThjQATWlgAUASgBUARgAMAbgA6acRIBGcxcrUbteo2atprEMLukAPBIAHBIAZGH2EkHB+hLA1hISQnC0sPhQtADmupYgABK8tIS0efperBIwUHAwEr7+0SFxCWhJKWkwGdm5IAByAPJDAIRlFVU1da3t9KnpmTl5+TC8oyDl1qyUILWw1MQQs3jBiMbGbBwgmDh4+NRwAjT0jMw8bAC6rEA)
- 💚
- 🔷 [N35](/p/n35), [N45](/p/n45), [N13](/p/n13)
- ⬛

# 13. Loopar

- repetition av kod
- ej goto - ger oss spagetikod.
- for
- 🖋
  [Exempel](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QuwwATgApKUAARlDAXkMAGANzHDAHkMBGa8YDUrgJSHgAHXqHDIXp8GEp2FABzXQAmACoyDys-SX4QQkoBKDJhagVHTEcAVikZEEYWNnYBfBUQIPUoCUkAXUkgA)
- 🖋
  [Exempel 2](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QuwwATgApKUAARlDAXkMBWANzHDAHnMBGa8YDUrgJSHgAHXqHDIXp8GEp2FABzXTIPKz9JfhBCSgEoMmFqBQAGTEcATikZEEYWNnYBfBUQIPUoCUkAXUkgA)
- 🖋
  [Exempel 3](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4wtAE4AKWMQAEEOQF45AJgAMAbgVyAfCoCMAVm0QlEALQGAlHOAAdNHLlC4tWPii0A5lIjXNR1ZKEDgYWGpiCHoEHnVEAGZ1Ng4QTBw8fGo4ARp6RmYeNgBdViA)
- while
- 🖋
  [Exempel 4](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABGW0BebQBYADAG4AOvQDunCggAUegHzaAjCYCU24Fe3ahenwYSnYUAHMnT0t6fzJ9MgBaACYYyX4QQkoBKDJhagUAZkwADkTitykZEEYWNnYBfBUQQPUoCUkAXUkgA)
- 🖋
  [Exempel 5](https://flems.io/#0=N4IghgrgLg9gSgUwDYzAExALgGZiQZwQBoRsBLJBfLAbVADswBbBLEAOgAsomkQSAxjHpQEItiAC+RBs1aYOAK2qDho8QspQABNoDy2gLzbgAHXq6ymbQAYi53fQQAPKNewR6AqGWEAKAEoTB10oTjJ8djIAamiAbhDtACcEKAgkizCIqO0AHm0ARhsE+klzMvpzAHdwyj89didXQKCzC20henwYSnYUAHN6qICSyX4QQkpvXy62IswCgFobTBspGRBGFjZ2AXwVEE71KAlJAF1JIA)
- 💚 [VE6](/p/ve6), [E6](/p/e6), [E46](/p/e46)
- 🔷 [E66](/p/e66), [N16](/p/n16), [N26](/p/n26)
- ⬛ [H6](/p/h6)

# 14. Mer om loopar

- Vi kan ha if-sater i loopar
- 🖋
  [Exempel](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4wtAE4AKWMQAEEALwAGANwK5AHgCMytXIUBqQwEo5wADpoDEMFIgBSbQCY5i93OVnL1g3KFwtLD4ULQA5vYmqlYGrFaslCBwMLDUxBD0CDzOiADsbBwgmDh4+NRwAjT0jMw8bAC6rEA)
- break - stopar en loop.
- 🖋
  [Exempel 2](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4wtAE4AKWMQAEEALwBGANwK5AHmUAGHeoUBqQwEo5wADpo5CsFIgBSZQCY5i93J1nL1m3KFwtLD4ULQA5vYmqlZ+cgBGEjAYANbRvqxWrJQgcDCw1MQQ9Ag8AKyIygC0Oog6bBwgmDh4+NRwAjT0jMw8bAC6rEA)
- Använda variabler i loopar
- 🖋
  [Exempel 3](https://flems.io/#0=N4IgtglgJlA2CmIBcBOATAOgBxoDQgDMIEBnZAbVADsBDMRJEDACwBcxYR8BjAeytbwByECAC+uanQZMAVmR79BwxgB0q6hKwAENATVjaAvNoCMABksBuTfB3NZvZrwD6JAK5hj28zapbtKl5g1w8vE19be3hZN09vSI0qAl4AJwAKAIgEq21sgB5dfVhciABqMoBKbWAo3W8AWRpWZgxUvSheMHTKgCoLPwCAIxMmlraOrp7+xIgCdJptQqxtADJV7SGl7Sxq2qptbQcnUM8Kv0OAeku+KhJeBAxYXgBzdNUQAAlHZw-KvzE2ngsBI8Dy80Wyz26kOQRCcTA5xh2mut3uj2ebw+ADkAPL4gCEfwBQJBYP2h2YMQRSIOKJu-HR8Cer3eXxiRJA-3UYh56nUaIezMxbO+J20BFS8AA1gA3IQkJDaD7aMraMatVK8dxUKDpY7OBGXPSsAwzczVMofACkxIFjKFLKxIGxIV4EqlcoVSpVao1bW1uvScOCRpNZosFtVNrtVEFGNZH0+MQ9MvldyVh196uamsDeqpsTCxuK5stMa5Vi4IFBCG4rAgjJEaCQpgAbOJJCBaPQRBhuCQFCBbspWCJxABdMRAA)
- 💚 [E56](/p/e56), [E16](/p/e16)
- 🔷 [E36](/p/e36), [N6](/p/n6), [N76](/p/n76)
- ⬛ 🎖️[H12](/p/h12), [H13](/p/h13)

# 15. Felsökning

- Läsa felmeddelanden.
- Övningar
- Om felhantering

# 16. Blandade uppgifter

- 💚 [VE23](/p/ve23), [VE43](/p/ve43), [E24](/p/e24), [E15](/p/e15)
- 🔷 [N55](/p/n55), [N65](/p/n65), [N17](/p/n17)
- ⬛ [H14](/p/h14), [H23](/p/h23)

# 17. Mer blandade uppgifter

- 🔗
  [Extra uppgifter och några exempel](https://docs.google.com/document/d/14tibMU0dtN1T9z2Kd--87lQkuBWTH7x1r7sI3sXcK3Q/edit?usp=sharing)
- 💚 [VE17](/p/ve17), [E33](/p/e33)
- 🔷
- ⬛ 🎖️[VH3](/p/vh3)

# 18 Exempel med Expersystem

Gå igenom denna guide och lämna in.

- [Guide till expertsystem](https://htsit.se/a/programing/js/Tutorials/create-a-simple-expert-system.sv.html)