HTML, CSS och Javascript: Skillnad mellan sidversioner

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


== Det nya ritprogrammet ==
== Det nya ritprogrammet ==
{{uppgruta | Ritprogrammet
Ta koden nedan och förbättra till ett fantastiskt ritprogram.
Lämna in på Progress
}}


{{Lista |
{{Lista |
Rad 318: Rad 326:
</pre>
</pre>
}}
}}


== En enkel animering ==
== En enkel animering ==

Versionen från 10 november 2016 kl. 08.01

Intro till Programmering

Som intro kan man titta på några olika exempelsidor med enkel kodning samt några platser där man kan lära sig koda. Utforska gärna detta på egen hand.

Intro till Turtle Logo programmering
Scratch
Lär dig programmera genom att spela spel
Codecademy
Teori - programmering med en presentation.

Editors

Det finns en editor att ladda ner som heter TextWrangler och den fungerar bra men länkarna nedan går till moderna editorer. Testa dig fram så du hittar vad som passar dig bäst.

W3Schools TryIt Editor
Atom är ett bra verktyg för att koda med färg.
TextWrangler Traditinellt verktyg för textredigering.

HTML, CSS och Javascript

Vi jobbar på W3School där det finns gott om övningar. Startsidan visar precis vad det handlar om.

CSS

CSS intro och CSS tutorial

HTML

Det enda vi gör med html just nu är att konstatera att det är det skapar en hemsida med vår canvas där vi programmerar i javascript.

Javascript

Läs om hur script-taggen fungerar:

W3Schools Javascrpt - The Script Tag på W3Schools
W3School om Canvas - där man även använder lite Javascript för att rita. Läs igenom alla delarna i avsnittet canvas som du ser i innehållet i vänsterspalten.

Bra att känna till

Färger

Exempelkod

Klipp in den i ett try it yourselffönster. Koden ligger placerad i ett expanderbart fönster för att vi ska få överblick över denna sida.

Lista: (klicka expandera till höger) 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Cirkel //
ctx.beginPath();
ctx.arc(400,0,80,0,2*Math.PI);
ctx.fillStyle = "Yellow";
ctx.fill();

// Streck //
ctx.beginPath();
ctx.moveTo(140,80);
ctx.lineTo(300,10);
ctx.strokeStyle = "Yellow";
ctx.stroke();

// Rektangel //
ctx.fillStyle = "Brown";
ctx.fillRect(50,320, 300,180);

// Polygon tak //
ctx.strokeStyle = "Black";
ctx.fillStyle = "Grey";
ctx.beginPath();
ctx.moveTo(50,320);
ctx.lineTo(350,320);
ctx.lineTo(300,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>

</body>
</html>



Inlämningsuppgift

Uppgift
Rita en fin bild

Rita ett hus eller en fin bild med hjälp av den html du lärt dig på W3Schools.

Du kombinerar alltså linjer, rektanglar, cirklar, färger, gradienter och text till en trevlig bild.

Sedan tar du en skärmdump på bilden, kopierar koden, lägger in i ordbehandlaren och sparar en .pdf. Den lämnar du in på Progress - Teknik 1 - F6.


Funktioner

När du skapade din bild ovan fick du kopiera kodblock för varje byggelement. Koden blir lång och det kan bli fel. Det är därför lämpligt att samla ihop koden i en funktion som sedan åberopas från huvudprogrammet.

Läs detta

Du får bakgrundskunskaper och enkla övningar här:

JS Functions med exemplet Celsius to Fahrenheit ser du hur du kan använda en funktion. Skapa en egen funktion som räknar ut något på samma sätt.
JS Functions på W3Schools
Uppgift
Funktioner förenklar

Använd funktioner för att förenkla koden i din tidigare uppgift. Kodexempel finner du nedan.

Rita en gubbe till ett spel med hjälp av vår enkla grafik och funktioner.

Skapa funktionen myGubbe som är en funktion av funktioner.

Spara en pdf med din kod och en bild och lämna in på F6.


Lista: (klicka expandera till höger) 


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}
this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
</script>

</body>
</html>



Uppgift
Skapa en gubbe

Använd dina kunskaper i att rita med rektanglar, cirklar och polygoner till att skapa n gubbe som du kan ha i nästkommande projekt. Gör en funktion vardera för strecket, rektangeln, cirkeln och polygonen.

Om du vill kan du bygga en funktion för din gubbe som bygger på de tidigar funktionerna.


Om du kör fast

Här visar jag hur man skapar fler funktioner.

Lista: (klicka expandera till höger) 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function myStreck(x1, y1, x2, y2, color) {
ctx.strokeStyle = color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}

function myTriangle(x1,y1,x2,y2,x3,y3, color) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.fill();
ctx.stroke();
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

this.myRectangle(10, 2, 50, 70, "Blue");
this.myRectangle(50, 20, 50, 70, "Green");
this.myRectangle(90, 200, 50, 70, "Red");
this.myCircle(230, 200, 35, 1, "Green");
this.myTriangle(222,222,111,111,211,11, "Purple")
this.myStreck(100, 300, 200, 50, "Orange")

</script>

</body>
</html>



Det nya ritprogrammet

Uppgift
Ritprogrammet


Ta koden nedan och förbättra till ett fantastiskt ritprogram.

Lämna in på Progress


Lista: (klicka expandera till höger) 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

  var  x0 = 50;
    y0 = 30;
    bredd =40;
    hojd = 40;
    distance = 40;
    color = "green";
    radie = 10;
size = 22;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myText(x, y, size, text, color)
{
  ctx.font = size + "pt Helvetica";
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
}

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

  if(mouse.right)
  {
    this.myCircle(mouse.x, mouse.y, radie, 2,"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>

</body>
</html>



En enkel animering

Använd koden nedan och försök få den röda fyrkanten att åka i en fyrkant.

Lista: (klicka expandera till höger) 

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id ="container">
<div id ="animate"></div>
</div>

<script>
// Fram och tillbaks
function myMove() {
  var elem = document.getElementById("animate");
  var pos = 51;
  var dir = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos < 300 && dir == 0) {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == 300){
 dir = 1;}
    } else if (pos > 50 && dir == 1) {
      pos--;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px'; 
      if (pos == 50){ dir = 0;}
    }
  }
}
</script>

</body>
</html>



HTML DOM Game Example

Om du vill bygga spel kan du pröva denna tutorial som startar här. Det blir ett fint spel men koden är avancerad och för avancerad för oss nybörjare.

Vi hittar enklare kod på JavaScript HTML DOM Animation och sidorna i det avsnittet.

Exe,mpelvis: DOM EventListener

Diverse Javascript

Javascript - Introduktion med inlärningsmål och bedömningskriterier
JS Introduction på W3Schools där du kan testa koden för att tända och släcka en glödlampa. Kopiera sedan koden till en textredigerare (Noterad) och spara som .html i en mapp på din dator. Högerklicka på de två bilderna på glödlampan (pic_bulbon.gif och pic_bulboff.gif). Nu kan du öppna filen från din dator och det funkar. nästa sak är att byta bilderna (lägg två nya bilder i mappen på din dator och ändra namnen i koden i html-filen).

Spelprogrammering.nu

Spelprogrammering.nu - Intro
Spelprogrammering.nu - Ritprogram - Det fungerar i W3School!
Spelprogrammering.nu - Ditt egna projekt
Lite_javascript - Javascript lokalt på egna datorn. Här hittar du även den användbara filen library.js.
Javascript_med_animering
Javascript:_Interaktion_med_användare
Julkortet
Räta_linjen
Javascript i Wordpress

API:er

Google API
Hämtad från ”https://wikiskola.se/index.php?title=HTML,_CSS_och_Javascript&oldid=37896”