Lite javascript: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
 
Rad 11: Rad 11:


=== Jobba själv ===
=== 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å.
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.
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.
{{uppgruta|
{{uppgruta|
# Skaffa editeringsprogrammet TextWrangler från App Store.  
# Skaffa editeringsprogrammet TextWrangler från App Store.  
# 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'''
# 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ände den här sidan att pröva på: http://www.wikiskola.se/javascript/rita.html
#* 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
#* koden: http://www.wikiskola.se/javascript/rita.js
#* samt en libraryfil: http://www.wikiskola.se/javascript/library.js
#* samt en libraryfil: http://www.wikiskola.se/javascript/library.js

Nuvarande version från 27 maj 2016 kl. 07.09

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 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
  1. Skaffa editeringsprogrammet TextWrangler från App Store.
  2. 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
  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