Javascript - Introduktion

Beskrivning av blockets innehåll

Vi lär oss grunderna i javascript på spelprogrammering.nu.

Uppgifter i javascriptavsnittet

• Intro med Logo Turtle
• En rörlig boll
• Ett ritprogram att utveckla
• Ett eget projekt

Bedömning - intro till javascript

Du blir bedömd på

• ditt vidareutvecklade ritprogram
• ditt egna projekt

Ladda upp det på klassens wordpress

Använd FileZilla

Logga in med användare javascript så hamnar du i mappen med samma namn

Döp din fil med ditt namn

Ladda upp filen

Kolla vad den har för adress och prova att du kan hitta den genom att skriva in adressen (URL:en) i din browser.

Tag den adressen och skapa en länk på din sida på Wordpressajten

Bedömningskriterier - intro till javascript

E: Du använder metoder, loopar, villkorssatser, variabler

C: Strukturerad kommenterad kod

A: Egna finesser eller utveckling

De kommande sidorna är inbäddade övningar som även används på annat håll.

Scratch som introduktion

Kodboken.se

En första lektion med Turtle

Intro till Turtle Logo programmering

• Turtle på skärm

http://logo.twentygototen.org

Exempel på kommandon

RT 100

LT 90

Repeat 8 [ ]

Du hittar fler exempel i underkant av sidan.

Snygg blomma

repeat 8 [ fw 100 rt 90 fw 50 rt 90 fw 30 rt 45 fw 60 ]

Annat exempel som är en förenkling av exempel från sidan

clear make "r 1 repeat 36 [ COLOR [:r 12 12] fw 20 lt 10 repeat 8 [ fw 100 rt 90 fw 50 rt 90 fw 30 rt 45 fw 60 make "r :r + 1 ] ]

färgkoder

Fler exempel på Logoprogrammering

W3School

W3School om Canvas

Spelprogrammering.nu

Kopiera in kod och testa

Ett kodexempel från En förstas javascriptövning. Det går i princip att ta ett script från en annan sida och köra i utvecklingsmiljön. Det kan dock vara så att scriptet använder färdiga metoder från något bibliotek och då behöver man hämta in det också. I exemplet nedan används metoder från en fil som redan ligger på spelprogrammering.nu.

Det är bara att ta något av scriptan nedan och kopiera in ovanför </script>

Exempel på kod

function start()
{
  rectangle(10, 20, 400, 250, "blue");
  circle(20, 50, 150, "yellow");
  circle(200, 150, 70, "red");
  triangle(100, 20, 180, 100, 60, 80, "green");
  ring(400, 200, 100, 10, "gray");
  line(100, 350, 750, 100, 10, "pink");
}

Te ett exempel, modifiera och spara

Eller något exempel från den sidan: http://www.spelprogrammering.nu/r2/index

Testa Flygande cirkeln

Uppgift

Testa att ändra färg och storlek på cirkeln

Ändra färg genom att använda en variabel.

Lägg till flera cirklar

Byt till andra former

Ändra hastighet på cirkeln.

Lägg till ett villkor så den byter riktning när den kommer till kanterna av fönstret

Exempel på modifierad kod för flygande cirkeln

<script src="http://spelprogrammering.nu/simple.js">
function start()
{
  ball = {x: 0, y: 0};
  color = "blue";
}

function update()
{
  clearScreen();
  circle(ball.x, ball.y, 50, "green");
  circle(ball.x, ball.y + 50, 30, color);
  ball.x = ball.x + 2;
  ball.y++;
}
</script>

Spara ditt arbete

Använd pilen uppe till vänster för att spara.

Filen finns då i arkivet.

Du kan högerklicka på länken om du vill ladda ner en färdig körklar html-sida med javascriptet inlagt.

Dags för en kort teoretisk genomgång

Att programmera med javascript grunder from Håkan Elderstig

Du får lära dig om variabler, loopar, villkorssatser och funktioner.

HowTo-filmer till spelprogrammering.nu

Micke Tylmad har gjort en fin serie videogenomgångar. De är väl värda att se.

Load video

YouTube

YouTube might collect personal data. Privacy Policy

ContinueDismiss

Av Micke Tylmad, CC By

Exempel med if-sats och användning av variabler.

Intressant här är att vi ändra färg med en villkorssats och en variabel.

ball.y + 50, flyttar bollen nedåt från startläget.

<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>

Bygg ett ritprogram

Enkelt ritprogram

enkelt ritprogram från exemplen i kapitel 2.

Undersök hur du kan

• byta färg att rita med genom att ändra i koden
• ändra storlek på ritfläcken

Mer funktionellt ritprogram

Titta på mitt utvecklade ritprogram. Det finns i arkivs och heter: Ritprogram med flera färger (hemsida öppnas)

Programmet är inte klart men det visar på (halv)-färdiga lösningar som du kan bygga vidare på.

Utveckla det med fler färger och att man byter färg med en tangenttryckning.

Lägg till färgade boxar och text i en palett.

Byt färg om man pekar på en box.

Uppgift
Koda ditt eget ritprogram Bygg vidare på ritprogrammet med fler färger, paletter att klicka på, varierar punktstorlek, andra punktformer, mm. Lämna in på förmpga F1 eller F3 vilket som passar dig bäst.

Funktionerna som används nedan

simple.js

Koden till ritprogrammet

<script src="http://spelprogrammering.nu/simple.js">

  var 	x0 = 50;
  		y0 = 50;
  		bredd =40;
  		hojd = 40;
  		distance = 60;
  		color = "green";
  		radie = 10;

  function update()
   
{
  // rita de färgade rutorna
   rectangle(x0, y0, bredd, hojd, "green"); 
   rectangle(x0, y0 + distance, bredd, hojd, "blue");
   text(x0-30, y0 + distance+25, 14, "b", "blue");
   rectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
  
  // rita med vald färg
  if(mouse.left) 
  {
    circle(mouse.x, mouse.y, radie, color);
  }
  // sudda med vit färg genom högerklick

  if(mouse.right)
  {
    circle(mouse.x, mouse.y, 10, "white");
  }
  // välj färg att rita med
    if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0) 
        && (mouse.y < y0 + hojd))  { color = "green"; }
    if (keyboard.g)  { color = "yellow"; }
    if (keyboard.b)  { color = "blue"; }
  
  // Välj radie på cikeln du ritar med
    if (keyboard.one)  { radie = 2; }
    if (keyboard.two)  { radie = 4; }
    if (keyboard.three)  { radie = 8; }
}
</script>

En pulserande fläck

Kör koden nedan i labbet på spelprogrammering.nu.. Klipp in den i vänstra rutan istället för det exempel som står där.

Testa vad som händer om du tar bort de kommenterade partierna. T alltså bort // i början av raden så koden blir aktiv.

<script src="http://spelprogrammering.nu/simple.js">
  var x0 = 150;
  	  y0 = 200;
  	radie = 20;
  bredd = 100;
  höjd = 200;
  
  function update()
  {
    
    clearScreen()  // ritar om allt nedanför
    rectangle(x0 - bredd /2, y0 - höjd / 2, 
              bredd, höjd, "pink");
    
    circle(x0, y0, radie +  2, "red");
    circle(x0, y0, radie, "green");
    
    //      x0 = x0 + 0.3;
    //   y0 = y0 + 0.3;
    
    //     radie = radie + 0.3;
    
    //   if (radie >= 40) {radie = 0};
  }
</script>

Tips för tusentals färger

Nedan finns ett exempel på kod som ger tusentals färger med hjälp av variablerna r, g, b.

<script src="http://spelprogrammering.nu/simple.js">
// Scriptet ändrar färg på en triangel. 
// Det kan användas till ritprogramet om man vill ha miljoner färger.

  var r = 20;
      g = 30;
      b = 10;
  function update()
  {

    // Klicka i höger fönstret för att det ska funka...
    
        if (keyboard.up)  { b = b + 20 ; }
    
    if (r >= 255) {r = 0 ;}
    if (g >= 255) {g = 0 ;}
 
    
    triangle(170, 10, 30, 100, 320, 100, mixColor(r, g, b));
    
  }

</script>

Om att hämta hem kod

På Mac hämtar du koden genom att klicka på Utvecklare och visa källa. Om du inte har utvecklare-fliken går du in på Safaris inställningar - Advanced och kryssari rutan längst ner.

Ett alternativ är att högerklicka på länken i arkivet och ladda ner sidan till din dator

Filen Advanced.js

här hittar du en del objekt som används i koden.

http://spelprogrammering.nu/advanced.js

Bygg ett eget spel

Välj ett eget projekt

Titta på enkla program som du kan utgå ifrån, inspireras av och bygga vidare på.

Katt och råtta-spelt är bra. Koden finns här (katt och råtta)]

Andra tänkbara projekt

• Kolla Zombierna och gör en liknande med andra bilder som slumpas fram med varierande riktningar, färger och former.
• Rita en logotyp för något du gillar och animera den.
• Skapa ett matematiskt mönster. Jämför med Turtle-övningen.

Utgå från Zombie Tank War

http://spelprogrammering.nu/spela/491171

Det finns i arkivet.

Tankar:

• slumpa fram objekt att skjuta på. Gör som i zombieprogrammet.
• Eller lägg in en fiende
• Eller ...

Här är en vidareutveckling med två tanks: http://spelprogrammering.nu/spela/1555666

Några spelutvecklingsideer

• Pacman Det finns något att bygga vidsare på nedan.
• Bilar kör ikapp
• Gubbar som slåss
• Skjutspel med parabel

Ditt bästa ritprogram

Bygg vidare på ritprogrammet med egna idéer.

Kul ide för Wordpress

Gör en fin liten animering som inte stör för mycket och lägg den i ett inlägg med lämpligt namn så man kan hitta det. Lägg scriptet i textläget. Det kommer då att dyka upp på hela sajten. Till exempel kan du görarn liten TIS-logga som vandrar runt tills man klickar bort den.

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

Julkortet

Den gamla animeringen plus frågeboxar och ett IF-, Else-villkor ger ett enkelt julkort som du kan utveckla vidare till ditt eget

Filer att ladda ner

• julkort.html
• julkort.js
• tomtefiguren

Lägg dem i samma mapp som tidigare för du behöver library.js

Tips: Menyn Utvecklare syns vanligtvis inte. Du visar den genom att öppna Safari-inställningarna, klicka på Avancerat och markera Visa utvecklarmenyn i menyraden.

Julkalender

Det här är en kalender som du kan titta på själv hemma om du har lust

http://www.jojoxx.net/jscript/archive/show.asp?id=146

Ett komplext exempel

Här är ett exempel på fri kod som man kan ladda ner. Att få snöflingor över sidan är mycket mer komplext än man kan tro. Gå in på sidan och kolla källan. Om du vill använda detta i något eget projekt så är koden fri att använda och den finns att ladda ner i ett paket fån GitHub.

http://www.schillmania.com/projects/snowstorm/

Dela med er av era demosar

Vi kommer alltid att behöva demonstratörer. Saker som ni gjort. Exempel på hur bra vi är. Nu är vi helt färska på javascript men det finns änd originella ideer hos er. Ladda upp vad ni har på DropBoxen (kolla att det inte redan ligger en fil med samma namn) så kanske jag visar det på Gymnasiemässan.

Rått Javascript

vi anropar funktioner i filen library.js. Dessa funktioner bygger ihop en del funktioner som är på basnivå. De finns inbyggda i browsern. Så vi har inte lärt oss att använda de inbyggda funktionerna som styr canvas-elementet.

Titta på den här sidan så ser du hur man använder javascript direkt i html-filen och därtill använder de grundläggande funktionerna utan mellanliggnade funktioner.

http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/

Hä är ett både kul och någorlunda begripligt scripta:

http://wikiskola.se/javascript/bouncing_ball.html

El- och Energiklassen

• http://wikiskola.se/javascript/vt13/biladamyazanalfonso.html
• http://wikiskola.se/javascript/vt13/BilarSebastianJochDamianoK.html
• http://wikiskola.se/javascript/vt13/FannyOchNiclasBallaBilar.html
• http://wikiskola.se/javascript/vt13/snogubbe_nathan.html

JavaScript och räta linjen

Kursen Ma1C går i ett rasande högt tempo och den här övningen syftar till att ge dig mer tid för att reflektera över matten och samtidigt nöta in några verkligt centrala begrepp. Samtidigt lär du dig mer programmering i Javascript.

Uppgift

Gör om och förbättra ett Räta linjen spel Börja med att köra spelet som det ser ut i länkarna nedan. Se till att du kan matematiken och förstår koden. Sedan ska vi förbättra programmet. Du kan arbeta med någon av punkterna nedan. nästa lektion kan vi lägga ihop alla bra bidrag till ett suveränt spel. Förbättra designen Skriv tydligare förklaringar Se till så att punkterna inte hamnar över varandra (på samma vertikala linje) hantera vad som händer om man matar in kommatecken eller bråk Ersätt pop up-rutorna med ett inmatningsformulär Kontrollera om linjen hamnar rätt och ge respons på det Redovisa hur många poäng man får (antal rätt och fel) Animering. Låt en figur (som får ett m-värde och ett k-värde) vandra efter linjen. eller gör ett nytt program som slumpar k och m rita linjen gissa k och m Filer: http://wikiskola.se/javascript/ratalinjen_K.html http://wikiskola.se/javascript/ratalinjen_K.js http://wikiskola.se/javascript/trigonometry.js Så här blev det med era förbättringar: Räta linjen by TE12A Bilder, kontroll om man gjort rätt, etc.

Codecademy

Du kan lära dig massor om programmering på egen hand:

Codecademy är bara ett exempel.