Programmeringskursen 2013

Lektion 1

Dagens lektion

Material

• Ställ i ordning Datortekniken
• Högtalare
• Mackor

Agenda

1. Fika. choklad mm i personalrummet. Mackor Datortekniken.
2. Vi presenterar oss kort för varandra
3. Varför denna kurs
   1. Mina första datorer
4. Skolans nätverk
5. Wikiskola har informationen
6. Kursens innehåll
   1. Fem tillfällen om 90 minuter
   2. Mest javascript
   3. Kom gärna med förslag!

Kursinnehåll

1. Intro. Kahn Academy
   1. Variabler
   2. Loppar
2. js i CodeAcademy
   1. ev. Fortsättning Khan Academy
3. Spelprogrammering med js
   1. Vilkorssatser
   2. Mer om animationer
4. html, css javascript
5. Ö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.

Keep Away From Balls

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

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

Skaffa editeringsprogrammet TextWrangler från App Store. Lägg alla filer i en och samma mapp på din dator. Spara rita.js, library.js och rita.html i en mapp på din dator och verifiera att det funkar. Ändra inte namn på filerna Använd den här sidan att pröva på: http://www.wikiskola.se/javascript/rita.html koden: http://www.wikiskola.se/javascript/rita.js samt en libraryfil: http://www.wikiskola.se/javascript/library.js Pröva att ändra några mått och lägen för de geometriska figurerna i javascriptfilen rita.js. Spara. Titta hur det blev genom att öppna html-filen i Safari. Ha gärna Wrangler och Safari i två fönster bredvid varandra på skärmen. Rita en bakgrundsbild med cirklar, rektanglar och streck. Rita en liten figur som du kan använda i framtida animeringar och spel. Låt figuren vandra över skärmen.

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
Som vanligt har vi förberett några filer. Lägg filerna i samma mapp som tidigare. Spara ner http://www.wikiskola.se/javascript/rita2.js Bild på en groda Ändra i html-filen så att du anropar rita2.js Gör så att grodan rör sig. Få den att stanna i rutan. Få bort spåret som den lämnar efter sig. Byt till en annan figur Lägg in en stor bild som bakgrund. Testa att låta figuren färdas i andra banor.

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: http://wikiskola.se/javascript/Pacman.html http://wikiskola.se/javascript/pacman.js Höger Vänster Upp Ner

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 enligt Wikipedia: "Det används av nästan 35% av de 1 000 000 mest besökta hemsidorna och är just nu det populäraste JavaScript-biblioteket.".
  • ladda ner från: http://jquery.com
• 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 . Processing är avancerat och tar ett tag att lära sig. Programmet upptar drygt 10 000 rader kod.
• https://github.com/mrdoob/three.js/

Ett ställe som liknar Code Academy

• http://www.codeavengers.com

Tutorials

• https://developer.mozilla.org/en-US/docs/JavaScript/Guide
• http://www.w3schools.com/js/ W3schools
• http://www.webteacher.com/javascript/

HTML5 och CSS

Pragmatisk En webbplats med pragmatisk inriktning mot html och CSS. Med stöd från internetfonden.

Böcker mm

• http://eloquentjavascript.net

Fortsättning

Inför programmeringskursen på TIS

en interaktiv javakurs