SlideShare une entreprise Scribd logo
1  sur  10
Håkan Elderstig
EN INTRODUKTION TILL 
PROGRAMMERING MED JAVASCRIPT 
Exemplen bygger på kod från 
Spelprogrammering.nu 
Allt är CC By SA
PROGRAMMET 
 Strartfunktion = function 
start(){ 
 Variabler 
 Tilldela värde 
 Semikolon 
 Hakparanteser [ ]= Alt () 
 Måsvingar { } = Alt Shift () 
<script 
src="http://spelprogrammering.nu/simple.js"> 
function start() 
{ 
Exempel 
ball = {x: 0, y: 0}; 
} 
function update() 
{ 
clearScreen(); 
if (keyboard.left) { ball.x--; } 
if (keyboard.right) { ball.x++; } 
if (keyboard.up) { ball.y--; } 
if (keyboard.down) { ball.y++; } 
circle(ball.x, ball.y, 50, "red"); 
} 
</script>
VILLKORSSATSER 
Bra för ändra saker 
Ex. att ändra en färg 
<script 
src="http://spelprogrammering.nu/simple.js"> 
function start() 
{ 
ball = {x: 0, y: 0}; 
color = "green"; 
} 
function update() 
{ 
clearScreen(); 
circle(ball.x, ball.y + 50, 30, color); 
ball.x++; 
if(ball.x>= 200){ 
color = "blue"; 
} 
} 
</script>
VILLKORSSATSER 
Bra för interaktion 
Ex. att styra något med 
piltangenterna 
<script 
src="http://spelprogrammering.nu/simple.js"> 
function start() 
{ 
ball = {x: 0, y: 0}; 
} 
function update() 
{ 
clearScreen(); 
if (keyboard.left) { ball.x--; } 
if (keyboard.right) { ball.x++; } 
if (keyboard.up) { ball.y--; } 
if (keyboard.down) { ball.y++; } 
circle(ball.x, ball.y, 50, "red"); 
} 
</script>
LOOPEN 
 En slinga 
 För animeringar 
 För att fånga upp händelser 
 
 function update() 
 For x = 1 to 99 
 While () do 
for (var x = 10; x <= 790; x += 10) 
{ 
circle(x, 200, 4, "orange"); 
} 
while (x <= 700) 
{ 
circle(x, 200, 40, "orange"); 
x += 100; 
}
FUNKTIONER 
Samla ihp bra kod 
De finns i blioteken 
Skapa egna i eget bibliotek 
Lägga dem efter koden 
<script 
src="http://spelprogrammering.nu/simple.js"> 
function start() 
{ 
ball = {x: 0, y: 0}; 
} 
function update() 
{ 
clearScreen(); 
if (keyboard.left) { ball.x--; } 
if (keyboard.right) { ball.x++; } 
if (keyboard.up) { ball.y--; } 
if (keyboard.down) { ball.y++; } 
circle(ball.x, ball.y, 50, "red"); 
} 
</script>
BIBLIOTEK 
 Processing 
 Jespers bibliotek 
 Vad anv de på Khan 
respektive Code Academy 
 Vidareutvecklng av 
spelprogrammering.nu 
 Man kan anropa flera men det 
finns risker
HJÄLP 
Googla om du kör fast. Du hittar 
ofta hjälp på minsta kodsnutt 
eller största problemet 
Exempel
LÄR MER 
Boken Spelprogrammering med 
Javascript samt deras sajt 
W3C 
Wikiskola 
khanAcademy 
Codecademy

Contenu connexe

En vedette

ReDoc - Единое деловое пространство
ReDoc - Единое деловое пространствоReDoc - Единое деловое пространство
ReDoc - Единое деловое пространствоИван Пархоменко
 
Global studies conference Duncan may 2012
Global studies conference Duncan may 2012Global studies conference Duncan may 2012
Global studies conference Duncan may 2012jessicaduncan
 
Prezentacja B2B - SuperPrezenty
Prezentacja B2B - SuperPrezentyPrezentacja B2B - SuperPrezenty
Prezentacja B2B - SuperPrezentyAnia Romanowicz
 
Como ayudar a la víctima y prevención del abuso sexual
Como ayudar a la víctima y prevención del abuso sexualComo ayudar a la víctima y prevención del abuso sexual
Como ayudar a la víctima y prevención del abuso sexualRonald Brandt Silva
 
Austraalia meestele
Austraalia meesteleAustraalia meestele
Austraalia meesteleTuuli Kotov
 
Virtual Disaster Recovery ROI
Virtual Disaster Recovery ROIVirtual Disaster Recovery ROI
Virtual Disaster Recovery ROIJason Dea
 
Introduction tovn splitted
Introduction tovn splittedIntroduction tovn splitted
Introduction tovn splittedNguyen Huy Thach
 
Elevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptElevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptHåkan Elderstig
 
Forewards customer referral programs for ecommerce
Forewards   customer referral programs for ecommerceForewards   customer referral programs for ecommerce
Forewards customer referral programs for ecommerceJason Dea
 
F8 Recap: The Changing Facebook
F8 Recap: The Changing FacebookF8 Recap: The Changing Facebook
F8 Recap: The Changing FacebookUnited Future
 
OpenWest Conference at UVU, Ruby on Rails and BDD
OpenWest Conference at UVU, Ruby on Rails and BDDOpenWest Conference at UVU, Ruby on Rails and BDD
OpenWest Conference at UVU, Ruby on Rails and BDDStephen Felt
 
Weathering and-erosion-
Weathering and-erosion-Weathering and-erosion-
Weathering and-erosion-ranjithtr
 

En vedette (16)

Social Media & Education
Social Media & EducationSocial Media & Education
Social Media & Education
 
ReDoc - Единое деловое пространство
ReDoc - Единое деловое пространствоReDoc - Единое деловое пространство
ReDoc - Единое деловое пространство
 
Global studies conference Duncan may 2012
Global studies conference Duncan may 2012Global studies conference Duncan may 2012
Global studies conference Duncan may 2012
 
Prezentacja B2B - SuperPrezenty
Prezentacja B2B - SuperPrezentyPrezentacja B2B - SuperPrezenty
Prezentacja B2B - SuperPrezenty
 
Avain Green Tourism of Finland GTF® ympäristömerkkiin - 2018
Avain Green Tourism of Finland GTF®   ympäristömerkkiin  - 2018Avain Green Tourism of Finland GTF®   ympäristömerkkiin  - 2018
Avain Green Tourism of Finland GTF® ympäristömerkkiin - 2018
 
Como ayudar a la víctima y prevención del abuso sexual
Como ayudar a la víctima y prevención del abuso sexualComo ayudar a la víctima y prevención del abuso sexual
Como ayudar a la víctima y prevención del abuso sexual
 
Austraalia meestele
Austraalia meesteleAustraalia meestele
Austraalia meestele
 
Designing call
Designing callDesigning call
Designing call
 
Virtual Disaster Recovery ROI
Virtual Disaster Recovery ROIVirtual Disaster Recovery ROI
Virtual Disaster Recovery ROI
 
Pata rat stocktaking visit report june 2011
Pata rat stocktaking visit report june 2011Pata rat stocktaking visit report june 2011
Pata rat stocktaking visit report june 2011
 
Introduction tovn splitted
Introduction tovn splittedIntroduction tovn splitted
Introduction tovn splitted
 
Elevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptElevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning ppt
 
Forewards customer referral programs for ecommerce
Forewards   customer referral programs for ecommerceForewards   customer referral programs for ecommerce
Forewards customer referral programs for ecommerce
 
F8 Recap: The Changing Facebook
F8 Recap: The Changing FacebookF8 Recap: The Changing Facebook
F8 Recap: The Changing Facebook
 
OpenWest Conference at UVU, Ruby on Rails and BDD
OpenWest Conference at UVU, Ruby on Rails and BDDOpenWest Conference at UVU, Ruby on Rails and BDD
OpenWest Conference at UVU, Ruby on Rails and BDD
 
Weathering and-erosion-
Weathering and-erosion-Weathering and-erosion-
Weathering and-erosion-
 

Plus de Håkan Elderstig

Introduktion till material ver 3
Introduktion till material ver 3Introduktion till material ver 3
Introduktion till material ver 3Håkan Elderstig
 
Tävling ekvation, olikhet, algebraiskt uttryck, funktion
Tävling   ekvation, olikhet, algebraiskt uttryck, funktionTävling   ekvation, olikhet, algebraiskt uttryck, funktion
Tävling ekvation, olikhet, algebraiskt uttryck, funktionHåkan Elderstig
 
Problemlosning algebra ma1c np elevlosningar
Problemlosning algebra ma1c np elevlosningarProblemlosning algebra ma1c np elevlosningar
Problemlosning algebra ma1c np elevlosningarHåkan Elderstig
 
Uf mässan stockholm 2017
Uf mässan stockholm 2017Uf mässan stockholm 2017
Uf mässan stockholm 2017Håkan Elderstig
 
Föräldrtamöte om spelande ppt
Föräldrtamöte om spelande pptFöräldrtamöte om spelande ppt
Föräldrtamöte om spelande pptHåkan Elderstig
 
Geo gebra för att synliggöra lärandet mattelyftet uppsala
Geo gebra för att synliggöra lärandet mattelyftet uppsalaGeo gebra för att synliggöra lärandet mattelyftet uppsala
Geo gebra för att synliggöra lärandet mattelyftet uppsalaHåkan Elderstig
 
Quotations from entrepreneurs
Quotations from entrepreneursQuotations from entrepreneurs
Quotations from entrepreneursHåkan Elderstig
 
Elevaktiv formativ bedömning skolporten ppt
Elevaktiv formativ bedömning  skolporten   pptElevaktiv formativ bedömning  skolporten   ppt
Elevaktiv formativ bedömning skolporten pptHåkan Elderstig
 
Mål och visioner förstelärare
Mål och visioner förstelärareMål och visioner förstelärare
Mål och visioner förstelärareHåkan Elderstig
 
Elevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptElevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptHåkan Elderstig
 
Radioaktivitet och halveringstid
Radioaktivitet och halveringstidRadioaktivitet och halveringstid
Radioaktivitet och halveringstidHåkan Elderstig
 

Plus de Håkan Elderstig (20)

Introduktion till material ver 3
Introduktion till material ver 3Introduktion till material ver 3
Introduktion till material ver 3
 
Sammanfattning Ma1c
Sammanfattning Ma1cSammanfattning Ma1c
Sammanfattning Ma1c
 
Bedömning i matematik
Bedömning i matematikBedömning i matematik
Bedömning i matematik
 
Tävling ekvation, olikhet, algebraiskt uttryck, funktion
Tävling   ekvation, olikhet, algebraiskt uttryck, funktionTävling   ekvation, olikhet, algebraiskt uttryck, funktion
Tävling ekvation, olikhet, algebraiskt uttryck, funktion
 
Problemlosning algebra ma1c np elevlosningar
Problemlosning algebra ma1c np elevlosningarProblemlosning algebra ma1c np elevlosningar
Problemlosning algebra ma1c np elevlosningar
 
Uf mässan stockholm 2017
Uf mässan stockholm 2017Uf mässan stockholm 2017
Uf mässan stockholm 2017
 
Föräldrtamöte om spelande ppt
Föräldrtamöte om spelande pptFöräldrtamöte om spelande ppt
Föräldrtamöte om spelande ppt
 
Byggnadsmaterial
ByggnadsmaterialByggnadsmaterial
Byggnadsmaterial
 
Segelbåtskonstruktioner
SegelbåtskonstruktionerSegelbåtskonstruktioner
Segelbåtskonstruktioner
 
Geo gebra för att synliggöra lärandet mattelyftet uppsala
Geo gebra för att synliggöra lärandet mattelyftet uppsalaGeo gebra för att synliggöra lärandet mattelyftet uppsala
Geo gebra för att synliggöra lärandet mattelyftet uppsala
 
Quotations from entrepreneurs
Quotations from entrepreneursQuotations from entrepreneurs
Quotations from entrepreneurs
 
Skala
SkalaSkala
Skala
 
Dice projektet2
Dice projektet2Dice projektet2
Dice projektet2
 
Wordpress på tissto
Wordpress på tisstoWordpress på tissto
Wordpress på tissto
 
Elevaktiv formativ bedömning skolporten ppt
Elevaktiv formativ bedömning  skolporten   pptElevaktiv formativ bedömning  skolporten   ppt
Elevaktiv formativ bedömning skolporten ppt
 
Materialval till en bil
Materialval till en bilMaterialval till en bil
Materialval till en bil
 
Studieteknik matte
Studieteknik matteStudieteknik matte
Studieteknik matte
 
Mål och visioner förstelärare
Mål och visioner förstelärareMål och visioner förstelärare
Mål och visioner förstelärare
 
Elevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning pptElevaktiv formativ bedömning ppt
Elevaktiv formativ bedömning ppt
 
Radioaktivitet och halveringstid
Radioaktivitet och halveringstidRadioaktivitet och halveringstid
Radioaktivitet och halveringstid
 

Att programmera med javascript grunder

  • 2. EN INTRODUKTION TILL PROGRAMMERING MED JAVASCRIPT Exemplen bygger på kod från Spelprogrammering.nu Allt är CC By SA
  • 3. PROGRAMMET  Strartfunktion = function start(){  Variabler  Tilldela värde  Semikolon  Hakparanteser [ ]= Alt ()  Måsvingar { } = Alt Shift () <script src="http://spelprogrammering.nu/simple.js"> function start() { Exempel ball = {x: 0, y: 0}; } function update() { clearScreen(); if (keyboard.left) { ball.x--; } if (keyboard.right) { ball.x++; } if (keyboard.up) { ball.y--; } if (keyboard.down) { ball.y++; } circle(ball.x, ball.y, 50, "red"); } </script>
  • 4. VILLKORSSATSER Bra för ändra saker Ex. att ändra en färg <script src="http://spelprogrammering.nu/simple.js"> function start() { ball = {x: 0, y: 0}; color = "green"; } function update() { clearScreen(); circle(ball.x, ball.y + 50, 30, color); ball.x++; if(ball.x>= 200){ color = "blue"; } } </script>
  • 5. VILLKORSSATSER Bra för interaktion Ex. att styra något med piltangenterna <script src="http://spelprogrammering.nu/simple.js"> function start() { ball = {x: 0, y: 0}; } function update() { clearScreen(); if (keyboard.left) { ball.x--; } if (keyboard.right) { ball.x++; } if (keyboard.up) { ball.y--; } if (keyboard.down) { ball.y++; } circle(ball.x, ball.y, 50, "red"); } </script>
  • 6. LOOPEN  En slinga  För animeringar  För att fånga upp händelser   function update()  For x = 1 to 99  While () do for (var x = 10; x <= 790; x += 10) { circle(x, 200, 4, "orange"); } while (x <= 700) { circle(x, 200, 40, "orange"); x += 100; }
  • 7. FUNKTIONER Samla ihp bra kod De finns i blioteken Skapa egna i eget bibliotek Lägga dem efter koden <script src="http://spelprogrammering.nu/simple.js"> function start() { ball = {x: 0, y: 0}; } function update() { clearScreen(); if (keyboard.left) { ball.x--; } if (keyboard.right) { ball.x++; } if (keyboard.up) { ball.y--; } if (keyboard.down) { ball.y++; } circle(ball.x, ball.y, 50, "red"); } </script>
  • 8. BIBLIOTEK  Processing  Jespers bibliotek  Vad anv de på Khan respektive Code Academy  Vidareutvecklng av spelprogrammering.nu  Man kan anropa flera men det finns risker
  • 9. HJÄLP Googla om du kör fast. Du hittar ofta hjälp på minsta kodsnutt eller största problemet Exempel
  • 10. LÄR MER Boken Spelprogrammering med Javascript samt deras sajt W3C Wikiskola khanAcademy Codecademy