Grundskoleprogrammeringskurs: Skillnad mellan sidversioner
Hakan (diskussion | bidrag) |
Hakan (diskussion | bidrag) |
||
Rad 93: | Rad 93: | ||
* jQuery | * jQuery | ||
* http://www.processing.org | * [http://www.processing.org Processing] är ett eget språk och ett program där man skapar grafik. men det finns också en vriant i javaScript: http://processingjs.org | ||
* https://github.com/mrdoob/three.js/ | * https://github.com/mrdoob/three.js/ | ||
Versionen från 13 maj 2013 kl. 21.39
Lektion 1
Dagens lektion
Material
- Ställ i ordning Datortekniken
- Högtalare
- Mackor
Agenda
- Fika. choklad mm i personalrummet. Mackor Datortekniken.
- Vi presenterar oss kort för varandra
- Varför denna kurs
- Skolans nätverk
- Wikiskola har informationen
- Kursens innehåll
- Fem tillfällen om 90 minuter
- Mest javascript
- Kom gärna med förslag!
Kursinnehåll
- Intro. Kahn Academy
- Variabler
- Loppar
- js i CodeAcademy
- ev. Fortsättning Khan Academy
- Spelprogrammering med js
- Vilkorssatser
- Mer om animationer
- html, css javascript
- Öppet vad innehållet blir
Här nedan följer en lång genomgång av olika övningar på Khan Academy men den är dold tills du klickar på Expand.
Programmering på Khan Academy
Den här platsen är helt webbaserat och kräver inte några program på den egna datorn (utom en browsere). Dessutom ändrar man koden med menyer och ser resultatet direkt.
Börja koda själv!
Logga in med Facebook eller skapa ett konto på Khan på denna plats.
Figuren är uppgbyggd av rektanglar och ellipser.
De har position och storlek. Vi prövar att ändra litet i koden.
Klicka igång instruktionen med play-knappen under koden.
Alla exempel nedan kommer från Khan Academy och avsnittet Tutorials.
Alla program är i javascript. Det finns dokumentation, många förklaringar och du ka nspara dina program.
Här är ett exempel på hur det ser ut när man lär sig programmering på Khan.
Made using: Khan Academy Computer Science.
Animering
Lyssna och titta på instruktionen och testa sedan själv.
Tutorial: Intro to animation
Made using: Khan Academy Computer Science.
Interaktivitet
Interaktivitet är viktigt i spel och underhållning.
Made using: Khan Academy Computer Science.
Interaktiv animering
Detta är ett av de relaterade exemplen på avsnittet om animering ovan.
Made using: Khan Academy Computer Science.
Komplexitet
Ett till synes enkelt spel kan behöva mycket kod.
Detta spel går ut på att undvika kloten. Det är kul i sin enkelhet men det kräver en del av sin programmerare.
If-satser
Made using: Khan Academy Computer Science.
Enligt Terms of Use är Khan fritt att använda enligt: Creative Commons Attribution-NonCommercial-ShareAlike 3.0
Lektion 2
Code Academy
Hur funkar Code Academy?
CodeAcademy är en sajt med interaktiva övningar där du kan lära dig flera olika programmeringsspråk. Det finns kurser i html, CSS, Python, Ruby, Javascript, APIS, mm.. Code Academy är annorlunda än Khan Academy. Den är mindre grafisk och mer inriktad på att du skriver kod.
Du loggar in på Code Academy med Facebook, Google eller Twitter. Sedan kommer CA ihåg vilka övningar du gjort så du kan fortsätta där du slutade gången innan.
I första html-övningen får man förklarat för sig hur man gör när man använder Code Academys sajt. Testa här.
Om du klickar på Me uppe till höger och My Profile kan du se vilka övningar du påbörjat och hur långt du kommit.
Vi ska lära oss javascript
Vi ska göra övningar på CodeAcademys grundkurs i javascript: Du kan börja här. Tanken är inte att hinna hela kursen på en lektion men vi kommer att göra så mycket att du förhoppningsvis vill fortsätta på egen hand.
Javascript och html
Om man vill se direkt hur koden fungerar behöver den finnas i en html-sida. Det kan man göra här. Och fler exempel här.
För lärare
- Tips om hur man som lärare lägger upp kurser. Tips om hur man startar en datorklubb på skolan.
Lektion 3
Javascript och spel
Sajten som följer med boken Spelprogrammering med Javascript heter: http://spelprogrammering.nu
http://browserquest.mozilla.org
Javascriptövningar
Lite Javascript
Html5, CSS3 och Javascript
Html5, CSS3 och Javascript är den nya standarden för hemsidor.
De stora företagen enats. W3C konsortium.
Html står för innehåll och struktur, CSS ger formen och Javascript ger interaktion och animation.
Jobba själv
Det vi ska göra nu tar omkring två lektioner men du får räkna med att jobba lite hemma också.
Vi kommer att använda TextWrangler som är gratisversionen av BBEdeit vilket är ett mycket populärt program att koda i. Fördelen med en speciell editor för kodning är bland annat att den färgmarkerar din kod så att du lättare upptäcker fel. Dessutom håller editorn koll på olika filtyper och extensions som .css, .js, .html mm.
Uppgift |
---|
|
Praktiska tips
- Surfa med Safari
- OM du använder Chrome - Spara som ren html
Javascript med animering
Nu ska vi göra saker som rör på sig.
Uppgift |
---|
|
Javascript: Interaktion med användaren
Nu ska vi göra program där användaren kan styra händelser. På www.spelprogrammering.nu finns det exempel på program som man kan skriva. Det går att skriva alla möjliga olika program.
Vi vill även visa ett halvfärdigt pacman-spel.
Uppgift |
---|
Gör så att pac man rör sig
Idag ska ni få göra ett program som är interaktiv, det vill säga att användaren kan styra det. Här är länkar ni behöver om ni vill titta på Pacman i er egen dator: |
Lektion 4
7: maj
Forts Javascript med Pacman.
lektion 5
Titta på PPT:n.
En förbättrad Pacman med funktioner
Dels i samma fil och dels i en annan fil. Ladda ner dem och prova.
- http://www.wikiskola.se/javascript/function_test.html
- http://www.wikiskola.se/javascript/function_test.js
- http://www.wikiskola.se/javascript/my_own_library.js
Utveckla tillsammans
Vi jobbar med olika förbättringar och avslutar med att kombinera dem till ett spel. Gör dem som functions.
- Genomskinlig bakgrund på bilderna. Och Pacman med stängd mun.
- Kanter och gränser som man inte kan köra igenom. (svår)
- Flera saker att äta
- Två spelare
- gamla svarta bollar ska inte ligga kvar och skräpa.
- Bollarna läggs ut automatiskt
- Bollarna flyttar på sig efter en slumpmässig tid.
Bibliotek
- jQuery
- Processing är ett eget språk och ett program där man skapar grafik. men det finns också en vriant i javaScript: http://processingjs.org
- https://github.com/mrdoob/three.js/
Ställen som liknar Code Academy
- https://developer.mozilla.org/en-US/docs/JavaScript/Guide
- http://www.w3schools.com/js/ W3schools
- http://www.codeavengers.com