Lite javascript: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
(Skapade sidan med '== Lite Javascript == {{jspel|En liten övning i skuggan}} === Html5, CSS3 och Javascript === Html5, CSS3 och Javascript är den nya standarden för hemsidor. De stora fö...')
 
Rad 1: Rad 1:
== En första lektion med Turtle ==
{{:Intro till Turtle Logo programmering}}
== Lite Javascript ==
== Lite Javascript ==
{{jspel|En liten övning i skuggan}}
{{jspel|En liten övning i skuggan}}

Versionen från 11 februari 2014 kl. 21.02

En första lektion med Turtle

Intro till Turtle Logo programmering

Mål för undervisningen Du kommer att lär dig
Vad ett program är
Ett enkelt sätt att programmera fina mönster


  • 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

Turtle i GeoGebra


Lite Javascript

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan


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 litet 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
  1. Skaffa editeringsprogrammet TextWrangler från App Store.
  2. Lägg alla filer i en och samma mapp på dina dator. Spara ner rita.js, library.js och rita.html i en mapp på din dator och verifiera att det funkar. Ändra inte namn på filerna
  3. 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.
  4. Rita en bakgrundsbild med cirklar, rektanglar och streck.
  5. Rita en liten figur som du kan använda i framtida animeringar och spel.
  6. Låt figuren vandra över skärmen.


Praktiska tips

  • Surfa med Safari
  • OM du använder Chrome - Spara som ren html